不常见但是有用的chrome调试技巧



dom

添加选中dom节点为全局变量方便需要调试多个dom的场景

适用对dom有多次操作的场景

202112240848241.png

force node state (触发)状态

调试dom的某个状态

202112240848322.png

copy element

拷贝选中dom的信息

202112240849875.png

style/class

给选中元素添加一个 class 名

快速给元素添加class

202112240849987.png

修改元素的盒模型大小

快速修改元素的盒模型大小(margin/padding/width/height等)

202112240850678.png

network

block specific request

block特定的请求

快捷键:command + shift + p -> show request blocking

202112240850399.png

改变请求的 user agent

修改请求的user agent

快捷键:command + shift + p -> network conditions 切换 user agent

202112240851216.png

javascript

断点,断浏览器的行为(比如 click、mouse 等等)

拦截浏览器的行为

fe9a7e72c5ff419399c977568105d849~tplv-k3u1fbpfcp-watermark.image
快速改变拦截的变量的值

双击改变拦截变量的值

202112240854023.png

添加 watch 表达式

添加watch表达式

202112240846714.png

条件断点

设置断点的条件

202112240846983.png

快速调试代码片段

Snippet(片段)代码调试,不需要创建特定的页面

202112240855230.png

参考文档


作者:seventhMa
来源:https://juejin.cn/post/6963600839587921927

0 个评论

要回复文章请先登录注册