Chrome浏览器客户端调试

工欲善其事，必先利其器

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

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

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

 

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

 

可选择的适配

 

3.Elements 功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改

 

• 对应的样式

 

• 盒模型信息

同时，当我们浏览网站看到某些特别炫酷的效果和难做的样式时候，打开这个功能，我们即可看到别人是如何实现的，学会它这知识就是你的了，仔细钻研也会有意想不到的收获

 

4.Console控制台：用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个：

a: 一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便，即可用这个指令开查看，obj的json string 格式的key/value，我们对于数据里面有哪些字段和属性即可一目了然

 

其他功能

b: 除了console.log还有其他相关的指令可用

 

console也有相关的API

5.Sources js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，在我还没有走出校园时候，我经常看一些大站的js代码，那时候其实基本都看不懂，但是最起码可以看看人家的代码风格，人家的命名方式，所有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式

Sources Panel 的左侧分别是 Sources 和 Content scripts和Snippets

• 对应的源代码

 

• 格式化后的代码

关于打断点调试的内容，下面介绍，先来说一些，其他平时基本没人用但是很有用的小点，比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码，所以推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息（新建了一个名叫：app.js的片段代码，在你的项目环境页面内，该片段可执行项目内的方法）

 

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

• 所有的资源

以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息

• 请求的相关信息

打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据

• 预览请求的数据

7.Timeline标签页可以显示JS执行时间、页面元素渲染时间，不做过多介绍

 

8.Profiles标签页可以查看CPU执行时间与内存占用，不做过多介绍

 

9.Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除 不做过多介绍

 

10.Security标签页 可以告诉你这个网站的安全性，查看有效的证书等

 

11.Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告

• 分析结果

 

二.Post man你值得拥有的网络请求神器

在我们的开发过程中，后端的接口都是由发起AJAX请求而获取到的相关数据，但是很多情况是我们的业务还没有做到那块时，后端的同学接口都已经准备好了，但是为了便于后期的工作，将接口请求的数据模拟访问，然后对接口联调很重要，也很方便，因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看，这时候可以安装一个post man网络请求插件，在谷歌应用商店下载，需要翻墙

该扩展程序使用非常简单，功能同时也非常强大，输入你的请求，选择好请求的method，需要请求参数的挨个填好，send之后，就可以看到返回的数据，这个小工具很利于我们的开发