APP内H5调试方法

Android

安卓机 +相应app的debugger包+ 一根数据线 +fq+chrome

1、打开手机开发者模式和usb调试功能
2、数据线连接手机和电脑
3、chrome浏览器 调试工具 chrome://inspect/#devices
4、( 需和移动端同学要到debug包)打开手机内的h5就能在chrome调试工具中看到相应的页面啦
5、在chrome中点击你想调试的h5下面的inspect

在chrome调试工具中无法找到相应的H5?

• 检查是否成功访问外网
• 确保下载的app开启了debugger模式
  

ios

需要环境：
osx 系统（mac系统）、safari浏览器、iOS开发本地包（注意是debug包）

调试步骤
数据线链接ios设备和mac电脑，手机打开调试模式，mac电脑safari浏览器开发选项里面可以找到自己的ios设备

• 打开app，找到对应页面打开
• 打开PC safari，点击 开发→ 模拟器 → 选择对应的页面， 如果safari没有开发选项，请在设置中开启开发选项

进行调试

weinre远程真机调试

1. 安装 weinre
   npm -g install weinre

2. 启动 weinre
   weinre --boundHost [hostname | ip address |-all-] --httpPort [port]

   例如 : weinre --boundHost 196.168.16.237 --httpPort 8081）

3. 在浏览器中输入 http:// ip address : port/
   

   看到如上图表示启动成功

4. 确保手机和电脑连接同一局域网

5. （1） 绘本封装调试方法： 手机访问页面的连接后追加参数?debug=http:// ip address : port/ target/target-script-min.js#anonymous
   注意：在app中调试追加的参数需encodeURIComponent，如下
   debug=http%3A%2F%2F192.168.16.237%3A8081%2Ftarget%2Ftarget-script-min.js%23anonymous
   （2） 正常调试方法： 在页面引入一个js 文件 如

补充

电脑上下载安装 HBuilder无须连接外网调试webview？？？这个不太懂，有了解的小伙伴欢迎补充～