对于前端开发来说,谷歌浏览器是目前大家在开发中接触最多的浏览器了,上面我总结出了几个本人常常用的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来定位问题。