Chrome Devtools常用调试功能

　　在实习期间，为了能更好的地完成上级派发下来的任务，同时提升自己的代码编写效率，熟练地使用调试工具是会起到很大的作用的。下面就以谷歌浏览器的devtools为例来一起学习一下吧！

1. 打开工具面板

windows：组合键Ctrl + Shift + i 或者直接摁 F12
Mac：cmd + opt + i

2. HTML DOM操作

　　事先申明一下，这里的操作仅仅用于调试，不会改变文件内容，刷新网页之后会自动恢复。

　　选中某一个节点：

　　方法一：右键。菜单前四个就是可以操作HTML的选项；

　　方法二：快捷键。对应右键菜单，如下：

对应项	Add atrribute	Edit attribute	Edit as HTML	Delete element
快捷键	Enter	Enter	F2	Delete
功能	添加属性	修改属性	修改HTML内容	删除节点

　　此外，快捷键 h 还可以切换该节点的visibility属性，Ctrl + Z 撤销修改。

　　若想改变节点顺序，可以直接摁住鼠标左键拖拽，这时候会出现蓝色的水平线，把该节点拖拽到你想要的放置的水平线处松开鼠标左键即可。

3. 查看节点元素绑定的事件

　　调试面板的右边栏上方有一个 Event Listeners按钮，点击，然后把Ancestors一项的复选框勾选取消掉，就能看到当前选中的节点元素上绑定有哪些事件啦。

4. 修改样式

　　同样的，调试面板的右边栏上方有一个 styles按钮，点击，接着点击右上角的 ‘+’ 号，就可以编辑当前选中节点的样式啦。

5. 断点

　　打断点调试代码在平时的代码检查中用的最多，可以快速地找到问题所在。

　　首先切换到source板块，然后Ctrl+p打开指定文件，在指定代码块处打断点（直接在左边点击一下），然后刷新网页，网页变灰，这时就处于断点运行环境了。断点运行时的快捷键如下：

F8: 继续执行
F10: step over, 单步执行, 不进入函数
F11: step into, 单步执行, 进入函数
shift + F11: step out, 跳出函数

6. 控制台console

　　$选择器，使用函数$(selector)或者$$(selector)，selector是你想要选择的元素的标签名，id或class，注意加 "." 或者 "#"；一个$只能选择一个元素，两个$可以选择多个元素。实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装。

　　console.log()是我们最常用的打印方法，我在看了某篇博客才知道，原来他还可以加参数和添样式（请原谅我的无知）：

　　添加变量

var name = "丫头";
console.log("%s,欢迎你！", name); // 丫头，欢迎你！

　　在需要插入变量的地方，放一个“%s”占位，然后把这个变量放在第二个参数位置上，就可以实现变量传参了。当然，其实直接用字符串连接的方式也可以，我主要是想说说他的参数功能。

　添加样式

console.log("%c我是红色的", "color:red")

　　最后打印出来的字就是红色的，这在百度的首页有相同的例子，打开百度网站的控制台，校园招聘那一栏就是这样的显示。

　　console还有其他的方法，我就不多说了，因为我也不怎么熟悉，而且暂时还没用到。

7. Sources

　　我在这里只说一下snippets这一项，当你想要调试某段代码的时候，把它粘贴在console里面实在是太麻烦，又不好改，所以这个snippets就是很好的选择，可以直接在调试工具内编写运行，而且不会随着浏览器刷新而被销毁，除非是你手动把它删除。