Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Web控制台帮助

命令列表

下面是由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节点的内容更好用,但是这也是一个不错的选择。

文档标签和贡献者

 此页面的贡献者: xupingmao
 最后编辑者: xupingmao,