Chrome控制台使用技巧

一、常用功能

• 1、查看BOM，变量，简单计算

• 2、copy和saving

你可以通过全局的方法 copy() 在 console 里复制任何能拿到的资源，比如一些嵌套层级深的数据结构，使用copy可以直接拿到

假如你在 console 中打印了一堆数据 (例如你在 App 中计算出来的一个数组) ，然后想对数据做额外的操作，比如刚刚说的 copy (在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量，只需要 右击 它，并选择 “ Store as global variable ” (保存为全局变量) 选项。

• 3、快捷键

Chrome 中有些快捷键对于我们提升工作效率还是有的：

ctrl + L    清空控制台
ctrl + shift + P 打开功能搜索
ctrl + [ 向左移动控制台tabctrl + ]    向右移动控制台tab
ctrl + 0~9  分别代表9个tab

• 4、截图

当你只想对某一个 DOM 节点截图时，大概率会用工具弄半天，但现在不需要了：直接选中那个节点，打开 Command 菜单并且使用 节点截图 的就可以了。你以为这就是全部了吗？你还可以用这种方式 全屏截图 – 通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。

ctrl + shift + P 
Capture full size screenshot

• 5、保存一段脚本测试运行

如果我想看看，当前页面内所有 p 标签包含的文字总数，应该怎么做呢？

?('.content p')
    .map(el => parseInt(el.innerText.length))
    .reduce((sum, value) => sum + value)

这样的脚本，并不需要花费我太多的精力来写，但只是偶尔用用。所以我并不愿意每次都自己写。

那怎么解决这个问题呢？

这就是 Snippets 的用武之地了：通过它可以存放 JavaScript 代码到 DevTools 中，方便下一次使用：

1.进入到 Sources 面板
2.在导航栏里选中 Snippets 这栏
3.点击 New snippet(新建一个代码块)
4.输入你的代码之后保存
5.[ctrl] + [enter] 来运行你刚刚保存的脚本吧

二、Elements

在这个tab栏下查看当前页面的DOM结构，具体信息

• 1、使用 'h' 来隐藏DOM元素

某些的时候这很有用：例如你想截图，但你想去掉里面的敏感信息

• 2、拖动 & 放置 元素

可以使用鼠标拖动DOM元素，暂时放置到其他地方，在于设计师扣细节时有用

• 3、在元素面板中展开所有的子节点

一个一个点击 ▶ 展开太慢？右键选择 expand recursively

三、Console

在这个tab栏下查看打印信息，也是调试使用最多的tab栏

console中的 $

• 1、$0

在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。

理所当然， $1 是对上一次我们选择的节点的引用， $2 是对在那之前选择的节点的引用，等等。一直到 $4

• 2、$ 和 ?

$是jquery中集合体，上面挂载了大量的方法、属性；?是chrome中操作dom的利器，而且更加厉害了，不仅仅是双倍的快乐，还能节省更多的时间，因为它不仅执行 document.QuerySelectorAll 并且它返回的是：一个节点的 数组 ，而不是一个 Node list 。

• 3、$_

调试的过程中，经常会打印一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？

$_ 登场， $_ 是对上次执行的结果的 引用 

console中的异步

• 1、Promise的处理

• 2、一些异步的系统api

await navigator.storage.estimate()  Storage 系统的 占用数 和 空闲数
await navigator.getBattery()        设备的 电池信息
await navigator.mediaCapabilities.decodingInfo({ type: 'file', audio: {contentType: 'audio/ogg'} }) 媒体能力

console的打印方式

• 1、log

使用最多的调试方式，能打印信息

• 2、table

将打印信息展示成表格

• 3、time

要给应用中发生的事件, 加上一个确切的时间戳，需要开启 timestamps 。你可以在设置(在调试工具中的 ⋮ 下拉中找到它，或者按下 F1 )中来开启。但是我建议你使用 Commands Menu

console.time() — 开启一个计时器
console.timeEnd() — 结束计时并且将结果在 console 中打印出来

4、assert

当我们传入的第一个参数为 假 时， console.assert 打印跟在这个参数后面的值。

console.log直接作为回调

假如有这么一个函数，我们会对服务器返回的数据进行加工，并且传递给回调函数：

function getName(callback) {
    // 假设这个对象是从服务器请求回来的数据
    const mySkey = {
        name: 'mySkey',
    }
    // 我们会使用一个回调来处理他的返回结果
    callback(mySkey)
}

本来在回调中打印回调信息如下：

getName(v => console.log(v))

直接将console.log作为回调

getName(console.log)

四、Network

在这个tab栏下查看网络信息，常用来调试接口信息

• 1、常用选项分别的功能

Preserve log    （保留）日志，在什么时候会用到呢？当需要记录页面刷新前后的 log 或者是页面跳转前后的 log 来进行对比调试的时候
Disable catch   不缓存
Online          可以切换网速测试
Hide data Urls  隐藏数据Url
All             查看所有请求
xhr             查看xml的http的request

• 2、重新发送 XHR 的请求

• 3、禁止请求

当你想测试页面在某个接口失败时的表现，就可以使用 Network 面板中的禁止请求的方法。

五、Source

在这个tab栏下查看当前网页加载到的资源信息，常在缓存导致问题时查看目前加载文件的正确性

什么是 Drawer ？

Chrome DevTools 有很多部分，被分为9个 tab (俗称选项卡) ( Elements ， Console ， Sources ， Network ， 等等…) 但是，那仅仅是它的一部分而已！有一组平行的选项卡，被隐藏在主窗口之下。这个组合被称为 Drawer

• 1、如何打开 Drawer ?

当你在 DevTools （任何选项卡）中时，按 [esc] 来显示它，再次按 [esc] 隐藏它

• 2、Animations 检查动画

当你看到一个很酷炫的动画，但它是好几个元素同时变化组成的，这种情况很难通过检索 element 的方式来弄懂它的原理是什么，这时候就可以使用 Drawer 慢速播放、重播或检查动画组的源代码：

动画组 : 动画检查器会根据开始时间（不包括延迟等等）检测哪些动画是相关的并将它们分到一组。换句话说，在同一脚本块中触发就被分为同一组，但如果是异步的，它们将单独分组。

可以选择播放速度的百分比[如果按下蓝色的循环按钮，动画就会循环播放]：

• 3、coverage 代码覆盖率

coverage 可以提供冗余代码的细节信息。使用 Drawer 菜单或者 Command 菜单来打开它

DevTools 的 coverage 工具可以跟踪当前加载的 JS 和 CSS 文件的 哪些行正在被执行 ，并显示 未使用字节的百分比 , 绿色 的线条表示 已使用内容 ， 红 线表示 未使用的内容

• 4、Changes 检查你修改的内容

在 Chrome 里调 CSS 应该是我工作的日常了，但我总是想将 新写的样式 与 最初样式 进行比较，看看到底有什么不一样，这时候就可以使用 Drawer 的 Changes

• 5、在 Chrome 中修改你的文件

我们总是习惯于先在 IDE 或者文本编辑器中修改代码，然后再进入 Chorme 中进行调试，那有没有想过直接就在 Chrome 中来修改我们的代码呢？

代码执行的位置也是最容易编辑代码的位置。如果把项目的文件夹直接拖到 Source 面板， DevTools 会将修改同步到系统文件中。

Workspace 支持即时同步样式，正如我们刚才所说，一旦设置好了 DevTools workspace ，就可以在 Sources 面板中编辑 HTML 和 JavaScript （或者甚至是 TypeScript ，如果你有 sourcemaps ）文件，按 ctrl + s 后它将被保存 在文件系统中。

六、Performance

在这个tab栏下可以记录和分析页面在运行时的所有活动

• 1、移动端设置CPU

在DevTools中，点击 Performance 的 tab。 确保 Screenshots checkbox 被选中；点击 Capture Settings（⚙️）按钮，DevTools会展示很多设置，来模拟各种状况；对于模拟CPU，选择4x slowdown，于是Devtools就开始模拟4倍低速CPU

• 2、录制当前网页运行

一般录制15s就ok了，信息捕获也比较齐全了

点击stop，停止后生成下面数据信息