Chrome开发者工具(DevTools或Developer Tools)是Google Chrome浏览器中内置的一组网页制作和调试工具。开发者工具为网页开发人员提供了访问浏览器及其网页应用程序内部的深入访问。使用开发者工具有效地跟踪布局问题，设置JavaScript断点，并获得代码优化的见解。现在让我们来看看各个面板。
- 在Chrome菜单中选择 更多工具 > 开发者工具。
- 在页面元素上右键点击，选择 “检查”。
- 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。
- F12 快捷键
1. toggle device toolbar（切换设备工具栏）
主要是PC端和移动端的来回切换，PC端和移动端大部分是一样的，移动端会多一些配置，主要介绍PC端的设备。
2. Elements【元素】
查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
实时编辑DOM节点和CSS样式
- 双击DOM视图里面的节点，编辑DOM样式，可以将效果实时展示在页面上
- 点击右侧Styles面板，可以实时更改CSS属性值，调整页面样式。
- 点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。
3. Console【控制台】（通常和Sources的debug配合使用）
console.log() : 打印出普通信息
console.info : 打印出提示性信息
console.warm()： 打印出警告信息
console.error() : 打印出错误信息
console.debug() ： 打印出调试信息
4. Sources【源代码】
Sources面板主要是用于查看web站点的资源列表及JavaScript代码的debug.
Sources面板主要有如下几个功能
1 > 直接JS调试
可以修改未执行的js，查看已执行的变量值。
2 > Debug断点调试
代码结合
5. Network【网络】
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
1 > stop recording network log 网络日志是否录制
2 > Clear 日志清理
3 > Capture screenshots 捕获屏幕
4 > filter过滤器
5 > Disable cache : Cache开关 禁止浏览器缓存（消息推送首页可以看http缓存）
6 > 网络链接开关
7 > 文件加载状态
- Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
- Status HTTP状态码。
- Type 请求的资源MIME类型。
- Initiator 标记请求是由哪个对象或进程发起的（请求源）。
- Parser： 请求由Chrome的HTML解析器时发起的。
- Redirect：请求是由HTTP页面重定向发起的。
- Script：请求是由Script脚本发起的。
- Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
- Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
- Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
- Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。
![]()
8 > 接口调用和数据加载
- Headers 该资源的HTTP头信息。
- Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
- Response 显示HTTP的Response信息。
- Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
- Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
1) 查看资源HTTP头信息
在headers 里面可以看到http的请求信息和返回信息。
包含Request URL、Request Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。
2) 查看资源预览信息
在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是图片、接口返回的截图。
3 ) 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
4 ) 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。
5) 分析资源在请求的生命周期内各部分时间花费信息
6 . Application【应用】
该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
7. Security【安全】 不多了解
通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
8. Audits不多了解
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
9. Performance【分析浏览器运行时的性能表现】不多了解
10. Memory【表示原生内存，DOM节点存储在原生内存中。】不多了解
名词解释
Status状态
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本