五、在 Android 平台下如何调试 WebView？
1. 在 Chrome 浏览器上调试
参考文章：《Android调试webview》
1.1 条件：
- 在 Android 设备或模拟器运行 Android4.4 或更高版本，Android 设备上启用 USB调试模式。
- Chrome 30 或更高版本。更强大的 WebView 界面调试功能需要 Chrome31 或更高版本。
- Android 应用程序中的 WebView 配置为可调试模式。
1.2 Android 代码中配置 WebView 为可调试：
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
注意 web 调测不受 app manifest 文件中 debuggable 标记状态的影响，如果希望仅 debuggable 为 true 时才能使用 web 调测，那么运行时检测此标记，如下：
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) { WebView.setWebContentsDebuggingEnabled(true); } }
1.3 手机开启 USB 调试选项，并用 USB 连接电脑：
开启 Android 手机的开发者选项，一般在 系统设置 - Android版本 进行多次点击会触发开启开发者选项，然后进入开发者选项页面，开启USB调试。
为了避免每次调试时看到此警告，勾选“总是允许从这台计算机”，并单击“确定”。
1.4 在 Chrome 中启用设置“USB web debugging”（不会影响WebView）：
在 Chrome 上访问 chrome://inspect/#devices 或 about:inspect 访问已启用调试的 WebView 列表，需要能上谷歌。
然后在 WebView 列表中选择你要调试的页面，点击“ Inspect ”选项，跟调试 PC 网页一样，使用 Chrome 控制台进行调试。
1.5 小技巧：
（1）访问 chrome://inspect/#devices 如果 chrome 没有检测到 Remote Target 中的页面，可能需要安装一下 Chrome 的 ADB 插件，也可以在 Chrome 访问 https://chrome-devtools-frontend.appspot.com；
（2）对于腾讯系的 APP，默认采用 X5内核 ，我们可以在 APP 内部打开 https://debugx5.qq.com/ 来使用它的Vconsole调试工具进行调试。 å
2. 使用 DebugGap 调试
参考文章：《Android下的webview调试》
2.1 Windows 下载 DebugGap 并配置：
在电脑上面下载 Windows 版本的 DebugGap 软件包（下载链接：DebugGap），下载完成后解压下来。
安装完成后，运行 DebugGap ，开始配置：
- 通常情况下，
DebugGap可以自动获取IP，并设置默认的端口，如果没有，你可以手动设置； - 点击“连接”按钮启动各种客户端的侦听器；
2.2 在客户端上配置：
在调试项目中要进行测试的 HTML 界面中引入 debuggap.js。
<script src="debuggap.js" type="text/javascript"></script>
当调试项目的加载时，您的应用程序将会有一个蓝色的地方，点击会出现一个四叶三叶草的东西，点击“配置”，显示配置页面。输入与远程 DebugGap 上的主机和端口相同的主机和端口，例如 192.168.1.4:11111，然后点击“连接”按钮。
1.4电脑端远程 DebugGap 将检测即将到来的客户端，开发人员可以单击每个客户端进行调试。
六、在 iOS 平台下如何调试 WebView？
一般我们通过 Mac 的 Safari浏览器 来调试，但是要注意两点：
- 如果调试的是 APP 中 WebView 的页面，则需要这个 APP 的包支持调试，如果不能调试，需要让 iOS 开发人员重签名 APP（可能需要将我们 iOS 设备的 ID 写入到可信任设备列表中，然后使用 iTunes 安装客户端提供的测试包即可）。
- 如果调试的是 H5 页面，可以直接在手机的 Safari浏览器 打开直接调试。
下面开始说说在 Mac 上如何调试：
1. 开启 Safari 开发菜单
先将 iPhone 连接到 Mac，在 Mac 的 Safari 偏好设置中，开启开发菜单。具体步骤为：Safari -> 偏好设置… -> 高级 -> 勾选在菜单栏显示“开发”菜单。
2. iPhone 开启 Web检查器
具体步骤为：设置 -> Safari -> 高级 -> Web 检查器。
3. 调试 APP 内的 WebView
在 Safari-> 开发中，看到自己的设备以及 WebView 中网页，点击后即可开启对应页面的 Inspector ，可以用来进行断点调试。
七、在内嵌版调试过程中，Fiddler 或 Charles 能起到什么作用？
这两者都是强大的抓包工具，原理是以web代理服务器的形式进行工作的，使用的代理地址是：127.0.0.1，端口默认为8888，我们也可以通过设置进行修改。
代理就是在客户端和服务器之间设置一道关卡，客户端先将请求数据发送出去后，代理服务器会将数据包进行拦截，代理服务器再冒充客户端发送数据到服务器；同理，服务器将响应数据返回，代理服务器也会将数据拦截，再返回给客户端。
Fiddler 或 Charles 的主要作用有：
- 可以代理请求，用来查看页面发送的请求和接收的响应；
- 可以修改请求的响应，用来模拟自己想要的数据；
- 可以模拟网络请求的速度；
- 可以代理服务器的静态资源请求，指向本地文件，省去频繁发布 H5 包，达到快速调试目的；
补充链接：《Fiddler工具使用介绍一》
八、调试企业微信、微信和钉钉版时，可以使用哪些工具？
1. 调试企业微信、微信
- 微信开发者工具，可以用来调试页面基本功能；
- 企业微信接口调试工具，可以用来调试企业微信的接口；
2. 调试钉钉
- 钉钉Android开发版，用来调试Android上的钉钉应用；
3. 通用
- Fiddler 或 Charles，可以拦截接口替换文件，来调试应用；
九、常见的调试技巧有哪些？
1. Chrome 控制台调试
1.1 Source 面板断点调试 JS
从左到右，各个图标表示的功能分别为：
Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。Step over next function call：执行到下一步的函数调用（跳到下一行）。Step into next function call：进入当前函数。Step out of current function：跳出当前执行函数。Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。Pause on exceptions：异常情况自动断点设置。
1.2 Element 面板调试 DOM：
右击元素，选择 break on 选项：
Subtree modifications选项，是指当节点内部子节点变化时断点；
Attributes modifications选项，是指当节点属性发生变化时断点；
node removal选项，是指当节点被移除时断点；
2. console 调试
参考文章：《Console调试常用用法》
2.1 显示信息的命令：
console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输出提示性信息 console.error("error"); // 用于输出错误信息 console.warn("warn"); // 用于输出警示信息 console.clear(); // 清空控制台信息
2.2 计时功能：
console.time() 和 console.timeEnd() ：
console.time("控制台计时器"); for(var i = 0; i < 10000; i++){ for(var j = 0; j < 10000; j++){} } console.timeEnd("控制台计时器")
2.3 信息分组：
console.group() 和 console.groupEnd()：
console.group("第一组信息"); console.log("第一组第一条：我的博客"); console.log("第一组第二条：CSDN"); console.groupEnd(); console.group("第二组信息"); console.log("第二组第一条：程序爱好者QQ群"); console.log("第二组第二条：欢迎你加入"); console.groupEnd();
2.4 将对象以树状结构展现：
console.dir() 可以显示一个对象所有的属性和方法：
var info = { name : "Alan", age : "27", grilFriend : "nothing", getName : function(){ return this.name; } } console.dir(info);
2.5 显示某个节点的内容：
console.dirxml() 用来显示网页的某个节点( node) 所包含的 html/xml 代码：
var node = document.getElementById("info"); node.innerHTML += "<p>追加的元素显示吗</p>"; console.dirxml(node);
2.5 统计代码被执行的次数：
使用 console.count()：
function myFunction(){ console.count("myFunction 被执行的次数"); } myFunction(); //myFunction 被执行的次数: 1 myFunction(); //myFunction 被执行的次数: 2 myFunction(); //myFunction 被执行的次数: 3
2.6 输出表格：
console.table(mytable);
3. 调试各种页面尺寸
虽然把各种各样的手机都摆在桌子上看起来很酷，但却很不现实。但是，浏览器内却提供了你所需要的一切。进入检查面板点击“切换设备模式”按钮。这样，就可以在窗口内调整视窗的大小。
4. debugger 断点
具体的说就是通过在代码中添加" debugger; "语句，当代码执行到该语句的时候就会自动断点。
结语
对于初入混合应用开发的小伙伴，还有经常需要调试混合应用的小伙伴，相信会有帮助😁
大家加油~
