行動裝置上的除錯

在本主題中,您將了解如何在行動裝置上偵錯 JavaScript。在開發測試和調試移動平台上的內容可能是非常具有挑戰性的。

概覽

在本文件中,您將學習如何開始在行動裝置上進行偵錯,並涵蓋下列解決方案:

  • 在 iOS 裝置上進行除錯
  • 在安卓裝置上進行除錯
  • 在行動裝置上使用查爾斯

使用 iOS 進行調試

iOS 除錯的最低需求

  • 在 Mac Mac 上運行的野生動物園版本 6 以上
  • 智慧型手機

使用 Safari 遠端除錯

蘋果的 iOS 6 更新推出了 Safari 遠程調試,它允許您在 iOS 設備上的 Safari 應用程序中調試網頁。若要開始使用,請依照下列步驟操作:

  1. 透過 USB 連接線將 iOS 裝置連接至電腦。
  2. 在您的設備上,打開設定值應用程式。選擇蘋果瀏覽器,向下滾動到頁面底部,然後打開高級菜單。啟用網頁檢查器選項。
    網頁檢查器
    網頁檢查器
  3. 仍在您的設備上,打開蘋果瀏覽器應用程序並瀏覽到任何網頁。
  4. 在Mac上,啟動蘋果瀏覽器, 打開首選項 Safari>首選項),然後導航到高級部分。啟用在菜單欄中顯示“開發”菜單選項。
    顯示開發功能表
    顯示開發功能表
  5. 打開發展菜單。您將會看到列出您的 iOS 裝置。當您將滑鼠移到裝置名稱上時,您會看到您在裝置上瀏覽的網站 URL。
    尋找裝置
    尋找裝置
  6. 選擇URL和一個網頁檢查器窗口將打開,您可以從桌面預覽,檢查和調試移動瀏覽器中的內容。
    在桌面上進行除錯
    在桌面上進行除錯
  7. 在裡面資源資源部分中,您可以預覽和檢查網頁。將鼠標懸停在網頁檢查器將在iOS設備上的瀏覽器中突出顯示相應的元素。
    檢驗元素
    檢驗元素
  8. 您也可以使用調試器安慰部分,通過設置斷點,記錄數據等來進一步調試頁面。

使用 Android 進行調試

安卓調試的最低要求

  • 在 Mac 或視窗上執行
  • 安卓裝置與瀏覽器

注意:本節中的步驟是使用運行 Android 11 的設備編寫的。

在您的裝置上啟用除錯

您必須先在裝置設定中啟用 USB 偵錯,才能開始偵錯裝置上的內容。

  1. 如果您運行的是Android 4.2+,則需要啟用設備的開發人員選項在您打開USB調試之前。在您的設備上,打開設定值應用,然後選擇關於手機菜單。找到您設備的內部編號然後點擊七次
  2. 輸入您的設備密碼。您現在應該看到一條消息,指出 您現在是開發人員! .
  3. 要在 Android 11 中訪問您的 開發者選項 ,請返回 設置 並選擇 系統
  4. 展開 高級,然後點擊 開發人員選項
    開發人員選項
    開發人員選項
  5. 向下滾動到 USB 調試 並打開開關。
    啟用 USB 除錯
    啟用 USB 除錯
  6. 有關詳細信息,請參閱 Android 的 配置設備上開發人員選項 文檔。

遠程調試使用

現在您的裝置上已啟用 USB 偵錯,請依照下列步驟透過 Chrome 啟動遠端偵錯:

  1. 在您的計算機上,啟動並瀏覽到chrome://inspect#devices
  2. 選中 發現 USB 設備複選框。
    探索 USB 裝置
    探索 USB 裝置
  3. 使用 USB 數據線將您的設備連接到您的機器。在您的裝置上,系統會出現一個對話方塊,詢問您是否要允許 USB 偵錯。選擇 允許 讓您的計算機連接到您的設備。
    允許連線到裝置
    允許連線到裝置
  4. 在您的設備上,打開應用程序並瀏覽到網頁。
  5. 還給在你的電腦。在chrome://inspect#devices頁面上,您應該看到已連接的設備。在裝置名稱下方,您可以在裝置上看到 Chrome 中開啟的所有網頁清單。
    連線裝置
    連線裝置
  6. 要開始調試網頁,請選擇檢查頁面網址下方的鏈接。這將打開Chrome的開發者工具
    檢查網頁
    檢查網頁
  7. 在左邊元素標籤,您可以選擇設備圖標以打開DevTool的截屏功能。這可讓您開啟內容在行動裝置上顯示的即時預覽。有關如何使用屏幕廣播與設備進行交互的更多信息,請訪問Google的文件

設置 Charles 代理

查爾斯是一個 Web 代理,可以在您自己的計算機上運行,允許您記錄通過您的 Web 瀏覽器發送和接收的數據。造訪查爾斯網站有關此應用程序的更多信息。

查爾斯的最低要求

  • 查爾斯與視窗,Mac 和 Linux 兼容
  • iOS 及/或安卓裝置

按照以下步驟讓查爾斯在您的電腦上運行。

  1. 下載並在您的計算機上安裝Charles。
  2. 在您的計算機上運行查爾斯。從功能表中選取「 > 代理伺服器設定」。確保已分配端口(例如 8888)。
    代理主機設定
    代理主機設定
  3. 選取「確定」以儲存變更並關閉對話方塊。
  4. 從功能表中選取代理主機 > SSL 代理伺服器設定值。確定已選取 [啟用 SSL 代理 ] 選項。
    SSL 代理伺服器設定
    SSL 代理伺服器設定
  5. 在「位置」區段中,選取「新增」按鈕。在「編輯位置」對話方塊中,導覽至「連接埠」欄位,然後輸入 443 。選取 [確定] 以儲存此變更。
    位置連接埠 443
    位置連接埠 443
  6. 選取「確定」以關閉「編輯位置」對話方塊。
    具有位置的 SSL 設定
    具有位置的 SSL 設定
  7. 選取「定」以結束「 SSL 代理設定」對話方塊。
  8. 導航幫助> SSL代理>在移動設備或遠程瀏覽器上安裝Charles Root證書
    安裝根憑證
    安裝根憑證
  9. 您應該會看到一則訊息,識別您將用來設定裝置的本機伺服器 IP 和連接埠號碼 (8888)。您還應該看到 URL 來下載並安裝證書。將這些檔案複製到電腦以供日後使用。
    憑證訊息
    憑證訊息

在 iOS 設備上使用 Charles

在本節中,您將學習如何設置您的 iOS 設備以在您的計算機上使用 Charles。

  1. 在您的裝置上,確定您已連線到與電腦相同的網路。您可以導航到設置> Wifi並選擇網絡名稱以顯示高級選項。
    裝置網路
    裝置網路
  2. 在底部的HTTP部分中,選擇手冊模式。然後,新增伺服器 IP 和連接埠號碼 (8888) 您從查爾斯在上一個步驟中複製。
    無線網絡詳情
    無線網絡詳情
  3. 在您的設備上,打開瀏覽器並導航至 https://www.charlesproxy.com/getssl 。您將被重定向到設備設置,系統將提示您安裝Charles Proxy自定義根證書個人資料。選擇安裝按鈕可在您的設備上安裝Charles證書。
    安裝查爾斯憑證
    安裝查爾斯憑證
  4. 請依照下列步驟安裝查爾斯憑證。完成後,選擇完成了
    查爾斯設定檔安裝
    查爾斯設定檔安裝
  5. 接下來,您已準備好確保您的裝置信任 Charles 憑證。在您的設備上,導航至常規>關於>證書信任設置。在這裡你應該找到查爾斯代理證書。
    憑證信任設定
    憑證信任設定
  6. 啟用查爾斯憑證。請注意警告訊息。您可能想要在不使用查爾斯進行偵錯時停用此憑證。
    啟用信任憑證
    啟用信任憑證
  7. 現在,你將能夠看到在查爾斯發送和接收的任何數據。
    請參閱查爾斯資料
    請參閱查爾斯資料

在 Android 11 上使用 Charles

在本節中,您將學習如何設置您的 Android 設備以在您的計算機上使用 Charles。

  1. 在您的設備上,轉到 “設置” > 網絡 & 互聯網
  2. 點擊 Wi-Fi 。您將在設備上看到已連接的網絡列表。
  3. 選取您目前連線的無線網路。請記住,此網絡必須與您在計算機上連接的網絡相匹配。
  4. 點擊鉛筆圖標以編輯您的互聯網設置。
  5. 代理 設置為 手動
  6. 粘貼您的 Charles Proxy 主機名的值,您應該在 上面的步驟中將其複製到剪貼板。為了代理端口, 進入8888 .
    代理主機/端口值
    代理主機/端口值
  7. 點擊 保存
  8. 在您的設備上,打開瀏覽器,導航至 https://www.charlesproxy.com/getssl/ 。這應該會自動將 Charles SSL 證書下載到您的設備。
  9. 要使用 Android 11 安裝證書,請按照以下步驟操作:
    1. 打開 設置
    2. 導航到 安全 > 加密 & 證書 > 安裝證書
    3. 選擇 CA 證書
    4. 你會看到一個警告。選擇 仍然安裝
      仍然安裝
      仍然安裝
    5. 選擇 Charles 代理 SSL 證書。
    6. 確認證書安裝。
  10. 在裝置的預設瀏覽器中,瀏覽至網站。您將能夠看到在查爾斯發送和接收的任何數據。請注意,它可能有助於過濾結構列表(在本例中為 brightcove過濾器)。
    請參閱資料傳輸
    請參閱資料傳輸
  11. 要過濾網絡流量,以便您只能看到來自 Android 設備而不是本地計算機的流量:
    1. 在 Charles 頂部菜單中,選擇 Proxy
    2. 取消選中 macOS 代理 (或 Windows 代理)。
  12. 選用性:要從您的設備(運行 Android 11)中清除證書:
    1. 在您的設備上,打開 設置
    2. 導航到 安全 > 加密 & 憑據
    3. 點擊 清除憑據
    4. 點擊 確定 進行確認。

在 Android 7 上使用 Charles

從 Android 7 (SDK v24) 開始,由於此 SDK 版本引入了新的安全功能,因此不再可以直接查看 SSL 網絡。要通過 Charles 查看網絡流量,您需要明確告訴您的 Android 應用程序允許 SSL 攔截。

  1. 在您的應用程序中,打開 AndroidManifest.xml 文件。

    安卓清單文件
  2. 在裡面application部分,添加一個networkSecurityConfig選項。

    網絡安全選項
  3. 在 xml 資源文件夾中,添加一個network_security_config.xml文件如下:

    網絡安全 xml 文件
  4. 就是這樣您現在應該看到所有網絡流量都通過 Charles。

資源

如需詳細資訊,請參閱下列內容: