chrome多种调试技巧+部分快捷键

1、快捷键部分

    ctrl + shift +i/j，有些使用F12也能打开

    ctrl + ]或者ctrl + [   标签切换      

    ctrl + shift + c  快速定位某个元素，（也就是下图空色箭头指向的那个小箭头）

    ctrl + click（也就是鼠标左键），可以在rgba, hsl 和 hexadecimal 这三种格式中改变。

点击后

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的一些使用技巧点击打开链接