移動應用除錯之Inspect遠端除錯

  • 一、準備工作

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

  • 二、Inspect遠端除錯介紹

    • 開發PC頁面的時候使用chrome瀏覽器的開發者工具，可以很容易的捕獲到頁面的dom元素，並且可以修改樣式，方便除錯，但是手機上卻很麻煩，因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到PC，使用PC的開發者工具檢測。

  • 三、Android的Inspect遠端除錯

    • 1、除錯WebView需要滿足安卓系統版本為Android 4.4+已上。並且需要再你的APP內配置相應的程式碼，在WebView類中呼叫靜態方法setWebContentsDebuggingEnabled，如下：

      1
      2
      3
      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

      1
      2
      3
      4
      5
      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、安裝最新版本的介面卡

      1
      npm install remotedebug-ios-webkit-adapter -g

    • 5、啟動RemoteDebug iOS WebKit Adapter

      1
      remotedebug_ios_webkit_adapter --port=9000

    • 6、在chrome位址列輸入：chrome://inspect/#devices

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