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

摘自：https://blog.csdn.net/lcyaiym/article/details/78266404

1、準備工做
chrome瀏覽器，建議最新版本
若是你點擊inspect打開的DevTools窗口一片空白，且刷新無效時，那極有多是因爲被牆的緣故。
2、Inspect遠程調試介紹
開發PC頁面的時候使用chrome瀏覽器的開發者工具，能夠很容易的捕獲到頁面的dom元素，而且能夠修改樣式，方便調試，可是手機上卻很麻煩，由於手機上沒有辦法直接打開開發者工具查看元素。其實能夠經過將設備鏈接到PC，使用PC的開發者工具檢測。
3、Android的Inspect遠程調試
一、調試WebView須要知足安卓系統版本爲Android 4.4+已上。而且須要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，以下：

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

二、把Android設備設置爲開發者模式，把手機USB調試模式打開(「設置」->」開發人員選項」->」USB調試」)

 

三、將設備經過USB鏈接到PC，在chrome瀏覽器地址欄輸入：chrome://inspect/#devices

 

 

四、在手機上打開網頁的時候，chrome就會檢測到網頁，點擊Inspect就能夠直接調試

 

 

3、iOS的Inspect遠程調試
一、iOS包應該是debug，release應該不能調試
二、iphone手機 設置 → Safari → 高級 → Web 檢查器 → 開
三、安裝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

四、安裝最新版本的適配器

npm install remotedebug-ios-webkit-adapter -g

五、啓動RemoteDebug iOS WebKit Adapter

remotedebug_ios_webkit_adapter --port=9000

六、在chrome地址欄輸入：chrome://inspect/#devices

 

七、在Discover network targets裏面增長localhost:9000，就能夠在chrome裏面調試手機頁面了