注：

參考文獻(xiàn)：https://developers.google.com/web/

部分字段為翻譯文獻(xiàn)，水平有限，如有錯誤敬請指正

 

步驟1：

從Windows，Mac或Linux計(jì)算機(jī)遠(yuǎn)程調(diào)試Android設(shè)備上的實(shí)時內(nèi)容。本教程將教您如何：

設(shè)置您的Android設(shè)備進(jìn)行遠(yuǎn)程調(diào)試，并從開發(fā)機(jī)器中發(fā)現(xiàn)它。
從您的開發(fā)機(jī)器檢查和調(diào)試Android設(shè)備上的實(shí)時內(nèi)容。
將來自Android設(shè)備的內(nèi)容屏幕截圖到開發(fā)機(jī)器上的DevTools實(shí)例。

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

 

要求

Chrome 32或更高版本安裝在您的開發(fā)機(jī)器上。
USB驅(qū)動程序安裝在您的開發(fā)機(jī)器上，如果您使用的是Windows。確保設(shè)備管理器報告正確的USB驅(qū)動程序。
用于將Android設(shè)備連接到開發(fā)機(jī)的USB電纜。
Android 4.0或更高版本。
Chrome Android版已安裝在您的Android設(shè)備上。
步驟1：探索您的Android裝置

  • 在Android設(shè)備上，選擇設(shè)置 > 開發(fā)者選項(xiàng) > 啟用USB調(diào)試。默認(rèn)情況下，在Android 4.2及更高版本中隱藏開發(fā)者選項(xiàng)。請參閱啟用設(shè)備上開發(fā)人員選項(xiàng) 以了解如何啟用它。

  • 在開發(fā)機(jī)器上，打開Chrome。您應(yīng)該使用自己的某個Google帳戶登錄Chrome。遠(yuǎn)程調(diào)試在隱身模式或訪客模式下不工作 。

  • 打開DevTools。

  • 在DevTools中，單擊主菜單， 主菜單 然后選擇更多工具 > 遠(yuǎn)程設(shè)備。

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 在DevTools中，如果顯示另一個選項(xiàng)卡，請單擊“ 設(shè)置”選項(xiàng)卡。

  • 確保啟用Discover USB設(shè)備。

  • 使用USB電纜將Android設(shè)備直接連接到開發(fā)機(jī)器。不要使用任何中間USB集線器。如果這是您第一次將Android設(shè)備連接到此開發(fā)機(jī)器，您的設(shè)備會顯示在“ 未知”下，其下方顯示“ 待批準(zhǔn) ”文字。

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 如果您的設(shè)備顯示為未知，請在Android設(shè)備上接受允許USB調(diào)試權(quán)限提示。未知將替換為您的Android設(shè)備的型號名稱。綠色圓圈和已連接文本表示您已設(shè)置為從開發(fā)機(jī)器遠(yuǎn)程調(diào)試Android設(shè)備。

注意：如果您在發(fā)現(xiàn)過程中遇到任何問題，可以通過在Android設(shè)備上選擇設(shè)置 > 開發(fā)人員選項(xiàng) > 撤消USB調(diào)試授權(quán)來重新啟動它。

 

步驟2：從開發(fā)機(jī)器調(diào)試Android設(shè)備上的內(nèi)容

  • 如果您尚未在Android設(shè)備上打開Chrome，請立即打開。

  • 返回DevTools，單擊與設(shè)備型號名稱匹配的選項(xiàng)卡。在此頁面頂部，您會看到Android設(shè)備的型號名稱，后面是其序列號。在下面，您可以看到在設(shè)備上運(yùn)行的Chrome版本，版本號在括號中。每個打開的Chrome標(biāo)簽都有自己的部分。您可以從此部分與該選項(xiàng)卡進(jìn)行交互。如果有任何使用WebView的應(yīng)用程序，您還會看到每個應(yīng)用程序的一個部分。下面的截圖沒有打開任何選項(xiàng)卡或WebViews。

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  • 在“ 新建”選項(xiàng)卡旁邊，輸入URL，然后單擊“ 打開”。該頁面會在Android設(shè)備上的新標(biāo)簽頁上打開。

  • 點(diǎn)擊您剛剛打開的網(wǎng)址旁邊的“ 檢查”。將打開一個新的DevTools實(shí)例。在Android設(shè)備上運(yùn)行的Chrome版本決定在開發(fā)機(jī)器上打開的DevTools的版本。因此，如果您的Android設(shè)備運(yùn)行的是一個非常老的Chrome版本，DevTools實(shí)例可能看起來與以前不同。

 

更多操作：重新加載，聚焦或關(guān)閉標(biāo)簽頁

  • 單擊要重新加載，聚焦或關(guān)閉的選項(xiàng)卡旁邊的更多選項(xiàng) 更多的選擇。

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

檢查元素

 

  • 轉(zhuǎn)到DevTools實(shí)例的“ 元素”面板，將鼠標(biāo)懸停在某個元素上以在Android設(shè)備的視口中將其突出顯示。

 

  • 您也可以點(diǎn)按Android設(shè)備屏幕上的元素，然后在“ 元素”面板中將其選中 。單擊您的DevTools實(shí)例上的選擇元素 選擇元素，然后點(diǎn)擊Android設(shè)備屏幕上的元素。請注意，選擇元素 在第一次觸摸后被禁用，因此您需要在每次要使用此功能時重新啟用它。

 

 

PS：從Android設(shè)備到開發(fā)機(jī)的屏幕錄像

  • 單擊切換屏幕錄像 切換屏幕錄像 可在DevTools實(shí)例中查看Android設(shè)備的內(nèi)容。

  • 您可以通過多種方式與screencast進(jìn)行交互：

  • 點(diǎn)擊會翻譯成觸碰，在設(shè)備上觸發(fā)正確的觸摸事件。

  • 計(jì)算機(jī)上的按鍵被發(fā)送到設(shè)備。

  • 要模擬捏合手勢，請Shift在拖動時按住。

  • 要滾動，請使用觸控板或鼠標(biāo)滾輪，或使用鼠標(biāo)指針滑動。

  • 關(guān)于屏幕錄像的一些注意事項(xiàng)：

  • 屏幕錄像僅顯示頁面內(nèi)容。截屏的透明部分表示設(shè)備界面，例如Chrome瀏覽器多功能框，Android狀態(tài)欄或Android鍵盤。

  • 屏幕錄像對幀速率有負(fù)面影響。在測量卷軸或動畫時停用屏幕播放功能，以便更準(zhǔn)確地了解您的網(wǎng)頁的效果。

  • 如果您的Android設(shè)備屏幕鎖定，您的screencast的內(nèi)容消失。解鎖Android設(shè)備屏幕以自動恢復(fù)屏幕錄像。

http://www.cnblogs.com/tig666666/p/6395053.html