巧用chrome开发者工具
说明：截图中的Chrome版本为52，不同版本可能略有区别。
常用设置
开发时消除静态资源缓存不能立刻更新的困扰，勾选Disable cache即可
切换颜色显示格式
修改默认颜色显示格式，在Settings（控制台按F1）>Preferences>Elements>Color format
选择dom
快速选中dom节点，鼠标选中的dom节点，可以看到chrome将其赋值为$0，因此在控制台直接敲出$0就可以得到，不用去输繁琐的CSS选择器，而且$1 - $4记录了你最近选过的4个dom节点。
chrome默认提供了一些选择dom的函数
- $(selector)等同于document.querySelector(selector)
- $$(selector)等同于document.querySelectorAll(selector)
- $x(path)即xpath搜索，chrome中可以等同document.evaluate(path,document)
打开一个chrome空白页（确保$没有被js使用），测试如下
调试
断点可以编辑，比如在for循环中可以编辑进入断点的条件。
全局搜索（ctrl+shift+F），快速找到代码
美化代码，方便调试
写代码
chrome中有专门写代码的地方（位置在Sources>Snippets），这里写的代码不会丢失，任何页面都可以运行，非常方便。
