js调试系列控制台命令行API用法

先打开百度，然后按F12打开。如果不是控制台项目，请单击控制台项目，因为我们希望在控制台中操作。见下：。

好的，我们先把里面的东西清理一下。您可以右键单击清除控制台菜单或输入清除()。然后，我们输入document . getelementbyid(' kw1 ')；然后按回车键，可以看到id为kw1的元素信息。

不是很简单吗？下一步是使用console.dir查看元素信息。输入console . dir(document . getelementbyid(' kw1 '))；然后进了车，奇怪的东西出来了。

您可以单击此项，然后它将展开并列出所有属性方法。简单来说，就是这个元素的dom属性方法。好了，这个我就不细说了。反正dir方法也是调试工具之一。

这些问题其实是今天内容的铺垫。刚才，我们看到了如何在控制台中查看一个元素及其属性方法。实际上，控制台为我们提供了许多命令行API，它们只是只有控制台才能使用的功能。目前控制台的方法和属性有：(chrome 34)。

复制代码如下： ['$ $ '，' $ x '，' dir '，' dirxml '，' key '，' values '，' profile '，' profile end '，' monitor events '，' unmonitor events '，' inspect '，' Copy '，' clear 'getEventListeners '，' undebug '，' monitor '，' unmonitor '，' table '，' $0 '，' $1 '，' $2 '，' $3 '，' $4 '，' $_']

Ps:至于如何看待这些事，我以后再说，只是怕你们暂时不明白。也可以参考《console对象#3.命令行API》看看他的一些用法。

我们通常使用的实际上是$、$_、$0-$4、dir、key、values等。对于其他感兴趣或想深入学习的人，可以自己阅读材料。

复制代码如下：$ //简单来说就是document . queryselector $ $//简单理解就是document . queryselectorall $ _//就是前面表达式的值，在控制台对象#3的命令行API中有描述。$0-$4 //是最后五个Elements面板选择的DOM元素，这将在后面讨论。Dir //其实就是console.dirkeys //取对象的键名，返回由键名组成的数组值//去掉对象的值，返回由返回值组成的数组。

嗯，从解释上来说不难理解，但是没有人知道不操作会发生什么。

该死的百度，它加载了jQuery 1.10.2。本来说百度的环境干净，说这个比较合适，结果是尼玛坑。让我们换个搜搜来解释。打开http://www.soso.com/，然后打开控制台。现在，我们使用$来查看id为query的元素(这是类似百度的kw1元素的搜索框)，然后查看这个元素的属性方法。

它的功能和以前一样，但是现在代码已经非常简化了，使用了三个控制台属性和方法，$、dir和$ _，这让调试在瞬间变得更容易了？有人可能会说现在普遍使用jQuery。我应该怎么检查这个？回到百度，我们做一下刚才的操作。

它与前一个有点不同，因为$(“# kw1”)获得了一个jQuery对象，所以我们导出的也是一个jQuery属性方法。如果想看实元素的属性方法，加一个[0] 。

当然，如果您只想查看jQuery对象，这完全没问题。调试，当然你要边调试边试。其实有一个很简单的方法，就是点击左上角的放大镜图标，然后选择输入框。

这样，我们就可以直接用$0进行查看了。刚才我们介绍了0-4美元。这就是功能。很简单。让我们简单地谈谈键和值，这将在后面使用。但是，有些人还是更喜欢直接在dir中检查。

复制的代码如下：var obj={name:' Nima '，age:22，desc: '屌丝one ' }；

我相信聪明的人一眼就能看懂，稍微沟通一下就可以了。

好了，今天就到这里。当然，你还得再试一次，否则你真的学不到这些知识点。如果我们能只看一眼，我们都将是高考的尖子生，不是吗？

最后，一个小技巧是不需要重新输入之前输入的命令，但是可以使用箭头键和上下搜索。这个功能类似于cmd，非常方便。

课后练习：(现在直接按F12打开控制台)1。查看文章底部推荐这个函数调用的函数的源代码(当然可以点击推荐，但是我没有阻止你。O(_)o )2。找到函数的文件位置。(高潮来了)3。修改函数使其无效。(其实就是简单的全局修改和调试。)

最后，如果你说的不对，或者你听不懂，或者你跟不上进度等。请随帖吐槽。如果你想让我添加一些东西，或者调试任何真实的项目或插件，你也可以发布它。当然，如果是很麻烦的项目，我也不能写文章介绍。我不是文章。