在 Chrome 中調試 Android 瀏覽器

標籤：版本   經驗分享   效率   視窗   hit   div   web   中文   nod   

最近需要使用 Chrome Developer Tools 調試 Android 瀏覽器，但是官方指南並不是很好使，經過一番折騰，終於調試成功了，在此把經驗分享給需要的朋友。

Chrome Developer Tools 是前端工程師必不可少的工具，它極大的提高了我們的開發調試效率。在移動開發的時代，我們也必須掌握手機瀏覽器在 Chrome 中調試的方法。本篇僅介紹 Android。

環境

不同的環境可能存在一些差異，我的環境是：

• Windows 10
• 電腦 Chrome 50.0.2661.75 m
• Galaxy Node 3
• Android 5.0
• 手機 Chrome Dev 51.0.2704.10 （從豌豆莢下載的）

安裝 USB driver

首先需要安裝的是 USB 驅動，雖說現在大部分作業系統都可以自動安裝識別手機的驅動，但是如果要用於連上電腦調試，還是得手動安裝一個，我安裝的是：Samsung Andorid USB Driver for Windows

其他裝置也可以在這裡找到對應的驅動：OEM USB Drivers

啟動手機上的開發人員模式

進入設定，找到開發人員模式即可。但是 Android 4.2 之後的機器，開發人員模式都被隱藏了，需要在關於裝置中找到 Build Number，中文對應的可能是「組建號」，找到之後狂點它，過一會兒就會提示是否開啟開發人員模式了。

 

 

 

串連手機和電腦

串連之後，如果手機彈框詢問是否允許 Debug，點擊允許之後，可以跳過以下安裝 ADB Server 的步驟，直接進入最後一步。

如果手機上沒有彈框，八成是沒有啟動 ADB Server，請接著往下看。

安裝 ADB Server

ADB 是 Android Debug Bridge 的簡稱，是 Android SDK Platform-tools 中的一個工具。根據這個 Stackoverflow 上的指南，可以只用安裝 single ADB package。但是我遇到一些問題，於是我把整個 Android Studio 安裝了，說不定以後要開發 Android 應用呢。

啟動 ADB Server

我是直接安裝的 Android Studio，於是根據這個 Stackoverflow 上的解答，找到了 adb 的地址：C:\Users\<insert username here>\AppData\Local\Android\sdk\platform-tools\adb.exe

在 cmd 中運行

cd C:\Users\<insert username here>\AppData\Local\Android\sdk\platform-toolsadb start-server

即可。

Tips：重啟電腦之後，如果還需要調試，得重新執行一遍 adb start-server。

在 Chrome 中調試

開啟電腦中的 Chrome，瀏覽器中輸入 chrome://inspect，進入後勾選 Discover USB devices，就可以看到手機的 Chrome 上開啟的頁面了。

點擊 inspect，會在新視窗開啟一個 Chrome Developer Tools 的頁面，即可以調試了。

Tips：手機上的原生瀏覽器也支援在 Chrome 中調試，但是看不到預覽圖。

Tips：電腦上開啟的 Chrome Developer Tools 的頁面，是根據手機上的 Chrome 版本產生的，所以可能和電腦上的頁面有點不同。

這裡我遇到一個問題，www.90168.org手機中如果安裝的是 Chrome，則在電腦中一點 inspect 就會閃退。後來在手機中安裝了 Chrome Dev 就好了。不清楚是哪兒的問題。

最後來一個成功的吧！

 

在 Chrome 中調試 Android 瀏覽器