大前端混合应用专题篇(3)

1️⃣、在 Android 平台下如何调试 WebView？

Android调试webview

从 Android4.4（KitKat）开始 ，可以使用DevTools对原生Android应用程序的Android WebViews内容进行调试。

• 在Android设备或模拟器运行Android4.4或更高版本，Android设备上启用USB调试模式。

• Chrome 30或更高版本。更强大的WebView界面调试功能需要Chrome31或更高版本。

• Android应用程序中的WebView配置为可调试模式。

1） 在代码中配置WebView为可调试

WebView.setWebContentsDebuggingEnabled(true);

2） 在Chrome中启用设置“USB web debugging”（不会影响WebView）

3）在DevTools调试WebView：

1. 使用USB数据线将移动设备连接到开发机器。将移动设备连接到开发机器时，可能会看到USB调试警报“设备请求权限”。为了避免每次调试时看到此警告，勾选“总是允许从这台计算机”，并单击“确定”。
2. 在开发机器的Chrome上，打开检查chrome:inspect
3. 就能看到应用程序和调试的WebView列表的名称。单击旁边标签中inspect链接，就能在DevTools查看WebView的内容。

2️⃣、在 iOS 平台下如何调试 WebView？

iOS调试Webview

1）在手机设置里，找到Safair浏览器，在高级里启用Web检查器

2）Mac上Safair浏览器，在偏好设置高级选项底部勾选“在菜单栏中显示开发菜单”

3）手机连接电脑，点击Mac上的Safair浏览器，在开发选项下拉菜单中，找到手机名称对应的html页面即可进入调试器（基于应用WebView可以调试）

3️⃣、在内嵌版调试过程中，Fiddler 或 Charles 能起到什么作用？

Fiddler和Charles都是正向代理，在调试的时候，在手机安装对应的证书。

1）将线上文件（html、css、js、请求报文、响应报文…）替换成我们本地资源文件

2）查看请求和请求结果

3）请求断点

4）配置地址映射（host）

5）按规则匹配请求地址

6）模拟弱网络

4️⃣、调试企业微信、微信和钉钉版时，可以使用哪些工具？

微信版：微信开发者工具调试

企业微信： 可使用微信开发者工具 \ TBS studio \ 进行网页调试

• 在微信中打开http://debugx5.qq.com
• 切换“信息”tab，勾选打开TBS内核inspector调试功能
• 连接手机在chorme浏览器打开chrome://inspect/#devices

钉钉版：钉钉开发者版本中启动微应用调试

1）

• 进入“我的”(个人资料页)
• 选择“设置”
• 选择“通用”
• 选择“开发者选项”
• 打开“微应用调试”

2）数据线连接手机

5️⃣、常见的调试技巧有哪些？

1）FIddler抓包，替换（html、js、css、请求报文、响应报文等）

2）alert阻塞js执行，弹出参数信息

3）console

​ log：输出信息

​ warn：输出警告信息

​ time：计时开始

​ timeEnd：计时结束

console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');

dir：查看对象的信息

4）断点调试

​ DOM断点：

​

Subtree modifications 选项，是指当节点内部子节点变化时断点

Attributes modifications 选项，是指当节点属性发生变化时断点；

node removal 选项，是指当节点被移除时断点；

JS条件断点：当i等于50的时候才会断点

5）chrome浏览器，修改网络请求速度，查看请求，响应，禁止缓存，等等功能