chrome开发小技巧

1.将你的浏览器变成编辑器

在控制台中输入 document.body.contentEditable=true 回车

2.将变量里的值排列成表格

 

在控制台中输入 console.table(对象)回车

3.检查 DOM 中的元素

 

在控制台中输入inspect($("selector"))回车会检查出与选择器匹配的元素，并跳转到 Elements 面板的指定元素节点，能帮助我们快速查找指定元素的节点！

$0、$1、$2 等等能帮助你取到最近检查的元素。比如， $0 给你返回上次检查的 DOM 元素，$1 返回上上次检查的 DOM 元素。

4.列举元素的属性

 

在控制台中输入dir($("selector"))返回一个对象和与其 DOM 元素关联的所有属性。你可以展开它查看细节。

5.检索最近一个结果的值

你可以把控制台当做计算器。一旦你这么做，你可能需要在计算中使用上一次的计算结果。下面是如何从内存中取到上一次计算的结果。

6.    选取 DOM 元素

 

如果你对 jQuery 很熟悉，你应该知道 $(‘.class’) 和 $(‘#id’) 选择器的重要性。他们通过元素关联的 class 或 id 来选取元素。

 

但当你在 DOM 中无法使用 jQuery 时，你依然可以在开发者控制台中做同样的事情。

 

 

 

$('tagName')、$('.class') 、$('#id') 和 $('.class #id') 相当于document.querySelector('')。它返回选择器在 DOM 中匹配到的第一个元素。你可以使用 $$('tagName') 或 $$('.class') 构建特殊的选择器来选取 DOM 中所有匹配的元素（注意是两个 $ 符号）。这会把结果放入一个数组。你可以继续通过下标在数组中获取到特定的某个元素。

 

举个例子，$$('.className') 将给你返回所有 class 为 className 的元素， $$('.className')[0] 和 $$('.className')[1] 分别给你返回第一个和第二个元素。

 

 

7.    清空控制台和内存

 

在控制台输入 clear()就能清空控制台和内存