一：背景
通常情況我們調試移動端頁面最常用的方法就是：切換pc端瀏覽器的userAgent來模擬手機或其他移動設備調試頁面 然後用手機打開要調試的頁面 刷新頁面查看調試結果
但是這就存在兩個問題 在pc瀏覽器模擬手機可能造成調試不準 用手機直接調試 又多一步刷新 那怎麼能達到在pc端修改代碼 在手機上直接看到修改結果這樣的所見即所得的效果呢 chrome做到了
二.功能
我們先看下最終想要達到的效果
上圖的左邊是pc端的chrome瀏覽器，右邊是手機上的chrome 然後可以看到當鼠標移動到某個div上時 手機上的這個區域高亮顯示 跟pc上調試某段代碼效果一樣 你可以修改代碼 並直接在手機上反饋修改結果
三，準備
爲了完成這一亮騷的移動調試功能我們需要以下準備工作
1.pc端安裝最新的chrome
2.手機端安裝最新的chrome (Android機)
3.USB連接線
（感覺是不是too simple）
Tip:之前的的chrome如果要實現這種調試需要安裝一個ADB插件（需要FQ） 但是最新的chrome已經直接支持對Android的識別 所以也不用再在chrome上安裝ADB插件了 但需要下載最新的chrome
四：步驟
下來我們逐步完成
1.假設你已經在電腦上下載了最新的chrome 也在手機上下載了最新的chrome
2.USB設置 在你的手機裏打開"設置"->"開發人員工具"->"USB調試" 打開USB調試。 因爲Android手機型號衆多 很多人找不到"USB調試這個選項在哪" 而且大多數手機"開發者選項"默認是影藏的，你需要看下自己的手機說明然後將手機調到"開發者模式" 就可以找到 "USB調試了"
3.假設你已經將手機設置爲"USB調試"打開的狀態 將手機連接到電腦 手機會彈出是否鏈接 點擊確定
4.打開電腦的chrome 在地址欄輸入 chrome://inspect 選中 Discover USB devices 可以檢測到你的設備 可以看到監測到我的設備是M351 魅族X3
5.打開手機上的chrome
上圖可以看到手機上chrome打開的頁面 此時我手機上的chrome沒打開任何網頁 歷史記錄也麼有 如果我們在手機 chrome瀏覽器輸入www.cnblogs.com 可以看到下圖 ，也可以通過 inspect裏chrome後面那個輸入框直接打開某個鏈接
6.點擊inspect 如下圖 就看到了文章開始一樣的效果 此時就是可以審查手機頁面上的元素了
7.可以點擊彈出的審查元素框右上角的方形小圖標切換到視圖模式 這時會把你手機打開的頁面拉到pc上顯示
五：總結
基本上已經愉快的完成了 總結下整個流程 ：pc端和Android手機端都下載最新的chrome ，在手機設置裏將"USB調試"打開 鏈接到電腦 打開電腦chrome 輸入chrome://inspect 打開手機chrome輸入你想調試的頁面 點擊inspect 開始調試 ,整個調試的過程都是要FQ的哦 。