chrome多种调试技巧+部分快捷键
1、快捷键部分
ctrl + shift +i/j，有些使用F12也能打开
文章图片
ctrl + ]或者ctrl + [标签切换
ctrl + shift + c快速定位某个元素，（也就是下图空色箭头指向的那个小箭头）
文章图片
ctrl + click（也就是鼠标左键），可以在rgba, hsl 和 hexadecimal 这三种格式中改变。
【chrome多种调试技巧+部分快捷键】
文章图片
点击后
文章图片
shift + 回车，Console里面的多行模式。说明：平时在 console 里面输代码的时候，一点回车就执行了，使用shift + 回车可以使用多行模式，输完一行的时候按 shift + 回车可以从下一行在输入。
ctrl + L 清理控制台
ESC（也就是我们常用的回退键），在sources下打开控制台
文章图片
2、断点篇
1、打断点是前端调试中很重要的地方，我刚开始学的时候都是感觉那里代码有问题，那里输入个console.log()来看有没有输出，这种做法是很蠢的，现在使用断点调试可以很快的定位到错误所在。
断点调试：就是在感觉会出错的那一行前面点一下，变成绿色就代表打了一个断点。
文章图片
下面是断掉调试的一些按键
按键的介绍可以看这篇博客点击打开链接
文章图片
2、还有一个地方也可以打断点，就是Elements元素上，如下图
文章图片
Subtree moditications：当添加，改变，删除元素时触发。
Attribute modifications：元素属性改变时触发。
Node removal： 移除这个dom元素时触发
当页面中js改动了这个标签中的某个元素，或者山车了这个标签元素就会跳转到相应的代码处
这里我们顺便使用一下前面说的ctrl + shift +c 快捷键定位到box元素,
选择subtree modifications，此时div展示的还是111
文章图片
当我们点击提交按钮的时候
文章图片
就是直接定位到修改的这一行js代码中，可以方便我们快速定位某个元素被在哪里修改
文章图片
3、有时打了断点后，执行下一步他会跳转到一些引入的第三方库代码中去，然后在里面绕半天，使得我们无法快速定位错误的地方，如下图
文章图片
点击下一步的时候，就会发现它跳转到jquery的源码中去了，如下图
文章图片
显然，错误不在源码中，这就无法很快的定位到错误的地方了。
好在chrome给提供了一个黑匣子（我一般叫黑名单）的功能，如下图所示
文章图片
这个就可以吧目前所在的文件加入到黑名单中，下次打断点执行下一步的时候，就不会进入里面来。
当让还可以另外设置
文章图片
点击settings 后选择Blackboxing，可以自己加需要忽略的库或文件
文章图片
3、小技巧
1、查看DOM节点最终渲染的样式
我写css 的时候总是不小心给一个标签写了两份样式，下面的会吧上面的层叠掉，当我改样式的时候，经常吧上面的改了，结果发现样式还没变，这里介绍一个小技巧，
文章图片
这里我给.box写了两个样式，明显width: 200px;
这个生效了，这样看好像没什么了，但是当样式多的时候就容易搞混，可以点击红框Computed
文章图片
这里就会展示这个标签最终的样式，可以给我们一些提示。
还有一些其他的，后面慢慢写，可以参考这里看一些chrome的一些使用技巧点击打开链接
推荐阅读
- Mac安装Chromedriver
- 移动端h5调试方法
- www和https://又被Chrome地址栏隐藏了
- 那些年bug总结出来的调试代码技巧
- 汇编实验（格雷码转二进制（ASCII码）的实现和调试）
- redis|redis 链表
- TODO（小程序手机预览调试）
- 【Camera专题】Qcom-高通OTP编程调试指南-上
- Flutter应用如何调试--DevTools介绍(下)
- 2021年5月9日母亲节