如何在 Android 上調試 javascript？

Question

我正在從事一個涉及 Raphaeljs 的項目。 事實證明，它在 Android 上不起作用。它在 iPhone 上起作用。

我 go 如何在 Android 瀏覽器上調試某些東西？ 它是 WebKit，所以如果我知道版本，在那個完整版本的 WebKit 上調試它會產生相同的結果嗎？

Answer 1

更新：遠程調試

以前，控制台日志記錄是在 Android 上調試 JavaScript 的最佳選擇。 現在有了 Chrome for Android 遠程調試，我們可以在 Android 上利用 Chrome for Desktop Developer Tools 的所有優點。 查看https://developers.google.com/chrome-developer-tools/docs/remote-debugging了解更多信息。

---

更新：JavaScript 控制台

您還可以導航到 URL 欄中的 about:debug，以使用最新的 Android 設備激活調試菜單和 JavaScript 錯誤控制台。 您應該會在瀏覽器頂部看到 SHOW JAVASCRIPT CONSOLE。

目前在 Android 4.0.3 (Ice Cream Sandwich) 中，logcat 輸出到瀏覽器通道。 因此，您可以使用adb logcat browser:* *:S進行過濾。

---

原答案

您可以使用內置的console JavaScript 對象打印可以使用adb logcat查看的日志消息。

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

產生這個輸出：

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

確定 WebKit 的版本

如果您在地址欄中鍵入javascript:alert(navigator.userAgent) ，您將看到列出的 WebKit 版本，例如

在 Chrome 中： Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

在 Android Emulator Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

不屬於 Safari 版本的 WebKit 版本在版本號后面有一個 +，它們的版本號通常高於最新發布的 WebKit 版本。 因此，例如，528+ 是 WebKit 的非官方版本，它比作為 Safari 3.1.2 的一部分提供的 525.x 版本更新。

Answer 2

嘗試：

1. 打開要調試的頁面

2. 在該頁面上，在普通 Android 瀏覽器的地址欄中，鍵入：

    about:debug

   （注意沒有任何反應，但一些新選項已啟用。）

適用於我嘗試過的設備。 閱讀更多關於Android 瀏覽器的 about:debug，這些設置有什么作用？

編輯：還有助於檢索行號等更多信息的是將此代碼添加到您的腳本中：

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Answer 3

http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) 提供了一種可以用來訪問網頁內容的好方法。

Answer 4

我使用Weinre ， Apache Cordova 的一部分。

使用 Weinre，我可以在桌面瀏覽器中獲得 Google Chrome 的調試控制台，並且可以將 Android 連接到該調試控制台，並調試 HTML 和 CSS。 我可以在控制台中執行 Javascript 命令，它們會影響 Android 瀏覽器中的網頁。 來自 Android 的日志消息顯示在桌面調試控制台中。

但是，我認為無法查看或逐步執行實際的 Javascript 代碼。 所以我將 Weinre 與日志消息結合起來。

（我對JConsole不太了解，但在我看來，JConsole 無法檢查 HTML 和 CSS，只能檢查 Javascript 命令和日志記錄 (?)。）

Answer 5

看看jsHybugger 。 它將允許您遠程調試您的 js 代碼：

• Android 混合應用程序（webview、phonegap、worklight）
• 在默認 android 瀏覽器中運行的網頁（不是 Chrome，它支持沒有這個工具的 ADB 擴展）

這是如何工作的（項目網站上的更多細節和替代方案，這是我發現的最佳方式）。

1. 在您的設備上安裝 jsHybugger APK
2. 在您的設備上啟用 USB 調試。
3. 通過 USB 將 Android 設備插入台式計算機
4. 在 Android 設備上運行應用程序 ('jsHybugger')
5. 在應用程序中輸入目標 URL 和頁面。 按開始服務，最后打開瀏覽器
   • 您將看到已安裝瀏覽器的列表，請選擇一個。
   • 瀏覽器啟動。
6. 回到您的台式計算機上，打開 Chrome 以chrome://inspect/
7. 將出現一個檢查器窗口，其中包含鏈接到 Android 設備頁面的 chrome 調試工具。
8. 調試出去！

同樣，Android 上的 Chrome 使用 ADB 擴展而不使用 jsHybugger。 我認為這已經在這個問題的公認答案中描述過。

Answer 6

僅供參考，RaphaelJS 在 android 上不起作用的原因是 android webkit（與 iPhone webkit 不同）此時不支持 SVG。 谷歌最近才得出結論，SVG 支持安卓系統是一個好主意，所以它在一段時間內還無法使用。

Answer 7

在 Android 5.1.1 上的 Galaxy S6 上對 Android 本機瀏覽器的完整 Chrome 遠程調試：

1. 在手機上啟用USB調試（設置、關於、快速點擊版本號、開發者設置、USB調試）
2. 打開“互聯網”
3. 導航到“about:debug”（你會看到一個錯誤）
4. 更多菜單>設置>調試>遠程調試
5. 使用 USB 數據線將手機連接到計算機
6. 在手機上，在 Internet 網絡瀏覽器中，打開要調試的站點
7. 在電腦上打開 Chrome
8. 導航到“chrome://inspect”
9. 單擊要檢查的瀏覽器選項卡上的檢查

Galaxy S5 設備顯示在 Chrome 中，但標簽僅在您重新啟動后顯示。 重新啟動並嘗試附加后，移動瀏覽器崩潰。

Answer 8

3.0 之前的 Android 瀏覽器不支持 Raphael，這就是您的問題所在。 它們不支持 SVG 圖形。 不過它確實支持畫布。 如果不需要動畫，可以使用 canvg 渲染圖形：

http://code.google.com/p/canvg/

這就是我們在默認的 Android 瀏覽器中渲染 SVG 圖標時解決這個問題的方法。

Answer 9

放入地址行chrome://about 。 您將看到所有可能的開發頁面的鏈接。

Answer 10

在三星標簽上的 Android KitKat 4.4.2 上的 Chrome 或 Opera 上嘗試時的about:debug （或chrome:\\\\debug兩者都說找不到頁面，但在設置中啟用調試菜單）

如果您在設備上擁有 ROOT 權限，則可以直接在設備上查看控制台消息。 使用 CatLog 之類的應用程序查看日志輸出 - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en這將讓您查看所有 logcat 活動。

在 Android KitKat/4.4.2 中，瀏覽器控制台輸出到 Chromium 通道。 您可以通過“Chromium”進行過濾以獲取所有瀏覽器活動（包括瀏覽器的內部活動），或者僅通過“控制台”進行過濾以僅查看瀏覽器控制台日志。

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Answer 11

運行 Android 模擬器時，打開 Google Chrome 瀏覽器，然后在“地址字段”中輸入：

chrome://inspect/#devices

您將看到遠程目標列表。 找到您的目標，然后單擊“檢查”鏈接。

Answer 12

Chrome 有一個很棒的功能，可以將實際的 Android Chrome 內容（包括檢查等）帶到 PC 屏幕上......

• 在設備上啟用USB調試，也許您還需要通過adb devices連接一次以觸發移動設備上的“允許與...通信”對話框，
• 將 Android 設備連接到 PC，
• 在兩者上啟動 Chrome，以及
• 然后導航到 PC 上的chrome://inspect/#devices 。
• 此處列出了手機 Chrome 中的選項卡，可以對其進行檢查。

網上還有詳細的手冊： https : //www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

（發現在adb logcat之后瀏覽器沒有顯示任何內容）

Answer 13

你可以試試YConsole一個 js 嵌入式控制台。 它輕巧且易於使用。

• 捕獲日志和錯誤。
• 對象編輯器。

如何使用 ：

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Answer 14

我的解決方案是（對於股票瀏覽器）：

• 股票瀏覽器
• “consolo.log”進入JS源代碼
• 調試 USB 已啟用
• 安卓SDK
• 來自 Android SDK：monitor.bat
• 監視器過濾器作為附加圖像

Answer 15

Android Studio 提供了查看 console.log 和其他所需的一切。 在 logcat 中只需過濾到“/Web Console”，您就會看到您的 js 日志...

如果您遇到任何問題，可以添加此插件： https : //github.com/apache/cordova-plugin-console

Answer 16

如果您正在尋找非遠程選項：

如果 android.permission.READL_LOGS 一次通過 adb 授予，則在較早且非 root 的 Jellybean 版本上，可以使用 logcat 查看器。

在 firefox 上，有一個控制台插件可以讀取和顯示所有應用程序日志，還有firebug lite 。

Answer 17

您可以通過運行“npm install javascript-compiler-deva”命令然后使用“node compiler.js”運行compiler.is來嘗試從npm庫中使用“javascript-compiler-deva”。

它在端口8888 上創建了一個服務器。然后您可以點擊“ http://localhost:8888 ”並輸入您的 JavaScript 代碼，然后可以在手機瀏覽器本身中查看任何 JavaScript 代碼的結果，包括“console.log”。

它也托管在“ https://javascript-compiler-deva.herokuapp.com/ ”中

Answer 18

本地調試/about:config... 選項似乎不再適用於 2020+ chrome/ff/.. 瀏覽器。

另一個帶有非遠程 js 控制台的瀏覽器是DevBrowser

或WebInspector （文件選擇器不起作用）

Answer 19

沒有人提到liriliri/eruda ，它添加了自己的用於移動網站/應用程序的調試工具

將此添加到您的頁面：

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

將向您的頁面添加一個浮動圖標，以打開控制台。

Answer 20

你可以試試https://github.com/fullpipe/screen-log 。 試圖使它干凈和簡單。

Answer 21

有一個名為OutFront JS的 npm 插件，您可以使用它來調試移動瀏覽器。

它基本上將控制台中的所有消息、警告和錯誤記錄到屏幕上的彈出窗口中。

Answer 22

試試“vconsole”，也許對你有幫助

Answer 23

“Kiwi 瀏覽器”具有與桌面 chrome 瀏覽器相同的工具，可以在 android 中進行本地調試 - 無需 usb。 加載 html 文件並在菜單中選擇“開發者工具”。 如需重啟調試，重新加載html。