女王控的博客

Chrome调试技巧

通用篇

复制与保存

copy方法

可以通过全局的方法 copy()consolecopy 任何你能拿到的资源

2019 03 11 19 27 08

存储为一个全局变量

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

第一次使用的话,它会创建一个名为 temp1 的变量,第二次创建 temp2,第三次 … 。通过使用这些变量来操作对应的数据,不用再担心影响到他们原来的值

2019 03 11 19 29 25

保存堆栈信息

大多数情况下都不是一个人开发一个项目,而是一个团队协作,那么如何准确的描述问题,就成为了沟通的关键,这时候 console 打印出来的堆栈跟踪的信息对你和同事来说就起大作用了,可以省去很多沟通成本,所以你可以直接把堆栈跟踪的信息保存为一个文件,而不只是截图发给对方

2019 03 11 19 30 29

直接Copy HTML

几乎所有人都知道,右击或者点击在 HTML 元素边上的省略号 (…) 就可以将它 copy 到剪贴板中,但是你不知道的是:古老的 [ctrl] + [c] 大法依旧可用!

快捷键

切换 DevTools 窗口的展示布局

快捷键 ctrl + shift + D (⌘ + shift + D Mac) 来实现位置的切换(通常是从 开始的位置右边位置, 但是如果一开始就是 右边的位置 那么会切换到 左边的位置

切换 DevTools 的面板

  • 按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板
  • 按下 ctrl + 1ctrl + 9可以直接转到编号1…9的面板(ctrl + 1转到元素面板,ctrl + 4 转到 网络信息面板等等)

递增/递减

通过使用 带有 或者 不带有修饰键上 / 下 箭头按键, 你可以实现递增和递减 0.11 或者 10 这样数值类型的值

ctrl + 上 / 下递增和递减 100,shift + 上 / 下递增和递减 10

elements, logs, sources & network 中的查找

DevTools 中的前4个主要的面板,每一个都支持 [ctrl] + [f] 快捷方式,你可以使用对应的查询方式来查找信息:

  • Elements 面板中 - 通过 string选择器 或者 XPath 来查找
  • 而在 ConsoleNetwork 以及 Source 面板 - 通过区分大小写,或者可以被视为表达式的 strings 来查找

使用 Command

快捷键 Ctrl + Shift + P

截屏

节点截图与全屏截图

2019 03 11 19 39 13

注:节点截图有时会失效,全屏截图暂时没有遇到问题,建议大家使用后者。

快速切换面板

输入 layout ,你会看到 2 到 3 个选项

  • 使用横向面板布局
  • 使用纵向面板布局
  • 使用自动面板布局

快速切换主题

输入 theme 切换主题

代码块的使用

Snippets

它允许你存放 JavaScript 代码到 DevTools 中,方便你复用这些 JavaScript 代码块,进入到 Sources 面板,在导航栏里选中 Snippets 这栏,点击 New snippet(新建一个代码块) ,然后输入你的代码之后保存,大功告成!现在你可以通过右击菜单或者快捷键: [ctrl] + [enter] 来运行它了:

2019 03 11 19 51 46

运行其他来源的代码块

预设了 Snippets 之后,使用 Command Menu 才是最快的方式,只需在它的输入框中输入 ! ,就可以根据名字来筛选预设代码块:

2019 03 11 19 53 43

查找预设代码块 有时候会出现失效的情况

以上更新于2019-3-11 20:02:21


控制台篇

console 中的 &

&0

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

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

你可以尝试一些相关操作(例如: $1.appendChild($0))

2019 03 15 00 13 31

& 和 &&

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话,它在 console 中就是对这一大串函数 document.querySelector 的别名。

如果是 $$ 就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll 并且它返回的是:一个节点的 数组 ,而不是一个 Node list

本质上来说 Array.from(document.querySelectorAll('div')) === $$('div') ,但是document.querySelectorAll('div')$$('div') 哪一种方式更加优雅呢?

2019 03 15 00 17 13

&_

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

这时候 $_ 就派上了用场,$_ 是对上次执行的结果的 引用 :

2019 03 15 00 18 52

&i

现在的前端开发过程,离不开各种 npm 插件,但你可能没有想过,有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件!

有时你只是想玩玩新出的 npm 包,现在不用再大费周章去建一个项目测试了,只需要在 Chrome插件: Console Importer 的帮助之下,快速的在 console 中引入和测试一些 npm 库。

运行 $i('lodash') 或者 $i('moment') 几秒钟后,你就可以获取到 lodash / momentjs 了:

2019 03 15 00 54 24

console.log 的 “bug” ?

一般来说,我们会使用 console.log() 来打印某个对象,并且,两次打印之间,还会对这个对象进行修改,最后我们查看打印的结果发现,修改前的打印和修改后的打印,竟然是一样的?这样出乎意料的情况,让我们难以继续 console.log 的调试。

2019 03 15 00 58 20

打印的时候,两次都是我们修改之后的值?

console 中打印出的对象,在你打印出他内容之前,是以引用的方式保存的。

解决方案

  • 打印一个从这个对象复制出来的对象。
  • 使用资源面中的断点来调试
  • 使用 JSON.stringify() 方法处理打印的结果

以上更新于2019-03-10 19:21:45


异步的 console

console 默认就被 async 包裹

2019 03 16 15 44 35

Storage 系统的占用数和空闲数

await navigator.storage.estimate()

2019 03 16 15 46 14

设备的 电池信息

console.table(await navigator.getBattery())

2019 03 16 15 49 02

媒体能力

2019 03 16 15 51 07

Cache storage keys

2019 03 16 15 55 04

对象 & 方法

queryObjects (对象查询)方法

2019 03 16 16 32 32

DevTools 里的 queryObjects 函数可以展示这些信息

请注意,列表中创建的最后一个对象是不可用的 : 在代码执行后,对于它的引用并没有留存下来,也就是说,我们只有 3 个 person 对象:

2019 03 16 16 33 42

monitor (镜像)方法

monitor 是 DevTools 的一个方法, 它能够让你 “潜入” 到任何 _function calls(方法的调用) 中:每当一个被潜入的方法运行的时候,console 控制台会把它的实例打印出来,包含函数名以及调用它的参数

我们把前面例子里面的 Person 类拿过来,并且给它扩展两个方法:

class Person {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

  greet() {
    return this.getMessage('greeting');
  }
  getMessage(type) {
    if (type === 'greeting') {
      return `Hello, I'm ${this.name}!`;
    }
  }
}

如你所见,greet 方法通过一个特殊的参数来执行 getMessage 方法,让我们看看对 getMessage 方法进行追踪会产生什么结果:


2019 03 18 15 42 13

这样写会省很多 console.log

monitorEvents (镜像事件)方法

2019 03 18 15 43 56

console中骚操作

console.assert

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

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

2019 03 19 14 42 14

通过它,你可以摆脱令人讨厌的 if 表达式,还可以获得堆栈信息。

增强 log 的阅读体验

有时即使你 console.log 一个简单的变量,你可能会忘记(或混淆)哪一个是那个。那当你有不同的变量需要打印的时候,阅读起来会更费劲。

为了让它变得更加易读,你可以打印一个对象,加上 {}

2019 03 19 14 46 09

console.table

如果有一个数组(或者是类数组的对象,或者就是一个对象)需要打印,你可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来。它不仅会根据数组中包含的对象的所有属性,去计算出表中的列名,而且这些列都是可以缩放甚至还可以排序!!!

如果你觉得展示的列太多了,使用第二个参数,传入你想要展示的列的名字:

2019 03 19 14 49 02

table 和 {} 的配合

2019 03 19 14 51 01

console.dir

有时候你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看这个节点所关联到的真实的js对象呢?并且想要查看他的属性等等?

在那样的情况下,就可以使用console.dir:

2019 03 19 14 52 57

给 logs 加上时间戳

2019 03 19 14 53 34

监测执行时间

与其在所有事上展示一个时间戳,或许你对脚本中的特殊的节点之间执行的时间跨度更加感兴趣,对于这样的情况,我们可以采用一对有效的 console 方法

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

如果你想一次记录多件事,可以往这些函数中传入不同的标签值。(例如: console.time(‘loading’) , console.timeEnd(‘loading’) )

2019 03 19 14 56 43

直接在回调中使用 console.log

不仅减少了输入,还可能在回调中接收多个参数

2019 03 19 14 58 18

使用实时表达式

DevTools 在 Console 面板中引入了一个非常漂亮的附加功能,这是一个名为 Live expression 的工具

只需按下 “眼睛” 符号,你就可以在那里定义任何 JavaScript 表达式。 它会不断更新,所以表达的结果将永远,存在 :-)

同时支持定义好几个:

2019 03 19 15 01 21

Network 篇

请求过滤

Network 面板中的过滤器输入框接受字符串或正则表达式,对应显示匹配的请求。 但是你也可以使用它来过滤很多属性。

只需输入 例如 method 或者 mime-type :

2019 03 19 15 08 43

如果想要显示所有可能的关键字,在空白的输入框按下 [ctrl] + [space]

自定义请求表

要自定义显示哪些列,右键单击请求表标题上的任意位置。

2019 03 19 15 11 42

重新发送 XHR 的请求(已过时)

XHR/fetch 断点

在某一特定时刻,你想要对已发送的 “ajax” 请求进行捕获怎么做呢? 可以使用 XHR/fetch breakpoint 。

这些只能在 Source 面板中设置。(我也同样希望可以直接在 Network 面板中设置,但事实并非如此)

2019 03 19 15 19 25

Drawer 篇

检查代码 coverage

实际开发中,你的页面可能并不需要位于尾部的许多代码。也许那是来自外部库的一大块 JavaScript,也许是被遗忘的选择器上的一些 CSS 规则,它们不再匹配任何东西。

使用 coverage 面板来获得关于冗余代码的摘要-细节信息。使用 Drawer 菜单或者 Command 菜单来打开它。

2019 03 19 15 27 40

DevTools 的 coverage 工具可以跟踪当前加载的 JS 和 CSS 文件的哪些行正在被执行,并显示未使用字节的百分比。

它用绿色的线条标记运行和用红色的线条标记未运行。举个例子:

2019 03 19 15 29 35

检查你修改的内容

通过浏览器进行设计和调整 css :能够在代码执行的地方进行调试是方便又有趣的开发方式。 但在某些时候,你可能希望将 已更改的内容 与 最初加载的样式表 进行比较。

为此,可以使用 DevTools’ Drawer 中的更改工具。

2019 03 19 15 31 03

它不仅会使用差异形式的变化(像 Git 这样的源控制工具一样)向你展示,同时还可以撤销它们。

举个例子:

2019 03 19 15 33 54

以上更新于2019-3-19 15:43:42


评论

阅读下一篇

JS构造函数、原型、原型链
2019-03-11 20:03:54
0%