Chrome开发工具实用调试小技巧

对于前端开发来说，谷歌浏览器是目前大家在开发中接触最多的浏览器了，下面我总结出了几个自己经常用的Chrome浏览器开发工具中调试的小技巧：

1.断网调试接口

在和后端接口联调或线上定位问题时如果不想让请求发出去执行功能，又想检查请求参数是否正确，可以选择network上方的网络选项下拉Offline（离线）：

想测试弱网环境时还可以在这里选择快慢3G模式或自定义限流。

2.获取接口参数

如需要完整的入参对象结构直接复制请求是不行的，点击view source就可以复制得到可用入参的字符串对象：

当想对任意一个入参进行在Console直接操作一下可以右键入参选择Store object as global variable

看到在控制台就多了一个temp1的全局变量

3.控制台打印

console.log(a,b,c)可以很方便的同时输出多个变量,对比的时候比较有用：

还有其他log花里胡哨样式等骚操作就不在这里说了，你们自己去探索

4.清除网站缓存

在调试无缓存情况时，除了清除浏览器历史记录还可以在应用一栏选择存储-清除网站数据一键清除掉当前网站的所有缓存数据：

如果你觉得还不行，可以试试右键刷新图标点击清空缓存并硬性重新加载或Ctrl+F5：

5.DOM元素样式、事件追踪

元素面板不仅可以实时的在上面修改样式，且当遇到一些继承的样式污染时点击箭头可以快速追踪到代码的位置。在事件栏也是一样查看到当前元素绑定了哪些事件，对事件进行remove来定位问题。