最近需要使用 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 就好了。不清楚是哪兒的問題。
最后來一個成功的截圖吧！
