在 Chrome 中調試 Android 瀏覽器

最近須要使用 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-tools adb 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 就行了。不清楚是哪兒的問題。

最後來一個成功的截圖吧！