Chrome Devtool 学习

大家好，又见面了，我是你们的朋友全栈君。

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

断点调试js

source 面板

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

无障碍功能

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

console 面板

Command Line API

$_

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

$0-$4

0、1、2、3 和

$(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面板

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。