谷歌开发者工具

chrome 开发者工具

官方文档参考：

https://developers.google.cn/web/tools/chrome-devtools/

概述

1. 打开chrome开发者工具

• 在Chrome菜单中选择更多工具>开发者工具
• 在页面元素上右键点击，选择“检察”
• 使用快捷键Cmd+Opt+I（mac）或者 Ctrl+Shift+I(Windows)

1.elements

在Elememts面板中可以通过DOM树的形式的查看所有的页面元素，同时也能对这些页面元素进行所见即所得的编辑

• 点击右侧的 style面板，可以实时修改css的属性值，这里面的所有样式Name和Value都是可以编辑的；在每个属性后面单击可以添加新的样式

2.Console面板（Cmd+Opt+J）

https://www.html.cn/doc/chrome-devtools/console/

记录开发者开发过程中的日志信息，且可以作为与Js进行交互命令行Shell

控制台输出日志

通过js代码或者命令行 console.log()、 console.warn() 和console.error() 可以将日志信息输出到控制台

• console.log() 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
• console.warn() 显示带有黄色小图标的警告信息
• console.error() 显示带有红色小图标的错误信息
• console.assert 当第一个参数为false时，才会显示第一个参数的值
• 可以据JS条件判断输出不同的日志信息

3.Sources面板

断点调试js代码

• 调试JS代码

  点击JS代码块前面的数字来设置断点

4.network面板

官方文档参考：https://developers.google.cn/web/tools/chrome-devtools/network-performance/reference#record

从发起网页页面请求Request后分析http请求后得到各个请求的资源信息（包括状态、资源类型、大小、所用的时间），可以根据这个进行网络性能优化

1. Controls控制Network的外观和功能
2. Filters控制Requests Table具体显示哪些内容
3. Overview显示获取到资源的时间轴信息
4. Requests Table按资源获取的前后顺序显示所有获取到的资源信息，点击资源看到该资源的详细信息
5. Summary显示总的请求数、数据传输量、加载时间信息

其中 Requests Table此显示的如下的信息列

• Name 资源名称，点击名称可以查看资源的详情，包括：Headers、preview、response、cookies、timing
• Status HTTP状态码
• Type请求的资源MIME类型
• Initiatoer 标记请求是由哪个对象和进程发起的
  • Parser:请求又chrome的html解析器发起的
  • Redirect：请求是由HTTP页面重定向发起的。
  • Script：请求是由Script脚本发起的。
  • Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。

• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详尽信息

• headers该资源http头信息
• preview根据所选择的资源类型（JSON、图片、文本）显示相应的预览
• Response显示http的response的信息
• 通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

1⃣ 查看资源http头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。

2⃣ 查看资源预览信息

在Preview标签里面根据选择的资源类型（json、图片、文本、js、css）显示相应的预览

3⃣ 查看资源http的response信息

在Response标签里面可根据选择的资源类型

[外链图片转存失败(img-xHUHy5fG-1567243147353)(https://i.loli.net/2019/03/11/5c865c5fe6968.png)]

4⃣ 查看资源Cookies信息

[外链图片转存失败(img-Yb0qDsFg-1567243147358)(https://i.loli.net/2019/03/11/5c865d1c2787f.png)]

5⃣Timing：分析资源在请求的生命周期内各部分时间花费信息

生命周期按照以下类别显示花费时间

• Queuing
• Stalled
• Dns lookup、initial connnection 、SSL handeshake
• Request sent
• Waiting(TTFB)
• Content Download