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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
几种tab切换详解
Feb 03 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 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中的登陆login
2007/01/18 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
PHP之header函数详解
2021/03/02 PHP
Js组件的一些写法
2010/09/10 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python中web框架的自定义创建
2019/09/08 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
南京某公司笔试题
2013/01/27 面试题
Python文件操作的面试题
2013/06/22 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书