Chrome控制台使用技巧

1、经常使用功能

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

• 二、copy和saving

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

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

• 三、快捷键

Chrome 中有些快捷键对于咱们提高工做效率仍是有的：

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

• 四、截图

当你只想对某一个 DOM 节点截图时，大几率会用工具弄半天，但如今不须要了：直接选中那个节点，打开 Command 菜单而且使用 节点截图 的就能够了。你觉得这就是所有了吗？你还能够用这种方式 全屏截图 - 经过 Capture full size screenshot 命令。请注意，这里说的是全屏，并非嵌入页面的一部分。

ctrl + shift + P 
Capture full size screenshot
复制代码

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

若是我想看看，当前页面内全部 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] 来运行你刚刚保存的脚本吧
复制代码

2、Elements

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

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

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

• 二、拖动 & 放置 元素

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

• 三、在元素面板中展开全部的子节点

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

3、Console

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

console中的 $

• 一、$0

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

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

• 二、$ 和 $$

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

• 三、$_

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

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

console中的异步

• 一、Promise的处理

• 二、一些异步的系统api

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

console的打印方式

• 一、log

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

• 二、table

将打印信息展现成表格

• 三、time

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

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

四、assert

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

console.log直接做为回调

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

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

原本在回调中打印回调信息以下：

getName(v => console.log(v))
复制代码

直接将console.log做为回调

getName(console.log)
复制代码

4、Network

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

• 一、经常使用选项分别的功能

Preserve log    （保留）日志，在何时会用到呢？当须要记录页面刷新先后的 log 或者是页面跳转先后的 log 来进行对比调试的时候
Disable catch   不缓存
Online          能够切换网速测试
Hide data Urls  隐藏数据Url
All             查看全部请求
xhr             查看xml的http的request
复制代码

• 二、从新发送 XHR 的请求

• 三、禁止请求

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

5、Source

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

什么是 Drawer ？

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

• 一、如何打开 Drawer ?

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

• 二、Animations 检查动画

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

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

能够选择播放速度的百分比[若是按下蓝色的循环按钮，动画就会循环播放]：

• 三、coverage 代码覆盖率

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

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

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

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

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

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

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

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

6、Performance

在这个tab栏下能够记录和分析页面在运行时的全部活动

• 一、移动端设置CPU

在DevTools中，点击 Performance 的 tab。 确保 Screenshots checkbox 被选中；点击 Capture Settings（⚙️）按钮，DevTools会展现不少设置，来模拟各类情况；对于模拟CPU，选择4x slowdown，因而Devtools就开始模拟4倍低速CPU

• 二、录制当前网页运行

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

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