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


Posted in Javascript onJune 18, 2014

先打开百度,然后按 F12 打开后,如果不是 Console 项的就点击 Console 这项,因为我们要在控制台操作。。
看到如下内容:
js调试系列 控制台命令行API使用方法
好了我们先清空内容,可以右击选 Clear console 菜单,或者输入 clear() 都行。
接着,我们输入 document.getElementById('kw1'); 然后回车,就可以看到 id 为 kw1 的元素信息了。
js调试系列 控制台命令行API使用方法
是不是很简单。下一步是用 console.dir 查看该元素信息。
输入 console.dir(document.getElementById('kw1')); 然后回车,出来一个奇奇怪怪的东西。
js调试系列 控制台命令行API使用方法
你可以点这个东西,然后他会展开,列出所有属性方法。简单说就是这个元素的 dom 属性方法。
好了,这个我就不详细说了,反正 dir 方法也是调试利器之一。

这些问题其实是今天内容的一个伏笔,刚才我们看到如何在控制台查看一个元素以及他的属性方法。
其实控制台为我们提供了很多命令行api,简单点说就是只有控制台能用的函数。
目前控制台方法和属性有:(chrome 34)

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

ps: 至于怎么查看这些东西,以后会讲,暂时怕各位理解不了。
你也可以参阅 《console对象#3.命令行API》 来看下他的一些用法。

我们常用的其实就是 $, $_, $0-$4, dir, keys, values 这些,其他的有兴趣或者想深入学习的,自己去翻阅资料吧。

$ // 简单理解就是 document.querySelector 而已。

$$ // 简单理解就是 document.querySelectorAll 而已。

$_ // 是上一个表达式的值,console对象#3.命令行API 里有说明。

$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。

dir // 其实就是 console.dir

keys // 取对象的键名, 返回键名组成的数组

values // 去对象的值, 返回值组成的数组

好了,从解释上来说确实不难理解,但是没操作过,谁也不知道会发生什么。

该死的百度,竟然加载了 jQuery 1.10.2,本来说百度环境干净,比较合适讲这个,结果尼玛坑啊。。
我们换soso来讲解好了。。打开 http://www.soso.com/ 然后打开控制台。
现在我们通过 $ 来查看 id 为 query 的元素(和百度的 kw1 元素一样都是搜索框),然后查看该元素的属性方法。
js调试系列 控制台命令行API使用方法
和刚才一样的功能,但是现在的代码已经非常精简了,用到了 $, dir, $_ 这个三个控制台属性和方法,是不是瞬间让调试变的简单了?
可能有人会说,现在一般用的都是jQuery,要查看这个怎么办?
回到百度,我们来做刚才的那个操作。
js调试系列 控制台命令行API使用方法
和刚才的有一点点不一样,因为 $('#kw1') 这一步得到的是 jQuery 对象,所以我们dir出来的也是jQuery属性方法。
如果要看真实元素的属性方法,加一个[0]即可
js调试系列 控制台命令行API使用方法
当然如果你就是要看 jQuery对象,那就完全没问题了。。调试嘛,当然要一边调,一边试啦。。
其实还有一个非常简单的方法,就是点击左上角那个放大镜图标,然后选择那个输入框。
js调试系列 控制台命令行API使用方法
这样我们可以直接用 $0 进行查看,刚才已经介绍了 $0-$4 了,就是这个功能,简单吧。
我们来简单说下 keys 和 values 吧,这个之后也会用到。。但是有些人还是喜欢直接dir查看。

var obj = {name: '尼玛', age:22, desc: '?潘恳桓?};

js调试系列 控制台命令行API使用方法
相信聪明的你一看就懂,一点就通。

好了,今天的内容差不多就这些了,当然自己要去试一遍,不然没法真正学到这些知识点的。。
要是光看就会了,我们就全是高考状元了,不是么。

最后说个小技巧,就是之前输入过的命令,不必重新输入,可以通过方向键 ↑ 和 ↓ 进行上下查找,这个功能和 cmd 类似哦,非常方便。。

课后练习:(现在直接按F12打开控制台)
1. 查看文章下方 推荐 这个功能所调用的函数源码 (当然你点下推荐也可以哦,我没拦着你。o(∩_∩)o )
2. 定位到函数所在文件位置。(高潮要来了)
3. 修改函数使其无效。(其实就是简单的全局修改调试。)

最后,,如果哪里讲的不对,或者理解不了,或者进度跟不上等等等等,请跟帖吐槽。
还有如果你希望我加入什么内容,或者调试什么真实项目或者插件,也可以跟帖哦,当然如果非常麻烦的项目,我也没办法写文章介绍了,,我又不是文章。。。

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
js调试系列 初识控制台
Jun 18 #Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 #Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 #Javascript
javascript setinterval 的正确语法如何书写
Jun 17 #Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
php数组编码转换示例详解
2014/03/11 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
深入理解Python中装饰器的用法
2016/06/28 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python修改FTP服务器上的文件名
2019/09/11 Python
详解Django admin高级用法
2019/11/06 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
如何理解python面向对象编程
2020/06/01 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
《春到梅花山》教学反思
2014/04/16 职场文书
医院护士工作检讨书
2014/10/26 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
初中班干部工作总结
2015/08/10 职场文书
《迟到》教学反思
2016/02/24 职场文书
同学聚会开幕词
2019/04/02 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
详解jQuery的核心函数和事件处理
2022/02/18 jQuery