谷歌开发者工具使用

谷歌开发者工具分为 8 个大模块，每个模块及其主要功能为：

• Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
• Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。
• Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
• Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
• TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。
• Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
• Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
• Audits 标签页：用于优化前端页面，加速网页加载速度等。

常用的几个标签页如下：

1、Element 标签页

在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。在工具窗口右侧，显示的是被选元素的样式信息，可以通过双击现有属性来修改该元素的style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。还有通过点击左上角的箭头可以定位页面上的元素

2、Console 标签页

查看错误信息、打印调试信息（console.log（））、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入“console”并执行：

 

3、resource标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

 

4、NetWork标签页

可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

 

5、Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看)，这个Timeline指的JS执行时间、页面元素渲染时间