1. 程式人生 > >Chrome瀏覽器除錯移動端網頁,測試人員也可以輕鬆debug

Chrome瀏覽器除錯移動端網頁,測試人員也可以輕鬆debug

現在的產品,移動端應用佔據很大市場,在測試過程中,就會測試各種各樣的移動端頁面。測試過程,或多或少會發現些問題,無非就是前端、後端問題。後端介面問題,可以利用工具:Fiddler或charles抓包檢視;前端頁面問題,可以讓開發把除錯工具放在頁面中,可如果沒有該除錯工具,那該如何檢視前端報錯問題呢?比如,頁面白屏,抓包沒調介面,如何拿到報錯資訊呢。 講到這裡,就需要“請”出今天的主角了,Chrome網頁除錯工具。該除錯工具,只需要將手機與電腦連線就可以除錯了,但其中有個問題就是FQ了,這個後面再說,我們先來看如何完成頁面除錯。 # 頁面除錯 ## 準備工作 - 資料線 - 手機裝置 - 電腦,安裝了Chrome瀏覽器 ## 開啟USB除錯 這個大家都很熟悉吧,資料線與電腦連線,並允許USB除錯,具體自己操作吧。需要注意的是,手機不是預設有開發者選項的,需要手動開啟,開啟後就會一直有。開啟方式不同手機不同,但都差不多,連續點選(5次)關於手機裡的軟體版本號就ok了。 ## chrome除錯工具 - 連線好裝置 - 開啟要除錯的app或網頁 - PC端網頁(Chrome瀏覽器)中輸入地址:chrome://inspect/#devices 等待小一會,會出現如下截圖頁面,點選inspect就可以開始除錯了。 ![](https://img2020.cnblogs.com/blog/1242227/202010/1242227-20201015130536972-1477404822.png) 我們可以從上圖所知,頁面會顯示手機裝置資訊,沒錯,就是當前連線的手機裝置。 除錯會單獨新開視窗,會顯示手機中開啟的頁面,如下截圖所示: ![](https://img2020.cnblogs.com/blog/1242227/202010/1242227-20201015131720020-338103933.png) ## 無情404 可能大家看到這裡,會覺得,原來除錯這麼簡單。其實不然,這只是順利成功的簡潔步驟而已。在沒FQ的情況下,點選inspect按鈕,彈出的頁面是無情的404。為啥是404,因為chrome除錯是外網了,所以訪問不通。 這裡看其他帖子,可以不FQ解決,但我嘗試了幾次,都沒成功,步驟如下: - 尋找ip地址:http://ping.chinaz.com - 搜尋:chrometophone.appspot.com 搜尋後會展示能ping通該地址的ip,如下所示: ![](https://img2020.cnblogs.com/blog/1242227/202010/1242227-20201015195904693-193501442.png) 將能ping通的ip地址配置到host檔案中,如下所示: > 172.217.26.148 chrome-devtools-frontend.appspot.com 再次訪問https://chrome-devtools-frontend.appspot.com/,能成功的話,就不要再單獨FQ了,如果不行,但又想使用該方法除錯,那就只能FQ了。 # 問題總結 Pending authentication:please accept debugging session on the device 解決辦法:在除錯過程中會出現該提示,是因為裝置沒連線好,重新允許下USB除錯即可。 以上就是今天的分享內容,測試過程,遇到前端報錯,不好確定問題的情況下,就可以使用該方法除錯,不失為一種測試