关于前端:5个Chrome调试混合应用的技巧

对前端开发人员来说，Chrome 真是一个必备的开发工具，大到页面展现，小到 BUG 调试 /HTTP 抓包等，本文我将和大家分享本人做混合利用开发过程中常常用到的几个调试技巧。

一、调试安卓利用

在进行混合利用开发过程中，常常须要在安卓利用中调试 H5 我的项目的代码，这里咱们就须要理解安卓利用如何在 Chrome 上进行调试。
接下来简略介绍一下，心愿大家还是能理论进行调试看看：

1. 筹备工作

须要筹备有一下几个事项：

1. 安卓包必须为可调试包，如果不能够调试，能够找原生的共事提供；
2. 安卓手机通过数据线连贯电脑，而后开启“开发者模式”，并启用“USB 调试”选项。

2. Chrome 启动调试页面

在 Chrome 浏览器拜访“chrome://inspect/#devices”，而后在 WebView 列表中抉择你要调试的页面，点击“Inspect”选项，跟调试 PC 网页一样，应用 Chrome 控制台进行调试。

而后就能够失常进行调试了，操作和平时 Chrome 下面调试页面是一样的。

3. 留神

如果拜访“chrome://inspect/#devices”页面会始终提醒 404，能够在翻墙状况下，先在 Chrome 拜访 [https://chrome-devtools-frontend.appspot.com](https://chrome-devtools-frontend.appspot.com)，而后从新拜访“chrome://inspect/#devices”即可。

二、筛选特定条件的申请

在 Network 面板中，咱们能够在 Filter 输入框中，通过各种筛选条件，来查看满足条件的申请。

1. 应用场景：

如只须要查看失败或者合乎指定 URL 的申请。

1. 应用形式：

在 Network 面板在 Filter 输入框中，输出各种筛选条件，反对的筛选条件包含：文本、正则表达式、过滤器和资源类型。
这里次要介绍“过滤器”，包含：

这里输出“-”目标是为了让大家能看到 Chrome 提供哪些高级选项，在应用的时候是不须要输出“-”。
如果输出“-.js -.css”则能够过滤掉“.js”和“.css”类型的文件。
对于过滤器更多用法，能够浏览《Chrome DevTools: How to Filter Network Requests》

三、疾速断点报错信息

在 Sources 面板中，咱们能够开启异样主动断点的开关，当咱们代码抛出异样，会主动在抛出异样的中央断点，能帮忙咱们疾速定位到错误信息，并提供残缺的错误信息的办法调用栈。

1. 应用场景：

须要调试抛出异样的状况。

1. 应用形式：

在 Sources 面板中，开启异样主动断点的开关。

四、断点时批改代码

在 Sources 面板中，咱们能够在须要断点的行数右击，抉择“Add conditional breakpoint”，而后在输入框中输出表达式（如赋值操作等），前面代码将应用该后果。

1. 应用场景：

须要在调试时，不便手动批改数据来实现后续调试的时候。

1. 应用形式：

在 Sources 面板中，在须要断点的行数右击，抉择“Add conditional breakpoint”。

五、自定义断点（事件、申请等）

当咱们须要进行自定义断点的时候，比方须要拦挡 DOM 事件、网络申请等，就能够在 Source 面板，通过 XHR/fetch Breakpoints 和 Event Listener Breakpoints 来启用对应断点。

1. 应用场景：

须要在调试时，须要减少自定义断点时（如须要拦挡 DOM 事件、网络申请等）。

1. 应用形式：

在 Sources 面板中，通过 XHR/fetch Breakpoints 和 Event Listener Breakpoints 来启用对应断点。

六、学习材料

1. Chrome tips community
2. Chrome 开发者工具中文文档