移動前端調試方案(Android + Chrome 實現遠程調試)


原文  http://www.cnblogs.com/leinov/p/4094138.html

 

一:背景

通常情況我們調試移動端頁面最常用的方法就是:切換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.baidu.com 可以看到下圖 ,也可以通過 inspect里chrome后面那個輸入框直接打開某個鏈接

6.點擊inspect 如下圖 就看到了文章開始一樣的效果 此時就是可以審查手機頁面上的元素了

7.可以點擊彈出的審查元素框右上角的方形小圖標切換到視圖模式 這時會把你手機打開的頁面拉到pc上顯示

五:總結

基本上已經愉快的完成了 總結下整個流程 :pc端和Android手機端都下載最新的chrome ,在手機設置里將"USB調試"打開 鏈接到電腦 打開電腦chrome 輸入chrome://inspect 打開手機chrome輸入你想調試的頁面 點擊inspect 開始調試。

這是   chrome開發者上的原文 需FQ


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com