chrome 开发者工具
官方文档参考:
https://developers.google.cn/web/tools/chrome-devtools/
概述
- 打开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请求后得到各个请求的资源信息(包括状态、资源类型、大小、所用的时间),可以根据这个进行网络性能优化
- Controls控制Network的外观和功能
- Filters控制Requests Table具体显示哪些内容
- Overview显示获取到资源的时间轴信息
- Requests Table按资源获取的前后顺序显示所有获取到的资源信息,点击资源看到该资源的详细信息
- 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