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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
js完整倒计时代码分享
Sep 18 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 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 身份证号验证函数
2009/05/07 PHP
PHP7内核之Reference详解
2019/03/14 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
初任培训自我鉴定
2013/10/07 职场文书
教学器材管理制度
2014/01/26 职场文书
高中体育教学反思
2014/01/29 职场文书
迎新晚会邀请函
2014/02/01 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
乐山大佛导游词
2015/02/02 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL