关于前端: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 来定位问题。