如何在Xcode中查看PhoneGap應用程序的javascript錯誤？

Question

我想在Xcode中調試我的PhoneGap應用程序，但其控制台無法顯示javascript錯誤。

Answer 1

在Cordova / PhoneGap應用程序中查看和調試JavaScript錯誤的最優雅方法是將Web Inspector從Safari瀏覽器附加到iOS應用程序中的Web View（但是，就像Tom Clarkson已經提到的那樣，您至少需要iOS 6 ）。

• 在iPad或iPhone上，使用“設置應用程序”在Safari的“高級設置”中啟用Web Inspector
• 通過USB將您的設備連接到Mac（它將顯示在Safari的“開發”菜單下）
• 啟動你的應用程序
• 導航到要調試的Web視圖
• 在Mac上，從Safari Develop菜單中，從子菜單中選擇設備名稱和App（其HTML頁面）
• 將打開Web Inspector窗口，使您可以瀏覽DOM，設置斷點等。

關於設置它的蘋果文檔

徹底的第三方教程

或者，您可以在安裝iOS WebKit調試代理后將Chrome的Web Inspector連接到iOS設備。 這也開啟了從Linux或Windows進行檢查的能力。

現在，遠程訪問iOS的HTML，CSS和JavaScript變得更加靈活，因為您可以在上述調試代理之上安裝RemoteDebug iOS WebKit適配器 。 由於此適配器將WebKit遠程調試協議轉換為Chrome調試協議 ，因此這些（在其所有支持的平台上）可用作備用調試和檢查工具：

• Visual Studio代碼
• Chrome DevTools
• Mozilla調試器

順便說一句，使用Safari Web Inspector進行遠程調試甚至可以與iOS模擬器結合使用。

---

每個iOS版本的Desktop Safari的最低版本

對於每個版本的iOS，您需要特定的Desktop Safari最低版本才能使用遠程Web檢查，請參閱下面的列表。

iOS 6

Safari 6+

IOS 7

Safari 6.1+

iOS 8

Safari 7.1+

iOS 9

Safari 8+

iOS 10

Safari 9 + / 10 +？ 請評論; 總是嘗試Safari技術預覽

iOS 11

Safari 11+

iOS 12

Safari 12+

Answer 2

將以下內容粘貼到文檔開頭附近，以便在任何其他JavaScript之前執行。

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

並享受在Xcode控制台窗口中查看Javascript錯誤的詳細信息。

更新：上述技術將記錄未定義變量等錯誤。 但是語法錯誤（例如缺少逗號）仍會導致整個腳本在沒有記錄任何內容的情況下中斷。

因此，您應該將以下內容添加到onDeviceReady函數的開頭：

console.log('Javascript OK');

如果您在應用程序啟動時沒有在日志窗口中看到“JavaScript OK”，則表示您在某處出現語法錯誤。

為了節省缺少逗號的搜索，最簡單的方法是將代碼粘貼到Javascript驗證器中，例如：

http://www.javascriptlint.com/online_lint.php

讓它為你找到錯誤。

希望這會帶來一些調試的痛苦。

Answer 3

請注意，對於0.9.2（今天發布），console.log已在各個平台上標准化以進行日志記錄（不推薦使用debug.log）。

桌面WebView上有一個功能可以在iOS UIWebView中公開，它將捕獲所有錯誤（我試圖將該功能破解為插件，該插件使用私有API，但該插件僅用於開發），但是現在做Kris上面提到的並在代碼上放置try catch塊並使用console.log

為了快速捕獲可能的語法錯誤，在開發時我已經在桌面Safari中加載了頁面並使用webkit錯誤控制台可以快速刷新它。

Answer 4

如果你使用iOS 6，你可以簡單地將safari web檢查器（在桌面safari的開發菜單上）附加到你的應用程序並獲得完整的javascript調試。

有幾個方面它有點受限 - 啟動錯誤和插件調用 - 但它適用於其他任何東西。

Answer 5

debug.log會將消息發送到Phonegap中的XCode控制台（允許您記錄異常的結果或進行一些調試），但是，您必須在Safari中調試其他javascript錯誤（在桌面上或在啟用了調試控制台的iphone上）。 我還沒有找到一個Javascript錯誤，這是由於在iphone上運行引起的，並且在Safari中打開控制台進行調試時不存在（雖然我知道iphone上的WebView和Safari之間存在一些差異）。

Answer 6

為了在Xcode中進行javascript調試，我將看看以下內容。

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

至於額外的故障排除......
首先，你可以在你的電腦上運行safari中的應用程序並使用safari的調試器（或者chrome都運行類似的渲染引擎）。 這不會遇到高級邏輯錯誤和許多api問題，但它至少應該有助於解決許多問題（基本的javascript，HTML5等......）。

Answer 7

我剛遇到了Weinre

這是一個用於phonegap的遠程javascript調試器。 您可以設置自己的Weinre服務器，也可以使用http://debug.phonegap.com/上的服務器。

它似乎工作得很好 - 到目前為止印象非常深刻。

Answer 8

要在javascript控制台中查看所有錯誤，我同意使用此事件監聽器

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

但是，除非你安裝了cordova插件，否則它不會在XCodes“console”上顯示。 轉到項目文件夾並鍵入：

? cordova plugin add cordova-plugin-console

這將允許javascript命令'console.log（'some string'）顯示在XCode上。

請注意，您將需要git等...但如果您在xcode中編輯您的phonegap項目，您很可能會擁有它！

PS確保在使用console.log之前放入cordova.js腳本插件

<script type="text/javascript" src="/cordova.js"></script>

Answer 9

把它放在index.html的開頭

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Answer 10

這是一個對我有用的簡單方法：

• cd到終端中包含index.html文件的目錄

• 通過調用（我使用python 2.7）使用python啟動http服務器：

  python -m SimpleHTTPServer

• 通過在瀏覽器中輸入HTTPServer的地址來查看safari中的頁面，對我來說URL是：

   http://0.0.0.0:8000/ 

• 打開開發者工具：

  在chrome中，這是alt + command + i。 查看控制台選項卡，可能需要刷新頁面。

  在Safari中：Safari - >首選項 - >高級 - >選中“顯示開發菜單”。 開發菜單 - >顯示錯誤控制台（或alt + command + c）。 刷新頁面。 點擊CTRL + 5打開問題選項卡。