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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JS正则表达式常见用法实例详解
Jun 19 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 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 md5下16位和32位的实现代码
2008/04/09 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js分页工具实例
2015/01/28 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python实现图书借阅系统
2019/02/20 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2014年财政工作总结
2014/12/10 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
运动会广播稿50字
2015/08/19 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
redis复制有可能碰到的问题汇总
2022/04/03 Redis