移动应用调试之Inspect远程调试

待我称王封你为后i 2022-06-07 09:57 671阅读 0赞

### 移动应用调试之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调试”)  
        ![WX20171017-202712_2x.png][]
     *  3、将设备通过USB连接到PC，在chrome浏览器地址栏输入：chrome://inspect/\#devices  
        ![WX20171017-203106_2x.png][]
     *  4、在手机上打开网页的时候，chrome就会检测到网页，点击Inspect就可以直接调试  
        ![WX20171017-203139_2x.png][]
 *  #### 三、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、安装最新版本的适配器
        
            npm install remotedebug-ios-webkit-adapter -g
     *  5、启动RemoteDebug iOS WebKit Adapter
        
            remotedebug_ios_webkit_adapter --port=9000
     *  6、在chrome地址栏输入：chrome://inspect/\#devices  
        ![WX20171017-204533_2x.png][]
     *  7、在Discover network targets里面增加localhost:9000，就可以在chrome里面调试手机页面了  
        ![WX20171017-204550_2x.png][]

[WX20171017-202712_2x.png]: http://yanmin99.com/images/WX20171017-202712@2x.png
[WX20171017-203106_2x.png]: http://yanmin99.com/images/WX20171017-203106@2x.png
[WX20171017-203139_2x.png]: http://yanmin99.com/images/WX20171017-203139@2x.png
[WX20171017-204533_2x.png]: http://yanmin99.com/images/WX20171017-204533@2x.png
[WX20171017-204550_2x.png]: http://yanmin99.com/images/WX20171017-204550@2x.png