命令列表
下面是由web控制台提供的JavaScript命令,这些命令可以提供简化一些特定工作的辅助功能。
$()
- 查找一个CSS选择器的字符串, 返回第一个匹配的元素. 相当于
document.querySelector()
或者调用该页面的$函数(在它存在的前提下). $$()
- 查找一个CSS选择器的字符串, 返回与一个他匹配的所有DOM元素组成的数组. 它是
document.querySelectorAll()
的简化写法. $0
- 当前页面中,正在检查的元素.
$x()
- 求出一个XPath表达式的值而且返回一个包含所有匹配节点的数组。
keys()
- 给出一个对象, 返回该对象的键或者属性的列表. 这是Object.keys简写.
给出一个对象, 返回该由对象的属性或者键值组成的数组; 相当于keys().
clear()
- 清除控制台区域.
inspect()
- 给出一个对象, 为该对象打开对象查看器.
pprint()
- 用更可读的方法来格式化一个指定的值;当显示对象或数组的内容时这是一个很好的方法。
help()
- 显示帮助文本。事实上,在一串有趣的递归之后,它会把你带到这个页面(^_^)。
cd()
- 切换JavaScript执行域到该页面的一个不同的iframe子页面。详情请查看 working with iframes.
- 请参照 Console API 获取更多关于该内容的详细信息。
示例
例1: 查看DOM节点的内容
假如你有一个DOM节点叫做'title'. 事实上,你正在阅读的这个页面恰好有一个,所以你可以打开web控制台,尝试下面的内容。
让我们先来看看调用$()和inspect()方法之后返回节点的内容:
inspect($("#title"))
这会使浏览器自动打开对象查看器,为你显示匹配CSS选择器'#title'的节点,当然就是拥有’title'的ID的元素啦。
例2: 显示DOM节点的内容
如果你坐在浏览器面前发现了一些问题,那一点问题都没有,但是比如你正在为一名用户远程调试,需要看一下一个节点的内容。你可以让你的用户打开他/她的浏览器的web控制台,使用pprint()函数,把节点的内容显示到控制台的窗口里,然后让他把文字复制之后粘贴到电子邮件里发送给你。
pprint($("#title"))
这可以把节点的内容提取出来让你查看。当然, 也许通过使用其他的对象比查看DOM节点的内容更好用,但是这也是一个不错的选择。