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就是很好的选择，可以直接在调试工具内编写运行，而且不会随着浏览器刷新而被销毁，除非是你手动把它删除。