Chrome 浏览器 - 调试及插件

下面总结一下一些chrome浏览器常用的调试方法和插件，这些方法能让开发的工作顺利并且高效

相关参考：

1.Chrome开发工具指南：http://wiki.jikexueyuan.com/project/chrome-devtools/

2.Chrome开发者工具中文文档：http://www.css88.com/doc/chrome-devtools/

一、先来认识一下这些按钮

先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看 ：

1.箭头按钮：

用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态

2.设备图标：

点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择

3.Elements 功能标签页：

用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息

4.Console控制台：

用于打印和输出相关的命令信息，例如我们熟知的报错

5.Sources js资源页面：

这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式

调试js代码，肯定是我们常用的功能，找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点
在调试中如果发现需要修改的地方，也是可以立即修改的，修改后保存即可生效，这样就免去了再到代码中去书写，再刷新回看了
有时候进入后，会走很多底层的封装方法，需要很多步骤才能真正进入这个函数块，此时将鼠标放在此函数上，会出现相关提示，会告诉你在该文件的哪一行代码处

6.Network 网络请求标签页：

可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息
打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些
还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据

7.Resources/Application标签页

会列出所有的资源，以及HTML5的Cookies和LocalStore等，你可以对存储的内容编辑和删除

二、chrome插件

1.FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、页面取色。

2.Vue.js devtools：是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。

3.Postman：输入你的请求，选择好请求的method，需要请求参数的挨个填好，send之后，就可以看到返回的数据，这个小工具很利于我们的开发。

4.EditThisCookie：一个cookie管理器。你可以添加，删除，编辑，搜索，锁定和屏蔽cookies。