Mac/Windows 瀏覽器開發者工具遠程除錯 iPhone/Android 頁面
在移動端 Web 開發中，有時候只通過模擬器進行除錯是不夠的，需要在真機環境下進行除錯才能發現并解決一些問題，而移動端真機環境瀏覽器沒有開發者工具，在這種情況下，使用 PC 端瀏覽器開發者工具對移動端真機環境的 Web 頁面進行遠程除錯就顯得尤為重要，
以下是一些可能需要使用 PC 端瀏覽器開發者工具對移動端真機環境的 Web 頁面進行遠程除錯的場景：
-
問題只出現在某些特定型號或版本的移動設備上，需要在真機上進行除錯才能找出原因，
-
需要對移動端頁面的性能進行測驗和調優，以確保其在移動設備上的流暢性和回應速度，
-
需要在移動設備上測驗一些移動特有的功能，如觸摸、手勢等，以更加準確地模擬真實用戶的體驗，
-
需要在真機上查看頁面的實際呈現效果和布局，確保它們與預期相符，
總之，使用 PC 端瀏覽器開發者工具對移動端真機環境的 Web 頁面進行遠程除錯可以提高除錯效率和質量，從而確保移動端 Web 應用程式的穩定性和用戶體驗，
一、Mac Safari 瀏覽器開發者工具遠程除錯 iPhone 頁面
要在 Mac 上使用 Safari 瀏覽器的開發者工具遠程除錯 iPhone 頁面，請按照以下步驟進行操作：
-
在 Mac 上啟動 Safari 瀏覽器，并選擇“Safari”選單中的“偏好設定”，在“高級”選項卡中，啟用 在選單欄中顯示“開發”選單，
-
確保 iPhone 和 Mac 連接到同一個 Wi-Fi 網路（或將 iPhone 通過資料線連接到 Mac 上），并在 iPhone 上打開 Safari 瀏覽器，并訪問目標站點，
需要注意的是，要通過 Wi-Fi 網路進行連接的前提是：需先通過資料線進行連接，將選項“通過網路連接”勾選上，然后可以通過同一個 Wi-Fi 網路進行連接，
-
在 Safari 選單中，選擇“開發”?“iPhone 名稱”?“網頁名稱”，如果 iPhone 沒有出現在選單中，請確保在 iPhone 上啟用了 Safari 的“Web 檢查器”（設定 ? Safari 瀏覽器 ? 高級 ? Web（或網頁）檢查器），
啟用 Web 檢查器
-
打開“Web 檢查器”視窗后，可以使用其中的各種工具進行除錯，例如，在“元素”選項卡中，可以查看和編輯網頁的 HTML 和 CSS 代碼，以及在“控制臺”選項卡中查看 JavaScript 錯誤和除錯資訊，
請注意，為了使遠程除錯正常作業，建議 iPhone 上的 Safari 瀏覽器是最新的版本，并且 Mac 上的 Safari 瀏覽器也是最新版本，此外，如果遇到連接問題，可以嘗試在 iPhone 上打開“設定”>“Safari 瀏覽器”>“高級”>“Web 檢查器”，并確保“Web 檢查器”選項已啟用，如果仍然無法連接，請嘗試重新啟動 Safari 瀏覽器或 iPhone，或者使用資料線連接 iPhone 和 Mac，
二、Windows Chrome 瀏覽器開發者工具遠程除錯 Android 頁面
要在 Windows 上使用 Chrome 瀏覽器的開發者工具遠程除錯 Android 頁面，請按照以下步驟進行操作：
-
在 Windows 上啟動 Chrome 瀏覽器，并在地址欄中輸入“chrome://inspect/#devices”，
-
通過資料線將 Android 設備連接到 Windows 設備，
-
啟用 Android 設備開發者模式：選擇設定 ? 關于手機 ? 版本號，通過連續輕觸版本號七次（不同設備可能有不同的操作方式），以啟用 Android 設備的開發者模式，
-
啟用 Android 設備 USB 除錯：在 Android 設備上，選擇 設定 ? 開發人員選項（不同設備可能有不同的操作路徑），然后啟用 USB 除錯，
由圖可知，連接的 Android 設備以展示在串列中，
如果遇到連接問題，請確保 Android 設備已啟用 USB 除錯功能，以便電腦可以識別設備，還可以嘗試斷開并重新連接設備，并確保電腦上已安裝了正確的 USB 驅動程式，
-
在 Android 設備打開 Chrome 瀏覽器，
如圖，Android 設備端打開的 Chrome 瀏覽器展示在下方的串列中，并顯示了 Chrome 的版本號和標簽頁等資訊，
-
在 Android 設備打開的 Chrome 瀏覽器中訪問目標站點，
-
單擊“inspect”按鈕，這將打開 Chrome 開發者工具視窗，可以在其中進行除錯，例如，在“元素”選項卡中，可以查看和編輯網頁的 HTML 和 CSS 代碼，而在“控制臺”選項卡中，可以查看 JavaScript 錯誤和除錯資訊，
在這個視圖中，Android 設備顯示的內容被鏡像投射到 Windows 設備上，開發者工具分析的是 Android 設備的當前頁面，而不是 Windows 設備瀏覽器上的活動會話
當 Android 設備已連接，并且開發者工具在 Windows 設備上打開時，請嘗試對移動網路連接的加載時間進行基準測驗，或使用 Performance 面板查看 Android 設備上的頁面性能等，
作者：飛仔FeiZai
出處：https://www.cnblogs.com/yuzhihui/p/17252817.html
宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548068.html
標籤：Html/Css
上一篇：vue全家桶進階之路1：前言