Chrome Devtools的调试技巧

发布于 2020-05-23 浏览器效率

Chrome-DevTools

前言

我们每天都在写 ~~bug~~ 代码，那么拥有一身流畅的调试本领是十分重要的，下面是我总结一些实用的调试技巧，使无论在开发环境、生产环境都能够第一时间定位问题

正文

下面你将了解

$
$$
$0~$4
$_
console.table
Store as global
copy()
Snippets
断点调试
command 菜单
常用快捷键

Console面板-“$”

Console 面板是我们最喜欢打开的面板之一，可以用来查看输出的信息以及查询 api

$ 在 JQuery 它是选择器，那么在 Console 面板中它是 document.querySelector的简写

$的用法

$$ 是 document.QuerySelectorAll 的简写，并且返回的是一个数组，而不是一个 Node List

$$的用法

$0 是最后选择的 DOM 元素, $1是相对$0再上一个选择的元素，$3、$4 同理

$0~$4的用法

$_与元素无关，它是控制台最后输出的值

$_的用法

当 $ 遇上 Vue, 我们很轻松能够访问 Vue 的实例对象，尤其是在【生产环境】，没有 Vue.js devtools的时候，定位问题十分方便

$与Vue

Console面板-通用

console.table 以表格形式展示数据，能够更清楚展示对象及数组

console.table的用法

copy() 指定内容到剪贴板, 如 copy($_)等

copy()的用法

Store as global 为对象或者数组取名字，在小三角处右键即可。方便后续调用以及或者 copy()

Store as global

Snippets(代码块)

相信不少人吐槽 Console 面板的换行问题，那么大可把代码移步至 Sources - Snippets
可以正常换行、格式化代码、运行代码、持久储存在浏览器中
Snippets + Console 面板 = 自带 API 的 JavaScript 编辑器
平时刷题，尤其是算法题时，能少打开一个应用就少打开一个应用😚