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 相关文章推荐
javascript document.images实例
May 27 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 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
php中文字母数字验证码实现代码
2008/04/25 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
深入理解Python中装饰器的用法
2016/06/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python中new方法的详解
2019/01/15 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
土建资料员岗位职责
2014/01/04 职场文书
烹饪自我鉴定
2014/03/01 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技