釘釘開發筆記(六)使用Google瀏覽器作真機頁面調試

注：

參考文獻：https://developers.google.com/web/

部分字段爲翻譯文獻，水平有限，若有錯誤敬請指正

---

 

步驟1：

從Windows，Mac或Linux計算機遠程調試Android設備上的實時內容。本教程將教您如何：

設置您的Android設備進行遠程調試，並從開發機器中發現它。
從您的開發機器檢查和調試Android設備上的實時內容。
未來自Android設備的內容屏幕截圖到開發機器上的DevTools實例。

 

要求

Chrome 32或更高版本安裝在您的開發機器上。
USB驅動程序安裝在您的開發機器上，若是您使用的是Windows。確保設備管理器報告正確的USB驅動程序。
用於將Android設備鏈接到開發機的USB電纜。
Android 4.0或更高版本。
Chrome Android版已安裝在您的Android設備上。
步驟1：探索您的Android裝置

• 在Android設備上，選擇設置 > 開發者選項 > 啓用USB調試。默認狀況下，在Android 4.2及更高版本中隱藏開發者選項。請參閱啓用設備上開發人員選項 以瞭解如何啓用它。
• 在開發機器上，打開Chrome。您應該使用本身的某個Google賬戶登陸Chrome。遠程調試在隱身模式或訪客模式下不工做 。
• 打開DevTools。
• 在DevTools中，單擊主菜單， 主菜單 而後選擇更多工具 > 遠程設備。

• 在DevTools中，若是顯示另外一個選項卡，請單擊「 設置」選項卡。
• 確保啓用Discover USB設備。
• 使用USB電纜將Android設備直接鏈接到開發機器。不要使用任何中間USB集線器。若是這是您第一次將Android設備鏈接到此開發機器，您的設備會顯示在「 未知」下，其下方顯示「 待批准 」文字。

• 若是您的設備顯示爲未知，請在Android設備上接受容許USB調試權限提示。未知將替換爲您的Android設備的型號名稱。綠色圓圈和已鏈接文本表示您已設置爲從開發機器遠程調試Android設備。

注意：若是您在發現過程當中遇到任何問題，能夠經過在Android設備上選擇設置 > 開發人員選項 > 撤消USB調試受權來從新啓動它。

 

步驟2：從開發機器調試Android設備上的內容

• 若是您還沒有在Android設備上打開Chrome，請當即打開。
• 返回DevTools，單擊與設備型號名稱匹配的選項卡。在此頁面頂部，您會看到Android設備的型號名稱，後面是其序列號。在下面，您能夠看到在設備上運行的Chrome版本，版本號在括號中。每一個打開的Chrome標籤都有本身的部分。您能夠今後部分與該選項卡進行交互。若是有任何使用WebView的應用程序，您還會看到每一個應用程序的一個部分。下面的截圖沒有打開任何選項卡或WebViews。

• 在「 新建」選項卡旁邊，輸入URL，而後單擊「 打開」。該頁面會在Android設備上的新標籤頁上打開。
• 點擊您剛剛打開的網址旁邊的「 檢查」。將打開一個新的DevTools實例。在Android設備上運行的Chrome版本決定在開發機器上打開的DevTools的版本。所以，若是您的Android設備運行的是一個很是老的Chrome版本，DevTools實例可能看起來與之前不一樣。

 

更多操做：從新加載，聚焦或關閉標籤頁

• 單擊要從新加載，聚焦或關閉的選項卡旁邊的更多選項 更多的選擇。

檢查元素

 

• 轉到DevTools實例的「 元素」面板，將鼠標懸停在某個元素上以在Android設備的視口中將其突出顯示。

 

• 您也能夠點按Android設備屏幕上的元素，而後在「 元素」面板中將其選中 。單擊您的DevTools實例上的選擇元素 選擇元素，而後點擊Android設備屏幕上的元素。請注意，選擇元素 在第一次觸摸後被禁用，所以您須要在每次要使用此功能時從新啓用它。

 

 

PS：從Android設備到開發機的屏幕錄像

• 單擊切換屏幕錄像 切換屏幕錄像 可在DevTools實例中查看Android設備的內容。
• 您能夠經過多種方式與screencast進行交互：
• 點擊會翻譯成觸碰，在設備上觸發正確的觸摸事件。
• 計算機上的按鍵被髮送到設備。
• 要模擬捏合手勢，請Shift在拖動時按住。
• 要滾動，請使用觸控板或鼠標滾輪，或使用鼠標指針滑動。
• 關於屏幕錄像的一些注意事項：
• 屏幕錄像僅顯示頁面內容。截屏的透明部分表示設備界面，例如Chrome瀏覽器多功能框，Android狀態欄或Android鍵盤。
• 屏幕錄像對幀速率有負面影響。在測量卷軸或動畫時停用屏幕播放功能，以便更準確地瞭解您的網頁的效果。
• 若是您的Android設備屏幕鎖定，您的screencast的內容消失。解鎖Android設備屏幕以自動恢復屏幕錄像。