From ( Chrome Devtools 高级调试指南 )：https://juejin.cn/post/6844903961472974855
chrome devtools 设置黑色主题：https://blog.csdn.net/sinat_15347975/article/details/81151342
Chrome DevTools 实用技巧大全(收藏)：https://blog.csdn.net/qianyu6200430/article/details/113903914
1. 开发者工具 (Chrome Devtools) 的用处
浏览器 开发者工具 在爬虫中常用来进行简单的抓包分析、JS逆向调试。
- 前端开发：开发预览、远程调试、性能调优、
bug跟踪、断点调试等 - 后端开发：网络抓包、开发调试 Response
- 测试：服务端
API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 - 其他：安装扩展插件，如
AdBlock、Gliffy、Axure等
打开方式：
- F12；
- 快捷键 Ctrl+Shift+I；
- 鼠标右键 检查 或者 审查元素；
- 浏览器右上角 ---> 更多工具 ---> 开发者工具
常见禁用开发者工具手段：https://blog.csdn.net/cplvfx/article/details/108518077
官方文档：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 - 审计，自动化测试工具
可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告
- 分析结果
断点调试
常规断点调试
适用于分析关键函数代码逻辑
- Ctrl+Shift+F 或者右上角三个点打开全局搜索，搜索关键字。
- 定位到可疑代码，点击行号埋下断点。
- 调试代码，分析逻辑，其中 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
- 点击
Sources面板 - 展开
Event Listener Breakpoints - 选择监听事件类别，触发事件启用断点
如上图：监听了键盘输入事件，就会跳到断点处。
5. 本地覆盖：local overrides
使用我们自己的本地资源覆盖网页所使用的资源。
类似的，使用DevTools的工作区设置持久化，将本地的文件夹映射到网络，在chrome开发者功能里面对css 样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。
- 创建一个文件夹以在本地添加替代内容；
- 打开
Sources > Overrides > Enable local Overrides，选择本地文件夹
- 打开
Elements，编辑样式，自动生成本地文件。 - 返回
Sources，检查文件，编辑更改。
该项可以自动修改除XHR异步请求的资源，下载的文件若未格式化，可以点左下角。
6. 扩展：local overrides模拟Mock数据
对于返回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 可以看到一组事件类型，展开一个事件类型可以看到具体的事件名称。
- 点击
Sources面板 - 展开
Event Listener Breakpoints - 选择监听事件类别，触发事件启用断点
每个事件名称和事件类型前面都有个复选框，选中即指当页面中触发了所选的事件的话，就会触发中断。
如上图：监听了键盘输入事件，就会跳到断点处。
本地覆盖：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使用详解：https://blog.csdn.net/fxbin123/article/details/80428216
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: 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/618157推荐阅读
相关标签
