注意：所有文章除特别说明外，转载请注明出处.
Chrome开发者工具功能模块
1.Elements
主要用来查看前端界面的html的Dom结构，和修改css的样式。查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
2.console
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入”console”并执行。
3.Sources
该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
4.Network
网络页面主要用于查看header等与网络连接相关的信息。
大专栏 Chrome 浏览器开发者程序总结">5.技巧总结
1.直接修改页面元素
在elements面板双击进行修改，或者右击edit html进行修改。
2.颜色取色器
在elements面板中的Styles窗口中有一个color小方块(如果没有可以自己加上color:red等)，然后会弹出颜色拾取器，我们可以在上面颜色画板中选择一个颜色，或者选择笔拾取一个颜色。
3.快速查找并定位文件
Ctrl+p
4.编辑源码
1.Console 下面输入框输入，回车直接执行，多行代码在别的编辑器编辑好之后复制进来执行。
2.Sources 下面，点击左上角第二行Sources旁边的“>>”打开Snippets，点击“+ New Snippet”新建一个文件编辑脚本，写完右键“Save”保存，再右键点击这个文件“Run”运行。
注意：如果是要覆盖页面JS程序，如果是函数，则是直接以相同的函数名重写方法即可。如果是要覆盖页面JS代码的按钮事件，则需要重新注册该事件，否则相同的多个事件会全部响应。
5.只分析异步请求资源
Network 下面点击XHR，这样就只会显示XHR异步请求资源，以便于快速分析请求Header和Response。
6.在源码中快速调到指定行
在Sources标签中打开一个文件之后，按Ctrl + G然后输入行号，chrome控制台就会跳转到你输入的行号所在的行。
7.使用多个插入符进行选择
当编辑一个文件的时候，你可以按住Ctrl在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。