对于开发者来说chrome和火狐可以集成一些开发的小插件,并且里面的一些功能对开发调试很有用,所以受到开发者所喜爱,现在介绍一部分功能如下:
1.按F12调出:

2.chrome开发工具中,开发调试中运用最多的四个页面:元素(Elements),控制台(Console),源代码(Sources),网络(Network)等:
- 元素(Elements):用于查看或修改Html元素,css样式,监听事件,断点等;
- 控制台(Console):可执行js代码,查看js对象,查看调试日志及异常信息;
- 源代码(Source):可查看html,css,js源代码,重要的是可进行js断点调试;
- 网络(Network):可查看Head等与网络请求相关的信息。重点讲解下Network。

3.网络(Network)详细介绍如下:

- 记录按钮:处于打开状态时记录记录网络连接的信息记录;
- 清除按钮:清除当前的网络连接信息记录;
- 捕获截屏:记录页面加载时一些时间点的页面渲染情况;

- 过滤器:能够自定义查询条件,找到想要的资源;

- 显示详细信息:


- Preserve log:是否保留日志,如果勾选后,再次加载此页面,原来的请求信息会保留下来,不会被清除;
- Disable cache:是否进行缓存,打开开发者工具的情况下,刷新页面后会,页面资源不会记入缓存;
- Offline:设置模拟限速,设置限速各种网络环境下不同用户的访问本页面的情况;
4.Network请求信息具体说明:

分四个标签:
- Headers:此列出资源的请示url,Http方法,响应状态码,请求头和响应头以及请求参数等;
- Previes:用于资源的预览,可查看请求返回的结果数据;

- Response:展示还未进行格式处理的结果数据;

- Timing:资源请求的花费时间;
对请求右键里面功能说明:

- Copy link address:复制请求url到剪切板
- Copy response:复制http响应信息到剪切板;
- Copy request headers:复制http请求头信息到剪切板;
- Copy response headers:复制http响应头信息到剪切板;
- Copy as cURL:复制url请求作为一个curl命令到剪切板;
- Copy all as HAR:将网络请求信息以HAR格式复制到剪切板;
- Open in new tab:在新tab打开资源连接;
- Clear Browser Cache:清理游览器缓存与功能Disable cache类似;
- Clear Browser Cookies:清除游览器cookies信息;