Chrome Devtool 学习

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

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

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

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

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

0、1、2、3 和

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

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

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

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

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

代码语言：javascript复制

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

0 人点赞