chrome自带调试工具介绍

Chrome浏览器不只能够调试页面、JS、请求、资源、cookie，还能够模拟手机进行调试等等，为开发者提供了不少方便，下面就介绍一下我经常使用到的调试技巧。

1.chrome浏览页面经常使用快捷键

Ctrl+N 打开新窗口。
Ctrl+T 打开新标签页。

Ctrl+W关闭当前标签

Ctrl + F4 关闭chrome浏览器

Ctrl+Tab 或 Ctrl+PgDown 切换到下一个标签页。

Ctrl+Shift+Tab 或 Ctrl+PgUp 切换到上一个标签页。

Ctrl+1 到 Ctrl+8 切换到标签栏中指定地位编号所对应的标签页。
Ctrl+9 切换到最后一个标签页。

Ctrl+Shift+T 从头打开前次封闭的标签页。谷歌浏览器可记住比来封闭的 10 个标签页。

F5 刷新页面

Ctrl + F5 强制刷新页面

F12 审查元素

F10设置断点后按此键能够一行一行执行js，在执行的过程当中若遇到了一个js函数就能够按F11键跳到那个函数里面去

Ctrl+Shift+Delete:用于显示“清除浏览数据”界面，以下

 

2.打开chrome开发者工具：按F12或者点击右键而后选择审查元素

 

3.Elements标签页:Elements标签页的左侧就是对页面HTML结构的查看与编辑，你能够直接在某个元素上双击修改元素的属性。

1. Edit as HTML直接对元素的HTML进行编辑，或者删除某个元素，全部的修改都会即时在页面上获得呈现。
2. Copy能够将HTML代码直接复制下来，在拷贝别人网站上面的HTML代码的时候灰常方便，你懂的~~
3. Delete node删掉一个HTML Node
4. Break on能够对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处

Elements标签页的右侧能够对元素的CSS进行查看与编辑修改：

 

1. Style看HTML元素的样式
2. Computed能够看元素的盒子模型
3. Properties看到元素具备的方法与属性，比查API手册要方便得多

 

4.Network标签页:Network标签页对于分析网站请求的网络状况、查看某一请求的请求头和响应头还有响应内容颇有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体请求URL，能够看到该请求的详细HTTP请求状况：

咱们能够在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

1. Headers请求头信息和响应头信息
2. Preview预览结果，若是是文件能够查看这个文件；若是是图片能够预览这个图片；若是是从服务器返回来的JSON数据，能够查看格式话后的JSON
3. Response从服务器返回的响应结果
4. Cookies请求和响应的Cookie
5. Timing具体的响应时间

 

5.Sources标签页:sources标签页能够查看到请求的资源状况，包括CSS、JS、图片等的内容。也能够设置各类断点。对存储的内容进行编辑而后保存也会实时的反应到页面上。

 

 

6.Timeline标签页:注意这个Timeline的标签页不是指网络请求的时间响应状况，这个Timeline指的JS执行时间、页面元素渲染时间（每一个信息都怎么看，我没弄懂..）

 

7.Profiles标签页:主要是作性能优化的，包括查看CPU执行时间与内存占用（这个也没弄懂）

 

8.Audits标签页:这个对于优化前端页面、加速网页加载速度颇有用哦（至关与Yslow）

点击run按钮，就能够开始分析页面，分析完了就能够看到分析结果了

 

9.Console标签页:就是Javascript控制台了

在这个面板能够查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还能够看成Javascript API查看用。

 

10.移动端开发调试:如今新版chrome弹出控制台后以下图，其中的工具对移动端调试很是方便。

在控制台中能够直接模拟手机、调整UA、修改网络链接状态

11.推荐安装的的插件：

json viewer：格式化输出json数据，方便看json数据

二维码生成器：根据当前页面的地址生成二维码

firebug ：这个不说了

Image Downloader for Tumblr：Download images from Tumblr with a single click. 若要一键下载该网页图片，能够试试这个

fireshot： 捕捉网页截图，能够存储为各类格式

有道词典Chrome划词插件 ：方便查看英语单词，呵呵，咋英语很差

YSlow ：分析网页并提供建议去优化网页

参考博客：http://segmentfault.com/a/1190000002439648