先打开百度，然后按 F12 打开后，如果不是 Console 项的就点击 Console 这项，因为我们要在控制台操作。。
看到如下内容：
[img]http://files.jb51.net/file_images/article/201406/2014061811000211.jpg[/img]
好了我们先清空内容，可以右击选 Clear console 菜单，或者输入 clear() 都行。
接着，我们输入 document.getElementById('kw1'); 然后回车，就可以看到 id 为 kw1 的元素信息了。
[img]http://files.jb51.net/file_images/article/201406/2014061811000212.jpg[/img]
是不是很简单。下一步是用 console.dir 查看该元素信息。
输入 console.dir(document.getElementById('kw1')); 然后回车，出来一个奇奇怪怪的东西。
[img]http://files.jb51.net/file_images/article/201406/2014061811000213.jpg[/img]
你可以点这个东西，然后他会展开，列出所有属性方法。简单说就是这个元素的 dom 属性方法。
好了，这个我就不详细说了，反正 dir 方法也是调试利器之一。
这些问题其实是今天内容的一个伏笔，刚才我们看到如何在控制台查看一个元素以及他的属性方法。
其实控制台为我们提供了很多命令行api，简单点说就是只有控制台能用的函数。
目前控制台方法和属性有：(
chrome 34)
[url=http://javascript.ruanyifeng.com/tool/console.html#toc9]console对象#3.命令行API[/url]》 来看下他的一些用法。
我们常用的其实就是 $, $_, $0-$4, dir, keys, values 这些，其他的有兴趣或者想深入学习的，自己去翻阅资料吧。
[url=http://www.soso.com/]http://www.soso.com/[/url] 然后打开控制台。
现在我们通过 $ 来查看 id 为 query 的元素(和百度的 kw1 元素一样都是搜索框)，然后查看该元素的属性方法。
[img]http://files.jb51.net/file_images/article/201406/2014061811000214.jpg[/img]
和刚才一样的功能，但是现在的代码已经非常精简了，用到了 $, dir, $_ 这个三个控制台属性和方法，是不是瞬间让调试变的简单了？
可能有人会说，现在一般用的都是jQuery，要查看这个怎么办？
回到百度，我们来做刚才的那个操作。
[img]http://files.jb51.net/file_images/article/201406/2014061811000215.jpg[/img]
和刚才的有一点点不一样，因为 $('#kw1') 这一步得到的是 jQuery 对象，所以我们dir出来的也是jQuery属性方法。
如果要看真实元素的属性方法，加一个[0]即可
[img]http://files.jb51.net/file_images/article/201406/2014061811000216.jpg[/img]
当然如果你就是要看 jQuery对象，那就完全没问题了。。调试嘛，当然要一边调，一边试啦。。
其实还有一个非常简单的方法，就是点击左上角那个放大镜图标，然后选择那个输入框。
[img]http://files.jb51.net/file_images/article/201406/2014061811000217.jpg[/img]
这样我们可以直接用 $0 进行查看，刚才已经介绍了 $0-$4 了，就是这个功能，简单吧。
我们来简单说下 keys 和 values 吧，这个之后也会用到。。但是有些人还是喜欢直接dir查看。
var obj = {name: '尼玛', age:22, desc: '屌丝一个'};
[img]http://files.jb51.net/file_images/article/201406/2014061811000218.jpg[/img]
相信聪明的你一看就懂，一点就通。
好了，今天的内容差不多就这些了，当然自己要去试一遍，不然没法真正学到这些知识点的。。
要是光看就会了，我们就全是高考状元了，不是么。
最后说个小技巧，就是之前输入过的命令，不必重新输入，可以通过方向键 ↑ 和 ↓ 进行上下查找，这个功能和 cmd 类似哦，非常方便。。
课后练习：（现在直接按F12打开控制台）
1. 查看文章下方 推荐 这个功能所调用的函数源码 (当然你点下推荐也可以哦，我没拦着你。o(∩_∩)o )
2. 定位到函数所在文件位置。(高潮要来了)
3. 修改函数使其无效。(其实就是简单的全局修改调试。)
最后，，如果哪里讲的不对，或者理解不了，或者进度跟不上等等等等，请跟帖吐槽。
还有如果你希望我加入什么内容，或者调试什么真实项目或者插件，也可以跟帖哦，当然如果非常麻烦的项目，我也没办法写文章介绍了，，我又不是文章。。。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
