天天看點

手機浏覽器網址_Android 手機調試H5網頁

網頁在手機浏覽器打開時,怎麼調試?

安卓裝置的 Chrome 浏覽器支援遠端調試,可以使用桌面浏覽器的開發者工具。本文介紹如何進行遠端調試。

手機浏覽器網址_Android 手機調試H5網頁

Step 1:啟用開發者模式

遠端調試需要打開”開發者模式”。如果你的手機已經打開,可以跳過這一步。

開發者模式的打開方法是,進入”設定 > 關于手機”菜單,找到”内部版本号”這一項(或類似名稱的條目),在上面連續按七次。退回上一級菜單,應該就能看到”開發者模式”。

進入其中,打開”USB 調試”選項。

手機浏覽器網址_Android 手機調試H5網頁

Step 2:連接配接手機

使用 USB 線将手機和電腦連接配接起來。手機可能會有彈框,詢問是否允許通路手機資料,選擇”允許”。

手機浏覽器網址_Android 手機調試H5網頁

打開電腦的 Chrome 浏覽器,進入”開發者工具”。點選右上角三個點,進入設定菜單,打開”更多工具 / 遠端裝置”視窗。

手機浏覽器網址_Android 手機調試H5網頁

選中 “Discover USB devices” 選項。

手機浏覽器網址_Android 手機調試H5網頁

這時應該可以看到手機已經連接配接成功了。

手機浏覽器網址_Android 手機調試H5網頁

Step 3:調試網頁

安卓手機裡面,打開 Chrome 浏覽器。這時,桌面電腦的開發者工具應該會同步顯示所有已經打開的 Tab 頁。

并且,開發者工具還有一個輸入框,讓你輸入想要通路的網址。輸入以後,單擊”打開”,就會在手機浏覽器打開這個網址。

手機浏覽器網址_Android 手機調試H5網頁

在開發者工具裡面,所有已經打開的 Tab 頁,選中想要調試的網頁,點選後面的”Inspect”按鈕。

手機浏覽器網址_Android 手機調試H5網頁

這時,就會彈出一個獨立的調試視窗。左側是手機浏覽器的預覽,右側是各種調試工具,供開發者使用。

手機浏覽器網址_Android 手機調試H5網頁

“Inspect”按鈕旁邊的”更多選項”,還提供了重載、關閉等操作。

手機浏覽器網址_Android 手機調試H5網頁