Chrome Devtools 高级调试指南

1. 开发者工具 (Chrome Devtools) 的用处

浏览器 开发者工具 在爬虫中常用来进行简单的抓包分析、JS逆向调试。

• 前端开发：开发预览、远程调试、性能调优、​​bug​​跟踪、断点调试等
• 后端开发：网络抓包、开发调试 Response
• 测试：服务端​​API​​数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试
• 其他：安装扩展插件，如​​AdBlock、Gliffy、Axure​​等

打开方式：

• F12；
• 快捷键 Ctrl+Shift+I；
• 鼠标右键 检查 或者 审查元素；
• 浏览器右上角  ---> 更多工具 ---> 开发者工具

常见禁用开发者工具手

官方文档：​​https://developer.chrome.com/docs/devtools/​​

• Elements（元素面板）：使用“元素”面板可以通过自由操纵 DOM 和 CSS 来重您网站的布局和设计。
• Console（控制台面板）：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与 JavaScript 交互。
• Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
• Network（网络面板）：从发起网页页面请求 Request 后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化。
• Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能。
• Memory（内存面板）：分析 web 应用或者页面的执行时间以及内存使用情况。
• Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、
• Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式
• 表等。
• Security（安全面板）：使用安全面板调试混合内容问题，证书问题等等。
• Lighthouse（诊断面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。

2. 菜单面板拆解

元素选择

可以直接点击页面的元素，会自动跳转到对应的源代码。用于在页面选择一个元素来审查和查看它的相关信息，当在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态。

 终端模拟

模拟各种终端设备，支持自定义终端。同时可以选择不同的尺寸比例，chrome 浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。适合查看手机页面的数据，点击【More tools】—> 【Sensors】可以模拟终端的地理位置、终端朝向等；工具栏可以选择要模拟的终端型号，其中 Responsive 是自适应。

 设置、自定义：开发者工具设置，包括一些外观、快捷置、终端设备、地理位置设置等。 自定义和控制开发者工具，包括调整工具的位置、全局搜索、运行命令、其他工具等。

Elements - 页面dom元素

用来 查看、修改 页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改

• 对应的样式

• 盒模型信息。同时，当我们浏览网站看到某些特别炫酷的效果和难做的样式时候，打开这个功能，我们即可看到别人是如何实现的，学会它这知识就是你的了，仔细钻研也会有意想不到的收获

Console - 控制台

用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个：

a: 一些对页面数据的指令操作

比如，打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的 key/value 不是很方便，即可用这个指令开查看，obj 的 json string 格式的 key/value，我们对于数据里面有哪些字段和属性即可一目了然

b: 除了 console.log 还有其他相关的指令可用。console 也有相关的 API，其他更多功能可以查看 API

Sources - 页面静态资源 （ 可以查看 js 资源页面 ）

 Sources 页面内可以找到 浏览器当前页面 中的 js 源文件，方便我们查看和调试。所有的代码都是压缩之后的代码，可以点击下面的 {} 大括号 按钮 将代码转成可读格式

Sources Panel 的左侧分别是 Sources (资源) 和 Content scripts (脚本内容) 和 Snippets (片段)

• 对应的源代码

• 格式化后的代码

• 断点调试

关于打断点调试的内容，下面介绍，先来说一些，其他平时基本没人用但是很有用的小点，比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码，所以推荐使用 Sources 下面的左侧的 Snippets ( 片段 ) 代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息（新建了一个名叫：app.js 的片段代码，在你的项目环境页面内，该片段可执行项目内的方法）

• 自己书写的片段

Content scripts 是 Chrome 的一种扩展程序，它是按照扩展的 ID 来组织的，这些文件也是嵌入在页面中的资源，这类文件可以读写和操作我们的资源，需要调试这些扩展文件，则可以在这个目录下打开相关文件调试，但是几乎我们的项目还没有相关的扩展文件，所以啥也看不到，平时也不需要关心这块

Network - 网络

可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

• 所有的资源

以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择 XHR 异步请求资源，则我们可以分析相关的请求信息

控 制

Preserve log：是否在页面重加载后，清除请求列表。
Disable cache：是否启用缓存。

Filter 过滤器

• Hide data URLs：data URLs 指一些嵌入到文档中的小型文件，在请求表里面以 data: 开头的文件就是，如较为常见的 svg 文件。勾选 Hide data URLs复选框即可隐藏此类文件。
• All：显示所有请求。
• XHR：全称 XMLHttpRequest，是一种创建 AJAX 请求的 JavaScript API，通常抓取 Ajax 请求可以选择 XHR。
• WS：全称 WebSocket，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
• Manifest：安卓开发文件名，属于 AndroidManifest.xml 文件，在简单的 Android 系统的应用中提出了重要的信息码。
• Has blocked cookies：仅显示具有阻止响应 cookie 的请求。
• Blocked Requests：只显示被阻止的请求。
• 请求的相关信息

打开一个 Ajax 异步请求，可以看到它的请求头信息，是一个 POST 请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据

• 预览请求的数据

Performance - 设备加载性能分析

Application - 应用信息，PWA/Storage/Cache/Frames

Security - 安全分析

        可以告诉你这个网站的安全性，查看有效的证书等

Audits - 审计，自动化测试工具

可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告

• 分析结果

断点调试

常规断点调试

适用于分析关键函数代码逻辑

1. Ctrl+Shift+F 或者右上角三个点打开全局搜索，搜索关键字。
2. 定位到可疑代码，点击行号埋下断点。
3. 调试代码，分析逻辑，其中 console 模板可以直接编写 JS 代码进行调试。

各个选项功能：

• Breakpoints：可以看到已经埋下的断点。
• Scope：可以看到当前局部或者全局变量的值，可对值进行修改。
• Call Stack：可以看到当前代码调用的堆栈信息，代码执行顺序为由下至上。

XHR 断点

匹配 url 中关键词，匹配到则跳转到参数生成处，适用 于url 中的加密参数全局搜索搜不到，可采用这种方式拦截。

事件侦听器断点

Event Listener Breakpoints，事件侦听器断点，当鼠标点击、移动、键盘按键等行为或者其他事件发生时可以触发断点，比如 Mouse —> click，可快速定位点击按钮后，所执行的 JS。

插入 JS

在 sources —> snippets 下可以新建 JS 脚本。

打印 windows 对象的值

在 console 中输入如下代码，如只打印 ​​_$​​ 开头的变量值：

for (var p in window) {
    if (p.substr(0, 2) !== "_$") 
        continue;
    console.log(p + " >>> " + eval（p))
}

3. 常用命令和调试

1. 呼出快捷指令面板：cmd + shift + p

在 ​​Devtools ​​​打开的情况下，键入 ​​cmd + shift + p ​​​将其激活，然后开始在栏中键入要查找的命令或输入​​"?"​​号以查看所有可用命令。

win 快捷键是 ：ctrl + shift + p

• ​​...​​: 打开文件
• ​​:​​: 前往文件
• ​​@​​：前往标识符（函数，类名等）
• ​​!​​: 运行脚本文件
• ​​>​​: 打开某菜单功能

1.性能监视器：> performance monitor

在​​Devtools​​​打开的情况下，键入​​cmd + shift + p​​​将其激活，然后开始在栏中键入要查找的命令或输入​​"?"​​号以查看所有可用命令。

将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。

2.FPS实时监控性能：> FPS选择第一项

3.截图单个元素：> screen 选择Capture node screenhot

Sources 资源页面的断点调试

1. 如何调试：

调试 js 代码，肯定是我们常用的功能，那么如何打断点，找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点

2. 断点与 js 代码修改

看下面这张图，我在一个名为 toggleTab 的方法下打了两个断点，当开始执行我们的点击切换 tab 行为后，代码会在执行的断点出停下来，并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息，

同时我们可以使用 右侧的功能键进行调试，右侧最上面一排分别是：

• 暂停/继续、
• 单步跳过 下一个函数调用 ( F10快捷键 )、
• 单步进入 ( F11快捷键 )、
• 单步跳出 当前函数
• 
  
• 禁用/启用所有断点。

下面是各种具体的功能区

• 在代码中打断点。在代码执行区域调试时，如果发现需要修改的地方，也是可以立即修改的，修改后保存即可生效，这样就免去了再到代码中去书写，再刷新回看了：

• 临时修改

3. 快速进入调试的方法

当我们的代码执行到某个程序块方法处，这个方法上可能你并没有设置相关的断点，此时你可以 F11 进入此程序块，但是往往我们的项目都是经过很多源代码封装好的方法，有时候进入后，会走很多底层的封装方法，需要很多步骤才能真正进入这个函数块，此时将鼠标放在此函数上，会出现相关提示，会告诉你在该文件的哪一行代码处，点击即可直接看到这个函数，然后临时打上断点，按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处

4. 调试的功能区域

每一个功能区，都有它相关的左右，先来看一张图，它都有哪些功能

Call Stack 调用栈：当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。图中可以看出，我们最先走了 toggleTab 这个方法，然后走到了一个更新对象的方法上，当前调用在哪里，箭头会帮你指向哪里，同时我们可以点击，调用栈列表上的任意一处，即可回头再去看代码

Call Stack 列表的下方是 Scope Variables 列表可以查看此时 局部变量 和 全局变量 的值。

如果你想重新从某个调用方法处执行，可以右键 Restart Frame， 断点就会跳到此处开头重新执行，Scope 中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看

Breakpoints 关于断点：所有当前 js 的断点都会展示在这个区域，你可以点击按钮用来 "去掉/加上" 此处断点，也可以点击下方的代码表达式，调到相应的程序代码处。

XHR Breakpoints

在 XHR Breakpoints处，点击右侧的 +号，可以添加请求的 URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断

DOM Breakpoints:

可以给你的 DOM 元素设置断点，有时候真的需要监听和查看某个元素的变化情况，赋值情况，但是我们并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件，这个时候 DOM Breakpoints 中会如图

当要给 DOM 添加 断点 的时候，会出现选择项分别是如下三种修改

• 1. 子节点 修改 
• 2. 自身属性 修改
• 3. 自身节点 被 删除

选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来

如上图：监听​​form​​标签，在​​input​​框获得焦点时，触发断点调试

Event listener Breakpoints 

最后 Event Listener 列表，这里列出了各种可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断

2. DOM 断点调试

当你要调试特定元素的DOM中的更改时，可以使用此选项。这些是DOM更改断点的类型：

• ​​Subtree modifications​​: 子节点删除或添加时
• ​​Attributes modifications​​: 属性修改时
• ​​Node Removal​​: 节点删除时

如上图：监听​​form​​标签，在​​input​​框获得焦点时，触发断点调试

3. 黑盒脚本：Blackbox Script

剔除多余脚本断点。

例如第三方（​​Javascript​​框架和库，广告等的堆栈跟踪）。

为避免这种情况并集中精力处理核心代码，在​​Sources​​​或网络选项卡中打开文件，右键单击并选择​​Blackbox Script​​

4. 事件监听器：Event Listener Breakpoints

1. 点击​​Sources​​面板
2. 展开​​Event Listener Breakpoints​​
3. 选择监听事件类别，触发事件启用断点

如上图：监听了键盘输入事件，就会跳到断点处。

5. 本地覆盖：local overrides

使用我们自己的本地资源覆盖网页所使用的资源。

类似的，使用​​DevTools​​​的工作区设置持久化，将本地的文件夹映射到网络，在​​chrome​​开发者功能里面对css 样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

• 创建一个文件夹以在本地添加替代内容；
• 打开​​Sources > Overrides > Enable local Overrides​​，选择本地文件夹

• 打开​​Elements​​，编辑样式，自动生成本地文件。
• 返回​​Sources​​，检查文件，编辑更改。

该项可以自动修改除XHR异步请求的资源，下载的文件若未格式化，可以点左下角。

6. 扩展：local overrides模拟Mock数据

来自：chrome 开发者工具 - local overrides

对于返回json 数据的接口，可以利用该功能，简单模拟返回数据。

比如：

• ​​api​​​ 为: ​​http://www.xxx.com/api/v1/list​​
• 在根目录下，新建文件​​www.xxx.com/api/v1/list​​​，​​list​​ 文件中的内容，与正常接口返回格式相同。

对象或者数组类型，从而覆盖掉原接口请求。

本地 调试 线上JS 方法总结

前提： 用谷歌浏览器浏览网页

第一步：在谷歌浏览器 Sources中找到需要调整的线上 js 文件，并把该 js 文件下载到桌面。

第二步：用谷歌浏览器 爬梯/越狱（fanqiang/yueyu）， 安装 ReRes插件。

• 打开 扩展程序，搜索 reres 即可找到。（ ReRes 和 GoRes 任意一个都可以，其实就是 URL 重定向工具

第三步：用 ReRes 插件把网页访问的 a.js 文件指向本地下载的 a.js 文件，就可以线下调试 js 了。

• 1 在 Source 里面复制线上 js 文件的 url 地址

• 2 把下载到本地的 js 文件直接拖到浏览器中，复制 url

• 3 把上面两步操作复制的 url，添加的 ReRes 中（点击浏览器右上角这个插件，然后 "添加规则"，保存 即可）

第四步：用浏览器扩展程序中勾上这2个选项，然后刷新网页就可以线下调试了，也即此时线上使用的是本地 JS 了。

注意：不调试了，要把 ReRes 调试工具给关掉（也即：下面2个选项不勾选），否则下次发版更新，就还是使用本地 JS，容易误导。

用 Chrome 调试你的 JavaScript

From：​​https://zhuanlan.zhihu.com/p/24770877​​

文章是 Chrome DevTools 介绍系列的一部分，查看全部文章可以关注 Github 上的 ​​Chrome DevTools 详解​​​，也可以关注这个系列所在的项目：​​front-end-study​​。

在 Chrome 中调试 JS 代码，那你不得不与 Chrome DevTools 的 Sources 面板打交道，所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS。

熟悉 Sources 面板

以 ​​https://github.com/CompileYouth/front-end-study​​ 为例。面板被分为左中右三个部分，左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板。整个面板就像一个 IDE

• Sources：这个面板很好理解，展示了网页所用到的所有文件
• Content scripts：Content scripts 指的是 Chrome 拓展注入在网页中的脚本。

比如我安装了一个 FeHelper (前段助手) 的 Chrome 拓展，打开 Content scripts 面板会看到：

• Snippets：Snippets 的含义是片段，在这里指的是一小段程序，这个一小段程序跟在其他地方不一样的是，可以访问这个页面中的变量和函数等。

中间面板的其他操作都比较显而易见，只是有 4 点需要简单提一下。

标记 1、2 处可以隐藏/展开左右两个面板，标记 3 处格式化代码，使得代码变得易于阅读，当代码被压缩时尤其有用。另外需要提一下的是打开文件的快捷方式，可以用 Cmd + p / Ctrl + p 在任何一个功能面板上搜索一个文件，按 enter 键在 Sources 面板上打开。

右边的调试面板比较复杂，需要借助调试的例子来解释作用。不过我们可以先大概熟悉一下：

右侧的面板为上下结构，

• 上面是一组功能按钮，
• 下面由很多面板组成，这些面板中，看名字大概能知道第二个显示的是调用栈，从四个开始就是各种类型的断点。

下面结合调试实例来解释这些按钮/面板的功能。

添加断点

打开一个文件，中间的面板中显示了代码，代码的左侧有代码行号，代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标。特别提一下的是，这个图标的颜色是蓝色的。如下：

另外，如果一条语句由多行组成，如果在这条语句的行中添加断点的话，那么断点将会被加到下一条语句。举例如下：

在上面的代码中，你可以在 13 行添加断点，但如果你想在 14-17 行添加断点的话，那么断点将会被添加到 19 行。另外，你也不能为空行添加断点，那也会被添加到下一条语句上。比如你想在 18 行添加断点，但实际会被添加到 19 行。

条件断点

右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件满足时，断点才会生效。回车后，效果如下：

可以看见，条件断点跟一般断点的区别就是颜色变成了黄色。

行内断点

行内断点是你可以在一行内添加多个断点。看下面的例子：

跟前面添加断点方式一样，我先在 15 行添加了一个断点，当程序中断在 15 行时，出现了上图的例子。但与一般的例子不同的是，上面有 3 处标红的位置，表示 3 处断点。但第 1 个断点跟后 2 个不一样的是，第 1 个断点是默认处于激活状态，而后 2 个则不是，只有点击激活后才能生效。

断点的其他操作

• 忽略：如果你想暂时忽略某个断点，右键断点，选择 "Disable breakpoint"
• 修改：修改断点生效的条件。你可以将一个非条件断点通过这个方式修改成条件断点，也可以将条件断点变成非条件断点
• 删除：你可以直接点击断点，或者右键 "Remove breakpoint"

黑盒脚本

右键行号槽的时候，有一个选项是："Blackbox Script"。

那什么是黑盒脚本呢？

我们写项目时，很多时候是要引用第三方库或框架的，当我们调试时，调试的对象应该是我们自己写的代码，但很多时候，我们经常在焦灼地进行下一步下一步时，突然代码跳到了第三方库或框架的源码上去，这让我们焦灼的内心更添了一把柴火。黑盒脚本就是用来解决这个问题的。它能够将一个脚本文件标记为 "Blackbox Script"，那么我们就永远不可能进入这个文件内部，这个文件对我们来讲就是一个黑盒子。为什么要强调“永远”呢？因为不仅普通的断点不能访问这个被标记了的脚本，其他的，比如说 DOM 断点、事件断点等等都无法访问那个脚本文件内部。

面板介绍 -- Breakpoints

这个面板会显示你所有的通过行号留下的断点。你可以右键管理某个或全部断点：

• Remove Breakpoints：删除选中的断点
• Deactivate Breakpoints：暂时忽略所有断点
• Disable all Breakpoints：功能同上（与上一功能有细微差别，但表现类似）
• Remove all Breakpoints：删除所有断点

除了普通的中断类型，我们下面再介绍几款其他类型的。

面板介绍 -- DOM Breakpoints

在 Elements 面板，右键 body 元素，插入 "attribute modifications breakpoint"，在 Sources 面板中显示如下：

查看 DOM 断点的详细信息请查看另一篇博客：​​Elements​​

面板介绍 -- XHR Breakpoints

XHR 断点跟 DOM 断点很类似，通过 XHR 断点可以很容易的找到 ajax 调用的触发点和调用堆栈。最新的 Chrome DevTools 中要么为所有 ajax 调用添加断点，要么都不添加断点。

面板介绍 -- Event Listener Breakpoints

展开 Event Listener Breakpoints 可以看到一组事件类型，展开一个事件类型可以看到具体的事件名称。

1. 点击​​Sources​​面板
2. 展开​​Event Listener Breakpoints​​
3. 选择监听事件类别，触发事件启用断点

每个事件名称和事件类型前面都有个复选框，选中即指当页面中触发了所选的事件的话，就会触发中断。

如上图：监听了键盘输入事件，就会跳到断点处。

本地覆盖：local overrides

使用我们自己的本地资源覆盖网页所使用的资源。

类似的，使用​​DevTools​​​的工作区设置持久化，将本地的文件夹映射到网络，在​​chrome​​开发者功能里面对css 样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

• 创建一个文件夹以在本地添加替代内容；
• 打开​​Sources > Overrides > Enable local Overrides​​，选择本地文件夹

面板介绍 -- Global Listeners

显示全局监听器，在浏览器中 window 是全局对象，所以在 Global Listeners 面板中显示绑定在 window 对象上的事件监听。

异常中断

这个跟上面几种不一样，这个是放在功能按钮组里面的。

选中 "Pause on exceptions" 按钮，如上图，当执行的脚本出现异常时会触发中断。

介绍了如何添加断点的方式以及几款中断类型，下面介绍一下如何利用断点进行调试。

面板介绍 -- Scope

Scope 面板显示了你当前定义的所有属性的值，例子如上图。除了 Scope 面板，你还可以在左侧的代码区域，中断的旁边看到语句中包含的变量的值。

除此以外，你还可以把鼠标放在变量上面，也显示对应变量的值。

Scope 会显示三种类型的值： Local、Closure 和 Global。

面板介绍 -- Call Stack

当代码中断在一处时，Call Stack 面板会显示代码的执行路径。比如在 a() 中调用了 b()，b() 中调用了 c()，那么中断如果在 c() 内部的话，那么 Call Stack 面板会依次显示 c、b、a。

在 JS 中，我们常常会写匿名函数，显而易见，在调试时，尤其在查看调用栈时，这样很不友好，所以建议尽量为每个函数命名。

如果还记得前面所讲的黑盒脚本（Blackbox Script）的话，这里就再重复一句，是的，黑盒脚本永远不可见，所以你即使在查看调用栈时你也没法看到黑盒脚本里的内容。这种情况下会出现下面这样的结果：

查看与修改你的值

前面讲 Scope 面板时介绍了三种查看中断状态下的变量值，还有一个隐蔽的小技巧也能查看，按 esc 按键打开 Console drawer（不清楚是什么可以看​​Console​​），然后在里面输入你想查看的值，回车，bingo~

如果你以为 Chrome DevTools 就简单看看这些值那就太小瞧她了，在中断状态下，还能动态修改变量的值。比如中断处有个变量叫 v，值是 1，如果我直接按 "Resume script execution" 的话，那么下一次的 v 也是 1，但如果我在按恢复执行按钮之前，我在 Console drawer 中输入 v = 2 回车，那么，下一处的 v 就是 2 了。

还有更厉害的，你不仅可以修改变量的值，你还可以修改代码！当程序中断时，你可以在 Sources 面板修改你的代码。

面板介绍 -- Watch

正如名字所表示的，观察，观察什么呢？主要观察变量。

前面我们讲过，当程序中断时，可以查看这个状态下的变量的值，但局限是只能一个一个查看，而 Watch 的好处是可以让我们同时查看多个变量。你可以通过 "+" 来添加变量，当添加的变量存在时会显示对应的值，不存在的话则会显示 "not availble"。需要注意的是，这里的变量不会随着代码的执行而发生改变，所以到了下一个状态时，你需要点击刷新按钮来获得关注的变量的新的值。

源码调试

现在的项目几乎都是经过编译过的，所以当我们调试时会与编译后的代码打交道，但那并不是我们想要的。不要急，Chrome DevTools 提供了预处理过的代码与源码的映射，主要表现在两点：

• 在 console 上，源链接指向的是源码，而不是编译后的文件
• 在 debug 时，在 Call Stack 面板上的源链接指向的也是源码，不是编译后的文件

不过需要注意的是，上面所讲的能查看源码的前提是 Chrome DevTools 在设置中提供了相应权限，具体是：Settings - Sources - Enable Javascript source maps / Enable CSS source maps，勾选这两项即可。不过，默认情况下就是勾选。

网络请求神器 postman

Postman使用详

postman 官网：​​https://www.postman.com/​​

在开发过程中，后端的接口都是由发起 AJAX 请求而获取到的相关数据，但是很多情况是我们的业务还没有做到那块时，后端的接口都已经准备好了，但是为了便于后期的工作，将接口请求的数据模拟访问，然后对接口联调很重要，也很方便，因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看，这时候可以安装一个 postman ，该程序使用非常简单，功能同时也非常强大，输入你的请求，选择好请求的 method，需要请求参数的挨个填好，send 之后，就可以看到返回的数据。

​

​​

​​

4. 控制台内置指令

可以执行常见任务的功能，例如选择​​DOM​​​元素，触发事件，监视事件，在​​DOM​​中添加和删除元素等。

这像是​​Chrome​​​自身实现的​​jquery​​加强版。

1. $(selector, [startNode])：单选择器

​​document.querySelector​​的简写 语法：

$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();

控制台还会预先查询对应的标签，十分贴心。 还可以触发事件，如暂停播放：

此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document

2. ?（选择器，[startNode]）：全选择器

​​document.querySelectorAll​​的简写，返回一个数组标签元素 语法：?('.button')

可以用过循环实现切换全选

或者打印属性

此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document 用法：

var images = ?('img', document.querySelector('.devsite-header-background'));
   for (each in images) {
       console.log(images[each].src);
}

3. $x(path, [startNode])：xpath选择器

​​$x(path)​​​返回与给定​​xpath​​表达式匹配的DOM元素数组。

例如，以下代码返回​​<p>​​页面上的所有元素：$x("//p")

以下代码返回​​<p>​​​包含​​<a>​​元素的所有元素：$x("//p[a]")

​​xpath​​多用于爬虫抓取，前端的同学可能不熟悉。

4. getEventListeners（object）：获取指定对象的绑定事件

​​getEventListeners(object)​​​返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，​​click​​​或​​keydown​​）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。 用法：getEventListeners(document);

相对于到监听面板里查事件，这个​​API​​便捷多了。

5. 花式console

除了不同等级的​​warn​​​和​​error​​打印外

还有其它非常实用的打印。

1. 变量打印：%s、%o、%d、和%c

const text = "文本1"
console.log(`打印${text}`)

除了标准的​​ES6​​语法，实际上还支持四种字符串输出。 分别是：

console.log("打印 %s", text)

• ​​%s​​：字符串
• ​​%o​​：对象
• ​​%d​​：数字或小数

还有比较特殊的 ​​%c​​，可用于改写输出样式。

console.log('%c 文本 1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

当然，你也可以结合其它一起用(注意占位的顺序)。

const text_2 = "文本 2"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

你还可以这么玩：

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

2. 打印对象的小技巧

当我们需要打印多个对象时，经常一个个输出。且看不到对象名称，不利于阅读：

以前我的做法是这么打印：

console.log('hello', hello);
console.log('world', world);

这显然有点笨拙繁琐。其实，输出也支持对象解构：

console.log({hello, world});

3. 布尔断言打印：console.assert()

当你需要在特定条件判断时打印日志，这将非常有用。

• 如果断言为false，则将一个错误消息写入控制台。
• 如果断言是true，没有任何反应。

语法：console.assert（assertion，obj）

用法

const value = 1001
console.assert(value===1000,"value is not 1000")

4. 给console编组：console.group()

当你需要将详细信息分组或嵌套在一起以便能够轻松阅读日志时，可以使用此功能。

console.group('用户列表');
console.log('name: 张三');
console.log('job: 🐶前端');
// 内层
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在职');
console.groupEnd(); // 结束内层
console.groupEnd(); // 结束外层

5. 测试执行效率：console.time()

没有​​Performance API​​ 精准，但胜在使用简便。

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");

6. 输出表格：console.table()

这个适用于打印数组对象。。。

let languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);

7. 打印DOM对象节点：console.dir()

打印出该对象的所有属性和属性值. ​​console.dir()​​​和​​console.log()​​的作用区别并不明显。若用于打印字符串，则输出一摸一样。

console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;

在输出对象时也仅是显示不同（​​log​​​识别为字符串输出，​​dir​​直接打印对象。）。

唯一显著区别在于打印​​dom​​对象上：

console.log(document)
console.dir(document)

一个打印出纯标签，另一个则是输出​​DOM​​树对象。

6. 远程调试WebView

使用​​Chrome​​​开发者工具在原生​​Android​​​应用中调试​​WebView​​。

1. 配置​​WebViews​​进行调试。

在 ​​WebView​​​类上调用静态方法​​setWebContentsDebuggingEnabled​​。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

2. 手机打开​​usb​​调试，插上电脑。

3. 在​​Chrome​​地址栏输入：​​Chrome://inspect​​

正常的话在​​App​​​中打开​​WebView​​​时，​​chrome​​​中会监听到并显示你的页面。 4. 点击页面下的​​inspect​​​，就可以实时看到手机上​​WebView​​​页面的显示状态了。（第一次使用可能会白屏，这是因为需要去​​https://chrome-devtools-frontend.appspot.com​​那边下载文件）

除了​​inspect​​​标签，还有 ​​Focus tab​​:

• 它会自动触发​​Android​​设备上的相同操作

其他应用里的​​WebView​​也可以，例如这是某个应用里的游戏，用的也是网页：

7.调试Node.js

具体可以查看阿里云社区的这篇：

​​Node.js应用程序故障排除手册-正确启用Chrome DevTools​​

使用 Chrome Devtools 调试 Node.js 程

 

Chrome - JavaScript 调试技巧总结（浏览器调试JS）

Chrome 是 Google 出品的一款非常优秀的浏览器，其内置了开发者工具（Windows 系统中按下 F12 即可开启），可以让我们方便地对 JavaScript 代码进行调试。

打开谷歌浏览器，然后打开调试功能栏（ 快捷键 F12 ），然后打开 Sources 面板。

调试的快捷键（ 鼠标可以放到按钮上，会自动显示对应快捷键

• F8：暂停 / 执行 ( pause )
• F9：单步执行，( step )
• F10：单步跳过 ( step over next function call )
• F11：单步进入 ( step into )
• Shift + F11：跳出当前方法体。( step out of current function )

一、设置断点

有两种方法可以给代码添加断点

方法 1：在 Source 内容区设置

（1）找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。

（2）刷新浏览器，当页面代码运行到断点处便会暂停执行。

方法 2：在 js 文件中设置

（1）我们在 js 源文件中需要执行断点操作的代码前加上 debugger。

（2）刷新浏览器，当页面代码运行到断点处会暂停执行

二、设置断点执行条件

（1）右键点击设置的断点，选择 Edit breakpoint...

（2）输入执行断点的条件表达式，当表达式为 true 时断点调试才会生效。有了条件断点，我们在调试代码的时候能够更加精确地控制代码断点的时机

三、Call Stack 调用栈

1，界面介绍

（1）当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。

（2）Call Stack 列表的下方是 Scope Variables 列表，可以查看此时局部变量和全局变量的值。

2，使用技巧

（1）调试时当前调用在哪里，Call Stack 列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处，便会调到相应的位置，方便我们再回头去看看代码。

（2）如果想重新从某个调用方法处执行，可以右键选择 Restart Frame。断点就会跳到此处开头重新执行，同时 Scope 中的变量值也会依据代码重新更改，这样就可以方便地回退来重新调试，省得我们再重新刷新整个页面。

四、DOM 元素设置断点　

1，DOM Breakpoints 介绍

除了可以给 js 代码设置断点，我们还可以给 DOM 元素设置断点。因为我们有时候需要监听和查看某个元素的变化、赋值情况，但是并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件。

2，使用说明

（1）我们右键点击需要监听的 DOM 节点，选择“Break On...”菜单项，在出现的三个选择项中任选一个便会添加断点。

（2）这三个选择项分别对应如下三种修改情况：

• suntree modifications：子节点修改
• attribute modifications：自身属性修改
• node removal：自身节点被删除

（3）设置好断点后，当 DOM 元素要被修改时，代码就会在自动停留在修改处。

五、统一管理所有断点

我们可能会在不同的文件、不同的位置添加许多断点。这些都会显示在 Source 页面里的 Breakpoints、DOM Breakpoints 区域中：

• Breakpoints：js 断点
• DOM Breakpoints：DOM 元素断点

点击断点前面的复选框可以暂时“去掉/加上”该断点，点击断点可跳转到相应的程序代码处

六、快捷键

1，快速定位文件

使用快捷键：ctrl + p

2，全局搜索

ctrl + shift + f

七、格式化

1，js代码格式化

为了减小体积，有时候我们发现一些 js 源码都是压缩之后的代码，我们可以点击下面的 {} 大括号按钮将代码转成可读格式。

2，格式化返回的 JSON 数据

（1）有时我们调试程序时需要查看服务端返回的数据内容，这个在 Network 选项卡中就可看到。但如果后台返回的是没有格式化的 JSON 数据，查看起来会异常痛苦

（2）我们可以通过 chrome 控制台的 copy 接口来实现 JSON 数据的格式化。

（3）首先请求项的右键菜单中选择 Copy Response 拷贝响应内容。

（4）命令行中先输入 copy()，然后将拷贝的数据粘贴到括号中

（5）回车后 copy 接口便会自动将数据进行格式化，并保存到剪贴板中。我们将其粘贴到文本编辑器中就可以看到效果：

八、使用 Snippets 编写代码片段

1，Snippets 介绍

（1）在 Souces 页面下的 Snippets 栏目中，我们可以随时进行 JS 代码的编写，运行结果会打印到控制台。

（2）代码是全局保存的，我们在任何页面，包括新建标签页，都可以查看或运行这些代码。我们不再需要为了运行一小段 JS 代码而新建一个 HTML 页面。

（3）Snippets 的方便之处在于，我们只需要打开 Chrome 就可以编写一份任意页面都可以运行的JS代码

2，使用样例

（1）点击“New Snippet”按钮，创建一个新的片段文件

（2）在代码区域输入 js 代码

（3）按下“Ctrl + Enter”或者点击右下方的按钮执行代码，可以看到代码执行成功且反应到当前页面上了。

九、Async 调试

　Chrome 调试器的 Async 模式是为调试异步函数所设计一个功能

1，测试代码

下面是一段使用 Promise 的代码：

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){  //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){ //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('用过的碗和筷子');
        }, 2000);
    });
    return p;
}
 
cook()
.then(eat)
.then(function(data){
    console.log(data);
});

2，代码调试

（1）我们都知道 Promise 的回调是异步执行的，默认情况下调用栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难。

（2）开启 Async 模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。

15个必须知道的 chrome 开发者技巧

From ：​​http://www.admin10000.com/document/6159.html​​​ 超完整的 Chrome 浏览器客户端调试大全：​​http://web.jobbole.com/89344​​​ IBM 官网：​​使用 Chrome 开发者工具进行 JavaScript 问题定位与调试​​​ Chrome 开发者工具 使用教程：​​Google Chrome 浏览器 开发者工具 使用教程 | DeveWork​​  

在 Web 开发者中，Google Chrome 是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能，使其成为了 web 开发者必备的工具。你可能已经熟悉了它的部分功能，如使用 console 和 debugger 在线编辑 CSS。在这篇文章中，我们将分享15个有助于改进你的开发流程的技巧。

一、快速切换文件

　　如果你使用过 sublime text，那么你可能不习惯没有 Go to anything 这个功能的覆盖。你会很高兴听到 chrome 开发者功能也有这个功能，当 DevTools 被打开的时候，按 Ctrl+P（cmd+p on mac），就能快速搜寻和打开你项目的文件。

二、在源代码中搜索

　　如果你希望在源代码中搜索要怎么办呢？在页面已经加载的文件中搜寻一个特定的字符串，快捷键是 Ctrl + Shift + F (Cmd + Opt + F)，这种搜寻方式还支持正则表达式哦

三、快速跳转到指定行

　　在 Sources 标签中打开一个文件之后，在 Windows 和 Linux中，按 Ctrl + G，(or Cmd + L for Mac)，然后输入行号，DevTools就会允许你跳转到文件中的任意一行。

另外一种方式是按 Ctrl + O，输入​​: ​​和 行数，而不用去寻找一个文件。

四、在控制台选择元素

　　DevTools 控制台支持一些 变量 和 函数 来选择 DOM元素：

• $()–document.querySelector()的简写，返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
• $$()–document.querySelectorAll()的简写，返回一个和css选择器匹配的元素数组。
• $0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录，​​$0​​是最新的记录，以此类推。

想要了解更多控制台命令，戳这里：​​Command Line API​​

五、使用多个插入符进行选择

　　当编辑一个文件的时候，你可以按住 Ctrl（cmd for mac），在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。

六、保存记录

　　勾选在 Console 标签下的保存记录选项，你可以使 DevTools 的 console 继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的 bug 时，这会是一个很方便的方法。

七、优质打印

　　Chrome’s Developer Tools 有内建的美化代码，可以返回一段最小化且格式易读的代码。Pretty Print 的按钮在 Sources 标签的左下角。

八、设备模式

　　对于开发移动友好页面，DevTools 包含了一个非常强大的模式，这个谷歌视频介绍了其主要特点，如调整屏幕大小、触摸仿真和模拟糟糕的网络连接

　　（ps:原文中这个视频文件丢失了，这个图是小编补充，你可以自己去测试这个工具，很有用）

九、设备传感仿真

　　设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部，点击 “show drawer” 按钮，就可看见 ​​Emulation 标签 --> Sensors​​.

十、颜色选择器

　　当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。

十一、强制改变元素状态

　　DevTools 有一个可以模拟 CSS 状态的功能，例如元素的 hover 和 focus，可以很容易的改变元素样式。在 CSS 编辑器中可以利用这个功能

十二、可视化的 DOM 阴影

　　Web 浏览器在构建如 文本框、按钮 和 输入框 一类元素时，其它基本元素的视图是隐藏的。不过，你可以在 ​​Settings -> General​​​ 中切换成 ​​Show user agent shadow DOM​​，这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式，这给你了很大的控制权。

十三、选择下一个匹配项

　　当在 Sources 标签下编辑文件时，按下 Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。

十四、改变颜色格式

　　在颜色预览功能使用快捷键 Shift + Click，可以在 rgba、hsl 和 hexadecimal 来回切换颜色的格式

十五、通过 workspaces 来编辑本地 文件

    Workspaces 是 Chrome DevTools 的一个强大功能，这使 DevTools 变成了一个真正的 IDE。Workspaces 会将 Sources 选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴外部改变的文件到编辑器。

　　为了配置 Workspaces，只需打开 Sources 选项，然后右击左边面板的任何一个地方，选择 Add Folder To Worskpace，或者只是把你的整个工程文件夹拖放入 Developer Tool。现在，无论在哪一个文件夹，被选中的文件夹，包括其子目录和所有文件都可以被编辑。为了让 Workspaces 更高效，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。

　　了解更多关于 Workspaces 的使用，戳这里：​​Workspaces​​

　　原文：​​15 Must-Know Chrome DevTools Tips and Tricks​​​ 译文：​​ido321​​