js调试系列了解控制台

一开始：其实我之前也在想要不要写这个东西，因为这个东西真的不难，但是为什么这么多人问，不知道怎么用控制台，不知道控制台能做什么，也知道有console.log这样的东西，但是不知道为什么要用这么长的字符串来代替alert输出信息。在他们眼里，警惕就足够了。好吧，我承认我吐槽了一点，但是我只打算介绍这个系列中调试的基础知识，不会讲太多，因为深入的东西是和js知识结合在一起的。如果你的js没有达到一个水平，即使我教你调试bug，破解一些插件，你也完全不知道我在做什么。我的目的是让你了解控制台，让你开始调试，然后你自己去。

当然，请随波逐流，或者吐出来。

Js调试系列目录：

其实每个做web开发的人都知道这个东西，不管是前端还是后端，但是很多人只停留在html查看和css修改上，根本不会使用控制台。可能有些初学者还不知道。网上有很多关于这个东西的信息，但是没有一个是讲调试的，只是基本介绍一下怎么用。

无论是Chrome火狐IE(8版以上)还是360快浏览器搜狗浏览器，只需按F12即可打开控制台。我们的文章以chrome为例，为什么不呢，因为我就是喜欢chrome。卷心菜有它自己的味道。Ps: ff以前是萤火虫的世界，现在原版也很不错。

现在我们按F12打开控制台，并单击控制台项目。

你可以看到我的头像和几行字，但是下面还有几行，我们暂时忽略，以后再解释。其实对于F12来说，最准确的称呼是开发者工具，Console就是控制台。PS:作为基础教程，我只介绍Console和Sources的调试。自己学习其他功能。

单击右键清除控制台菜单或输入清除()，然后按回车键清除控制台内容。让我们迈出第一步，使用console.log输出信息。输入console.log('呵呵.')和console.log('呵呵.'，‘哈哈.’)，然后按回车键在控制台中查看输出结果。

其实输出信息很简单。如果你用它来代替alert和document.write调试，你的工作将变得非常容易。

比如调试一个循环的代码，但是数组中有几十个甚至上百个元素。如果你警惕，你会发疯的，document.write也不是不可能，但是对于对象输出，你只能看到像[object Object]这样的东西。这是很多新朋友遇到的现实问题。

如果使用console.log而不是alert document.write来输出对象信息，则可以在控制台中展开此对象以查看特定信息。例如：

Var arr=[{name:' Nima '，年龄： 22}，{name: '倪梅'，年龄： 20 }]；for(var I=0；长度；I){ console . log(arr[I])；}

我们可以直接看到对象信息，而不显示[object Object]，这让我们很困惑。

你是不是突然觉得console.log很牛逼？其实这只是他的冰山一角。我将尽力向你展示他的一些优点。继续上一步，现在我们直接输入arr，然后输入。

是不是更让人担心？现在可以直接点击Object展开这个数组中的对象进行查看，甚至保存循环输出。这就是控制台的魅力所在，而这只是它最基本的功能。

让我们首先了解控制台对象下还有哪些其他方法可用。进入控制台并按回车键展开此对象。。

你可以看到黑暗和光明的东西。深色是我们可以直接调用的方法，浅色表示默认的属性或方法。你不需要关心显示器。我们以后有机会再谈。其实常用的只有log dir，其他诚意很少用，要等到高级调试才会用。群组、表格和其他辅助属性，可用与否取决于您的偏好。我不是很喜欢。

让我们一步一步来。总之，让我们从日志目录开始。大多数调试都依赖于它们。PS:其实应该给你官方文档，但是最近谷歌打不开，所以百度查一下每个方法的功能。

我找到了中文版，还不错。请先阅读《console对象》。

课后几个练习：(先打开百度，再打开控制台)1在控制台查看ID为kw1的元素的信息，然后使用console.dir方法查看kw1元素的信息。