关键词：
dom
添加选中dom节点为全局变量方便需要调试多个dom的场景
适用对dom有多次操作的场景
force node state (触发)状态
调试dom的某个状态
copy element
拷贝选中dom的信息
style/class
给选中元素添加一个 class 名
快速给元素添加class
修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
network
block specific request
block特定的请求
快捷键：command + shift + p -> show request blocking
改变请求的 user agent
修改请求的user agent
快捷键：command + shift + p -> network conditions 切换 user agent
javascript
断点，断浏览器的行为(比如 click、mouse 等等)
拦截浏览器的行为
快速改变拦截的变量的值
双击改变拦截变量的值
添加 watch 表达式
添加watch表达式
条件断点
设置断点的条件
快速调试代码片段
Snippet(片段)代码调试，不需要创建特定的页面
参考文档
https://developer.chrome.com/docs/devtools/
推荐阅读
关注下方「前端开发博客」，回复 “加群”
加入我们一起学习，天天进步
如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~
gdb调试技巧找到php执行进程当前执行的代码(代码片段)
假设线上有一段php脚本，突然在某天出问题了，不处理但是进程没有退出。这种情况可能是异常休眠或者是有段死循环代码，但是我们怎么定位呢，我们这个时候最想知道的应该是这个脚本在此刻在做什么吧。这个是gdb+zbacktrace... 查看详情
实用调试技巧(代码片段)
....如何写出好（易于调试）的代码示范注意七.编程常见错误调试是什么？有多重要？ 所有发生的事情都一定有迹可循，如果问心无愧，就不需要掩盖 查看详情
你可能不知道的14个javascript调试技巧(代码片段)
...务的过程中发挥重大作用。尽管传言JavaScript难以调试，但是如果你掌握了一些调试技巧，那么你将会花费更少的时间来解决这些错误。我们已经列出了14个您可能不知道的调试技巧，但可能要记住，这样下次你需要调试JavaScript... 查看详情
20个chromedevtools调试技巧(代码片段)
...复bug。在谷歌的开发者工具中，有非常多有用的小工具，但是很多开发 查看详情
chrome调试技巧(代码片段)
console基本输出想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法：console.log("打印字符串");//在控制台打印自定义字符串console.error("我是个错误");//在控制台打印自定义错误信息console.info("我是个信息");//在... 查看详情
window系统里chrome浏览器一些实用的调试技巧(代码片段)
说明某一天，我突然发现chrome浏览器竟是熟悉的陌生人，感觉好多操作都不知道，于是，我看了一些大佬写的笔记，自己把不会的一些整理了一下，记录起来，忘记的时候偶尔来看一看。1、开发者工具... 查看详情
window系统里chrome浏览器一些实用的调试技巧(代码片段)
说明某一天，我突然发现chrome浏览器竟是熟悉的陌生人，感觉好多操作都不知道，于是，我看了一些大佬写的笔记，自己把不会的一些整理了一下，记录起来，忘记的时候偶尔来看一看。1、开发者工具... 查看详情
chrome调试技巧(代码片段)
Chrome调试技巧1、alert这个不用多说了，不言自明。 2、console基本输出想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法：1.console.log("打印字符串");//在控制台打印自定义字符串2.console.error("我是个错误");... 查看详情
npm一些有用的提示和技巧(代码片段)
...on我们通常执行 npminit，然后开始添加npm请求的信息。但是，如果我们不关心所有这些信息，并且希望保留默认值，那么对于npm请求的每一条数据，我们都按enter键。为了避免这种情况，你可以输入 npminit-y。这样就可以跳... 查看详情
继续分享5个实用的vs调试技巧(代码片段)
...义，带条件的断点。满足条件才中断。条件断点非常非常有用，使用得当，可以极大缩短我们调试问题的时间。比如，有一个大循环，只在第1024次循环的时候有问题，我们如果单步（在vs中可以 查看详情
javascript调试技巧(代码片段)
...e.log()和console.dir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们 查看详情
javascript调试技巧(代码片段)
...e.log()和console.dir()的区别阐述我们调试Javascript一般会用到Chrome和Firefox的控制台作为调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们 查看详情
8个有用的js技巧(代码片段)
...]3.使用展开运算符合并对象和对象数组 对象合并是很常见的事情，我们可以使用新的ES6特性来更好，更简 查看详情
你可能不知道的idea高级调试技巧(代码片段)
...会出来一个界面，在Condition这里填入断点条件即可，这样调试时，就会自动停在i=10的位置 二、回到"上一步" 该技巧最适合特别复杂的方法套方法的场景，好不容易跑起来，一不小心手一抖，断点过去了，想回过头看看刚... 查看详情
text一个有用的技巧(代码片段)
console调试技巧(代码片段)
...印的功能，传入特定的占位符来对参数进行格式化处理，常见的占位符有以下几种：1) %s：字符串占位符2) %d：整数占位符3) %f：浮点数占位符4) %o：对象占位符(注意是字母o，不是数字0)5) %c:CSS样式占位符conststr... 查看详情
前端调试效率低？试试这10个“chrome开发者工具”使用技巧
天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。 1，打开ShadowDOM显示浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代... 查看详情
chrome调试折腾记_js断点调试技巧
JS调试技巧技巧一：格式化压缩代码技巧二：快速跳转到某个断点的位置右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置技巧三... 查看详情