移動應用調試之Inspect遠端調試

• 一、準備工作

  • chrome浏覽器，建議最新版本
  • 如果你點選inspect打開的DevTools視窗一片空白，且重新整理無效時，那極有可能是由于被牆的緣故。

• 二、Inspect遠端調試介紹

  • 開發PC頁面的時候使用chrome浏覽器的開發者工具，可以很容易的捕獲到頁面的dom元素，并且可以修改樣式，友善調試，但是手機上卻很麻煩，因為手機上沒有辦法直接打開開發者工具檢視元素。其實可以通過将裝置連接配接到PC，使用PC的開發者工具檢測。

• 三、Android的Inspect遠端調試

  • 1、調試WebView需要滿足安卓系統版本為Android 4.4+已上。并且需要再你的APP内配置相應的代碼，在WebView類中調用靜态方法setWebContentsDebuggingEnabled，如下：

    if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
     WebView.setWebContentsDebuggingEnabled(true);
    }
               

  • 2、把Android裝置設定為開發者模式，把手機USB調試模式打開(“設定”->”開發人員選項”->”USB調試”)

    

  • 3、将裝置通過USB連接配接到PC，在chrome浏覽器位址欄輸入：chrome://inspect/#devices

    

  • 4、在手機上打開網頁的時候，chrome就會檢測到網頁，點選Inspect就可以直接調試

    

• 三、iOS的Inspect遠端調試

  • 1、iOS包應該是debug，release應該不能調試
  • 2、iphone手機 設定 → Safari → 進階 → Web 檢查器 → 開
  • 3、安裝remotedebug-ios-webkit-adapter

    brew update
    brew unlink libimobiledevice ios-webkit-debug-proxy
    brew uninstall --force libimobiledevice ios-webkit-debug-proxy
    brew install --HEAD libimobiledevice
    brew install --HEAD ios-webkit-debug-proxy
               

  • 4、安裝最新版本的擴充卡
  • 5、啟動RemoteDebug iOS WebKit Adapter
  • 6、在chrome位址欄輸入：chrome://inspect/#devices

    

  • 7、在Discover network targets裡面增加localhost:9000，就可以在chrome裡面調試手機頁面了