前端调试工具的使用（踩坑之路）

安卓关于安卓系统下的移动端webView目前分为两种内核：原生浏览器内核、腾讯X5浏览器内核。两种内核，这里就涉及到一个配置，需要安卓原生的webView支持debug调试。如下： WebView.setWebContentsDebuggingEnabled(true); 这样才能够继续我们本文接下来的操作。如果不具备允许调试的能力请参照该文章：blog.csdn.net/zhulin2609/…
IOS 关于IOS系统下的webView呢，全部都是safari内核，这样我们接下来进行对应的操作即可。

inspect inspect是一个内置于chrome的远程调试指令，它支持调试所有移动端基于chrome内核的webview的调试，方便我们在通过抓包的方式无法排查问题的时候，可以用它来链接手机进行调试、查看命令行和网络接口，甚至于打断点。方便我们进行代码的调试，排查问题。（注：只用于调试安卓）
safari开发工具 safari开发工具是一个内置在PC端的safari浏览器中，开发工具模块，功能与inspect一致，区别是inspect提供了一个webview可视窗口。（注：只用于调试ios）

Chrome://inspect
1. adb安装通过brew来安装一下adb命令： brew install adb
2. 打开inspect 打开谷歌浏览器输入以下地址：chrome://inspect/#devices 进入到devices页面
3. 链接设备通过数据线链接要调试的安卓设备通过开发者模式打开设备的USB调试并允许PC调试该设备
4. 打开对应的webView 打开以后即可在chrome://inspect/#devices页面看到当前的webview页面地址，点击inspect，打开页面的调试窗口即可开始调试。 注：chrome的inspect为谷歌的开发者工具，需要翻墙才能访问，需要访问https://chrome-devtools-frontend.appspot.com进行对应调试资源的下载，所以要确保当前网络环境可以访问该地址才可以正常调试。
Safari的开发工具
1. 打开safari浏览器开发者模式正常再PC的safari的菜单栏里有开发选项，如果没有请参考以下链接进行设置: jingyan.baidu.com/article/6da…
2. 链接ios设备通过数据线链接要调试的ios设备
3. 配置ios设备连接设备后，打开系统设置->safari浏览器->高级->网页检查器->打开->PC浏览器点击开发->找到调试设备->点击用于开发->调试设备上点击信任
4. 开始调试打开设备对应web页面，在PC浏览器中找到对应页面，然后点击进行对应调试

如何使用inspect或safari开发工具调试微信内部页面
1. 授权，打开地址debugmm.qq.com/?forcex5=tr…
2. 微信中打开debugx5.qq.com
3. 点击信息，即可查看对应需要授权的功能
如何打开小程序的vconsole功能同上的2.3步骤，点击信息后勾选对应打开的权限即可
如何查看当前x5内核版本及相关更新访问地址debugtbs.qq.com

作为一名前端工程师，这些调试工具的具体使用就不过多赘述了，希望大家慢慢探索，当然功能基本和chrome的检查是一样。