Chrome Devtool 学习

虽然devtool一直在用，可是平时使用的也就那几个功能，最近看了一遍谷歌官方的DevTool文档。主要记录一些平时没怎么用过的地方。

断点调试js

断点类型	使用目的
Line-of-code	在精确的某一行
Condition line-of-code	在某一行，但是只有特定情况下才触发
DOM	在特定DOM节点或者他的子节点改变时触发
XHR	when an XHR URL contains a string pattern
事件监听
异常	当代码抛出异常时触发
函数	特定函数被调用时

source 面板

• 在source面板中可以编辑CSS和JS文件，CSS文件在编辑后立即生效，JS文件需要按下Control+S之后生效。值得注意的是应用JS的更改时，不是重新加载整个JS，而是只重新加载变化的函数

无障碍功能

审计（audit）一个页面的无障碍功能

console 面板

Command Line API

$_

$_返回最近计算的表达式的值

$0-$4

$0、$1、$2、$3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象的历史参考

$(selector)

$(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。此函数等同于 document.querySelector() 函数。

如果使用了第三方库，比如jQuery，则此功能将会被覆盖。

$$(selector)

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll()。

$x(path)

$x(path) 返回一个与给定 XPath 表达式匹配的 DOM 元素数组

table(data[, columns])

通过传入含可选列标题的数据对象记录具有表格格式的对象数据。例如，要在控制台中显示使用 table 的名称列表，需要执行：

var names = {
	0: { firstName: "John", lastName: "Smith" },
	1: { firstName: "Jane", lastName: "Doe" }
};
table(names);

performance面板