Chrome浏览器不只能够调试页面、JS、请求、资源、cookie，还能够模拟手机进行调试。自从使用了Chrome，我就离不开它了。
下面整理一下如何使用Chrome进行调试。php
怎样打开Chrome的开发者工具？
直接在页面上点击右键，而后选择审查元素：
前端
或者在Chrome的工具中找到：
或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子：
java
不过我通常习惯与点右上角的那个按钮，将开发者工具弹出做为一个独立的窗口：
node
Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑，你能够直接在某个元素上双击修改元素的属性。
web
- Edit as HTML直接对元素的HTML进行编辑，或者删除某个元素，全部的修改都会即时在页面上获得呈现。
- Copy能够将HTML代码直接复制下来，在拷贝别人网站上面的HTML代码的时候灰常方便，你懂的~~
- Delete node删掉一个HTML Node
- Break on能够对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处
Elements标签页的右侧能够对元素的CSS进行查看与编辑修改：
chrome
- Style看HTML元素的样式
- Computed能够看元素的盒子模型
- Properties看到元素具备的方法与属性，比查API手册要方便得多
Network标签页
Network标签页对于分析网站请求的网络状况、查看某一请求的请求头和响应头还有响应内容颇有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体请求URL，能够看到该请求的详细HTTP请求状况：
咱们能够在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。浏览器
- Headers请求头信息和响应头信息
- Preview预览结果，若是是文件能够查看这个文件；若是是图片能够预览这个图片；若是是从服务器返回来的JSON数据，能够查看格式话后的JSON
- Response从服务器返回的响应结果
- Cookies请求和响应的Cookie
- Timing具体的响应时间
Resources标签页
Resources标签页能够查看到请求的资源状况，包括CSS、JS、图片等的内容。也能够设置各类断点。对存储的内容进行编辑而后保存也会实时的反应到页面上。
性能优化
Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应状况，这个Timeline指的JS执行时间、页面元素渲染时间（每一个信息都怎么看，我没弄懂..）
服务器
Profiles标签页
主要是作性能优化的，包括查看CPU执行时间与内存占用（这个也没弄懂）
Audits标签页
这个对于优化前端页面、加速网页加载速度颇有用哦（至关与Yslow）
点击run按钮，就能够开始分析页面，分析完了就能够看到分析结果了
Console标签页
就是Javascript控制台了：
在这个面板能够查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还能够看成Javascript API查看用。
移动端开发调试
如今新版chrome弹出控制台后以下图，其中的工具对移动端调试很是方便。
在控制台中能够直接模拟手机、调整UA、修改网络链接状态
No Leanote account? Sign up now.