当前位置: 首页 > 科技观察

不常用但很有用的Chrome调试技巧

时间:2023-03-12 07:06:21 科技观察

dom将选中的dom节点添加为全局变量,方便需要调试多个dom的场景适用于对dom进行多次操作的场景将选中的dom节点添加为全局变量.pngforce节点状态(触发)statedebug某状态dom强制节点状态(触发)state.pngcopyelementcopyselecteddominformationcopyelement.pngstyle/classaddaclassnametotheselectedelementquickaddclasstotheelementaddaclassnametotheelement.pngmodificationQuicklymodifyboxmodelsizeofanelement(margin/padding/width/height,etc.)快速修改一个元素的盒模型大小.pngnetworkblockspecificrequestblock-specificrequestshortcutkey:command+shift+p->showrequestblockingblock指定request.png更改请求的用户代理修改请求的用户代理快捷键:command+shift+p->网络条件切换用户代理更改requesteduseragent.pngjavascript断点,打断浏览器行为(如点击、鼠标等)拦截浏览器行为拦截浏览器行为(如点击、鼠标等).png快速改变拦截的值variable双击改变拦截变量的值双击改变拦截变量的值.png添加观察表达式添加观察表达式添加观察表达式.png条件断点condition设置断点的条件断点.png快速调试代码片段