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

移动应用调试之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里面调试手机页面了