不常见但是有用的 Chrome 调试技巧
前端Q
共 1040字,需浏览 3分钟
· 2021-07-11
点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
来源:前端大全
dom
添加选中dom
节点为全局变量方便需要调试多个dom
的场景
适用对dom有多次操作的场景
![](https://filescdn.proginn.com/673e2644c2b1480eb0b442da0586617d/83a71521e7cd7235a0829005f755eacf.webp)
force node state (触发)状态
调试dom的某个状态
![](https://filescdn.proginn.com/2a2adafa8a6d4c210abd4027e2ae2fc9/476df5fc2b901fa961966fbed9c18275.webp)
copy element
拷贝选中dom的信息
![](https://filescdn.proginn.com/fd74ee861ed79fa83f919f6b6d7b52ff/6b1a25775c4ce58c9ef82068fe0468ae.webp)
style/class
给选中元素添加一个 class 名
快速给元素添加class
![](https://filescdn.proginn.com/7ab6caa0dc32989d8e5c694f6800fd9c/5236c7e793e4a095f8d0fd57fec8b50a.webp)
修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
![](https://filescdn.proginn.com/31fa5e3b506bead506c4219e5f273292/a34b44f39e55ce9790b6d9e43a6dd0b1.webp)
network
block specific request
block特定的请求
快捷键:command + shift + p -> show request blocking
![](https://filescdn.proginn.com/d68b107f2b9ea1b56248f10000bf2e4a/ea83c4f7bfb6e8106e190a63277739bc.webp)
改变请求的 user agent
修改请求的user agent
快捷键:command + shift + p -> network conditions 切换 user agent
![](https://filescdn.proginn.com/6818855c9da403e588d6c06226f95b52/d628b0f65c9e8d55d398237d18ba5b80.webp)
javascript
断点,断浏览器的行为(比如 click、mouse 等等)
拦截浏览器的行为
![](https://filescdn.proginn.com/2e1e637f0feea88a8cd562eb2dfca98d/a40dc50d19cac62a2f857dc188ce9a89.webp)
快速改变拦截的变量的值
双击改变拦截变量的值
![](https://filescdn.proginn.com/4adbb9e6fb30f5ba859747482c57fb3e/7c318adb18e88402e989d8ad5206d42e.webp)
添加 watch 表达式
添加watch表达式
![](https://filescdn.proginn.com/2d31b462c6942d8086d7d90f82f89956/55794357441fc473354a95e95ab13f5e.webp)
条件断点
设置断点的条件
![](https://filescdn.proginn.com/7bda94fb787275ceb91199c9de45d77c/23a288ccc7f80da8c68de5b107716ebc.webp)
快速调试代码片段
Snippet(片段)代码调试,不需要创建特定的页面
![](https://filescdn.proginn.com/895b618f0c29bf9d3f13c98ab20c47d8/744970616aa8c51b4db58e847cce4d9c.webp)
参考文档
https://developer.chrome.com/docs/devtools/
内推社群
我组建了一个氛围特别好的腾讯内推社群,如果你对加入腾讯感兴趣的话(后续有计划也可以),我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。
评论