浏览器调试技巧

1.

-你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:
这里写图片描述
这里写图片描述
子节点修改
自身属性修改
自身节点被删除

2.

这里写图片描述
Record Network Log: 红色表示此时正在记录资源请求信息;
Clear: 清空所有的资源请求信息;
Filter: 过滤资源请求信息;
Use small resource raws: 每一行显示更少的内容;
Perserve Log: 再次记录请求的信息时不擦出之前的资源信息;
Disable cache: 不允许缓存的话,所有资源均重新加载。

3.

这里写图片描述

很多代码是压缩/混淆过的,点击“{}”可以格式化代码,再点一下就取消格式化
-在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“Evaluate in Console”,就可以看到该表达式的当前的值了。

4.

这里写图片描述
对上面元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图

5.

console.log:普通信息
console.info:提示类信息
console.error:错误信息
console.warn:警示信息

这里写图片描述

相关文章
相关标签/搜索