浏览器开发者工具的常用技巧

1. 控制台中的shift和enter

要编写跨越控制台多行的命令，请按shift+enter

准备就绪后，在脚本末尾按Enter键即可执行该操作：

2. 跳转

在Sources面板中：

cmd+o(windows下ctrl+o) 显示你页面加载的所有文件

cmd+shift+o(windows下ctrl+shift+o) 显示当前文件中的symbols（属性、函数、类等）

cmd+o(windows下ctrl+o) 跳转到指定行

准备就绪后，在脚本末尾按Enter键即可执行该操作：

3. 监听表达式

不需要一次又一次地输入一个变量名或者表达式，你只需将他们添加到监视列表中就可以时时观察它们的变化：

4. XHR/Fetch调试

从调试器打开 XHR/Fetch Breakpoints 面板。

你可以针对某一个请求或者请求的关键字设置断点：

5. 调试DOM修改

右键单击某个DOM元素，并选择Break on下的subtree modifications。这样调试器就可以在脚本遍历到该元素并且要修改它的时候自动停止，以让用户进行调试检查。

6. 找到CSS属性定义的位置

MAC使用cmd+鼠标左键(windows下使用ctrl+鼠标左键)点击Elements面板中的CSS属性，可以直接帮您定位到Source面板中相应CSS定义的位置：

7. Network网络

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

此面板包括5块:

区域① --> Controls 控制Network的外观和功能。

区域② --> Filters 控制Requests Table具体显示哪些内容。

区域③ --> Overview 显示获取到资源的时间轴信息。

区域④ --> Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。

区域⑤ --> Summary 显示总的请求数、数据传输量、加载时间信息。

区域① Controls信息如下

网络日志录制

日志清理

捕获屏幕

过滤器

视图切换

保留日志开关

Cache开关

网络连接开关

网速阀值

区域④ Requests Table 信息如下

未列出部分，可在区域④的表头部分右击点出

Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。

Method 请求的方法类型

Status HTTP状态码。

Remote Address 远程地址

Type 请求的资源MIME类型。

Initiator 标记请求是由哪个对象或进程发起的（请求源）。

鼠标移入可显示详情

Cookie 当前请求附带的cookie数量

Priority 优先级

Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from disk cache)

Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。

Waterfull 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息

区域⑤ Summary 信息如下

DOMContentLoaded 从 开始到页面上DOM完全加载并解析完毕 所花费的时间（不会等待CSS、图片、子框架加载完成），在 Waterfull 以一条 浅蓝色的线 标注。

Load 从 开始到页面上所有DOM、CSS、JS、图片完全加载完毕 所花费的时间，在 Waterfull 以一条 浅红色的线 标注。

requests 成功的请求数量/总的请求数量

transferred 所有资源的大小

Finish 从页面开始到最后一次服务器交互完成，所花费的时间

查看具体资源的详情

通过点击某个资源的 Name可以查看该资源的详细信息，显示信息如下

Headers 该资源的HTTP头信息。

Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

Response 显示HTTP的Response信息。

Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。

Timing 显示资源在整个请求生命周期过程中各部分花费的时间。