写在最开头：其实我以前就在考虑要不要写这个东西，因为这个东西确实不难，但是为什么会有这么多人问，他们问的不是怎么用控制台，而是不知道控制台能干嘛，他们也知道有 console.log 之类的东西，但他们不知道为什么要用这么长的字符串代替 alert 输出信息。在他们眼里 alert 足以。好吧，我承认小小的吐槽了下，不过这个系列我只打算介绍下调试的基本知识，不会涉及太深，因为深入的东西结合js知识，如果你js没到一个境界，我就算教你调试bug，破解一些插件之类的，你也根本不知道我在做什么。我的目的只是让你认识控制台，让你入门调试，之后的路还得靠你们自己走。 当然大侠请飘过，或者吐槽一下也行。。 js调试系列目录： 其实做web开发的都知道这东西，不论是前端还是后台，但是很多人只停留在html查看和css修改上，完全没有把控制台利用起来。 说不定有些刚入门的还不知道有这东西呢。。 这东西的资料网上一抓一大把，但是都没有讲调试方面的，只是介绍基本的怎么用而已。。 不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等，只要按 F12 就能打开控制台。 我们的文章以 chrome 为例讲解，不为什么，因为我喜欢 chrome 而已。。萝卜白菜各有所爱。。 ps: ff 以前都是firebug的天下，现在原生的也非常不错了。 现在我们按一下 F12 打开控制台，点击 Console 这一项。 [img]http://files.jb51.net/file_images/article/201406/201406181042323.jpg[/img] 可以看到我的头像和几行文字，不过下面还有几行东西，我们暂时先忽略，以后会讲解的。 其实对于这 F12 而言，最确切的叫法是开发人员工具，Console 这一项才是控制台。 PS：做为基础教程，我只介绍 Console 和 Sources 方面的调试，其他功能自己去了解吧。。 点击右键的 Clear console 菜单 或者 输入 clear() 然后按回车即可清空控制台内容。 我们进行第一步用 console.log 输出信息吧。 分别输入 console.log("hehe..") 和 console.log("hehe..", "haha..") 然后按回车，可以在控制台看到输出结果。 [img]http://files.jb51.net/file_images/article/201406/201406181042324.jpg[/img] 其实就是输出信息而，非常简单，用他代替 alert 和 document.write 调试，你的工作会变的非常轻松的。 例如调试一个循环这部分的代码，可是数组里却有几十个甚至上百个元素，alert 的话你会点疯掉的， document.write 也不是不行，但是对于对象输出，你只能看到 [object Object] 这样的东西。 这是很多新人朋友遇到的真实问题。 如果用 console.log 代替 alert document.write 输出对象信息，可以在控制台展开这对象查看具体信息。 例如： [img]http://files.jb51.net/file_images/article/201406/201406181042325.jpg[/img] 可以直接看到对象信息，而不会显示 [object Object] 令我们一头雾水。 [img]http://files.jb51.net/file_images/article/201406/201406181042326.jpg[/img] 是不是突然觉得 console.log 屌爆了？ 其实这只是他的冰山一角而已，我会尽量把他的一些优势都展现给你们看。 继续刚才的步骤，现在我们直接输入 arr 然后回车。 [img]http://files.jb51.net/file_images/article/201406/201406181042327.jpg[/img] 是不是更吊了，现在可以直接点击 Object 展开这个数组内的对象进行查看了，连循环输出都省了。 这就是控制台的魅力，而且这只是他最基础的功能而已。 我们先来认识下 console 对象下还有那些方法供我们使用吧。 输入 console 然后回车，展开这个对象， [img]http://files.jb51.net/file_images/article/201406/201406181042328.jpg[/img] 可以看一些深色和浅色的东西，深色的就是我们可以直接调用的方法了，浅色的表示默认属性或方法，展示无需关心，以后有机会再说。 其实常用的只有 log dir 而已，其他真心很少用，到高级调试才会用上。 group，table 之类的辅助性质，可用可不用，看你喜好了。我不太喜欢用。 我们走一步看一步吧，反正先从 log dir 说起，大部分的调试就靠他们了。 PS：其实应该给你们官方文档的，可是最近谷歌打不开，所以自行百度查看各个方法的功能吧。 找到个中文版，还不错，各位看先《[url=http://javascript.ruanyifeng.com/tool/console.html]console对象[/url]》。 来几个课后练习：(先打开百度，然后打开控制台) 1 在控制台查看 ID 为 kw1 的元素信息 2 然后用 console.dir 方法查看 kw1 元素的信息