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

先打开百度,然后按 F12 打开后,如果不是 Console 项的就点击 Console 这项,因为我们要在控制台操作。。
看到如下内容:

好了我们先清空内容,可以右击选 Clear console 菜单,或者输入 clear() 都行。
接着,我们输入 document.getElementById('kw1'); 然后回车,就可以看到 id 为 kw1 的元素信息了。

是不是很简单。下一步是用 console.dir 查看该元素信息。
输入 console.dir(document.getElementById('kw1')); 然后回车,出来一个奇奇怪怪的东西。

你可以点这个东西,然后他会展开,列出所有属性方法。简单说就是这个元素的 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 元素一样都是搜索框),然后查看该元素的属性方法。

和刚才一样的功能,但是现在的代码已经非常精简了,用到了 $, dir, $_ 这个三个控制台属性和方法,是不是瞬间让调试变的简单了?
可能有人会说,现在一般用的都是jQuery,要查看这个怎么办?
回到百度,我们来做刚才的那个操作。

和刚才的有一点点不一样,因为 $('#kw1') 这一步得到的是 jQuery 对象,所以我们dir出来的也是jQuery属性方法。
如果要看真实元素的属性方法,加一个[0]即可

当然如果你就是要看 jQuery对象,那就完全没问题了。。调试嘛,当然要一边调,一边试啦。。
其实还有一个非常简单的方法,就是点击左上角那个放大镜图标,然后选择那个输入框。

这样我们可以直接用 $0 进行查看,刚才已经介绍了 $0-$4 了,就是这个功能,简单吧。
我们来简单说下 keys 和 values 吧,这个之后也会用到。。但是有些人还是喜欢直接dir查看。

代码如下:

var obj = {name: '尼玛', age:22, desc: '屌丝一个'};


相信聪明的你一看就懂,一点就通。

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

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

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

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

时间: 2014-06-17

禁用JavaScript控制台调试的方法

有几个巨头公司,即Facebook和Netflix,决定禁止用户在控制台(console)执行JavaScript命令. 最初这是 由Facebook开始的 ,用于防止恶意用户通过JavaScript控制台执行特定的命令散播消息(发送给所有Facebook用户大量垃圾信息). 当然这受到很多指责,但在我参与之前, 他们使用的代码 如下所示: 复制代码 代码如下: // 看起来 Netflix 似乎是唯 Facebook 马首是瞻 [https://news.ycombinator.com/ite

JS简单实现仿百度控制台输出信息效果

本文实例讲述了JS简单实现仿百度控制台输出信息效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h3>打开控

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

js中输出信息的方法内容如下所示: 1.文档流输出 document.write('hello'); 2.输出信息提示框 模态对话框 window.alert('要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n); 3.信息确认框 var f = window.confirm('是否要进入新浪网'); confirm(""); if(f){ location.href = 'http://www.sina.com.cn'; } 4.提示输入框 windo

利用浏览器的Javascript控制台调试PHP程序

PHP是一种服务器端脚本语言,用来开发动态web应用程序.与JAVA相比,没有一个好的服务器端调试工具是其限制之一.通常我们都是在PHP代码中添加echo.var_dump等语句,将变量.数组的值显示在浏览器中来达到调试的目的. 现在,越来越多的浏览器都有了开发这工具或者Javascript控制台,通过这些工具,我们可以很方便的显示PHP代码中的变量或数组值.下面我们来做一个例子.例子中的PHP代码有四个跟踪级别:info, warn, log, error,开发人员可以使用浏览器控制台来显示错

如何使Chrome控制台支持多行js模式——意外发现

一直以来,Chrome控制台都缺少象IE调试台那样的多行执行模式.  今天意外发现Chrome其实也支持多行模式.默认在Chrome控制台上输入回车后会执行该命令,只需要通过输入Shift+Enter来新建行即可.

一个用js实现控制台控件的代码

复制代码 代码如下: <body margin="0"> </body> <script>     function Console(width,height,command)     {         var container=document.createElement("div");         this.container=container; container.runtimeStyle.width=(width

javascript控制台详解

一.显示信息的命令 console.log(); //控制台输入 网页中不会输出 console.info(); //一般信息 console.debug(); //除错信息 console.warn(); //警告提示 console.error(); //错误提示 "console.log();" 可以用来取代 "alert();" 或 "document.write();" 比如,在网页中写入 "console.log("

javascript中常见的3种信息提示框(alert,prompt,confirm)

1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr

AngularJS 如何在控制台进行错误调试

当我们在编写 AngularJS 的应用时,通过 Chrome, Firefox, 和 IE 的 JavaScript 控制台来获取隐藏在应用之中的数据(Data)和服务(Service) 是一件非常具有挑战性的工作.下面列出了一些简单的小窍门,可以帮助我们使用 Javascript 控制台来监视和控制一个正在运行的 Angular 应用,使其更加容易测试.修改甚至是实时的编写 Angular 应用. 1: 获取 Scopes (作用域) 我们可以使用一行 JS 代码来获取任何的 Scope (

Js 订制自己的AlertBox(信息提示框)

本文制作一个用户自定义的AlertBox,效果如图:js文件中插入如下代码: 复制代码 代码如下: // JScript 文件 // constants to define the title of the alert and button text. var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; // over-ride the alert method only if this a new

jQuery实现信息提示框(带有圆角框与动画)效果

本文实例讲述了jQuery实现信息提示框效果.分享给大家供大家参考.具体如下: 一个jquery提示框特效,黑色风可,且提示框是圆角形状,点击页面中间的几个文字,提示框信息就会动态显示,CSS和JS部分代码比较多. 先来看看运行效果如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

JS实现跟随鼠标的链接文字提示框效果

本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

jquery插件珍藏(图片局部放大/信息提示框)

1.图片局部放大 jQZoom Evolution (演示 | 下载) 2.信息提示框

JS实现关闭当前页而不弹出提示框的方法

本文实例讲述了JS实现关闭当前页而不弹出提示框的方法.分享给大家供大家参考,具体如下: 关闭当前页面,并且打开新页面(不提示) function closeWinAndOpen(url) { var sWinName = "LR"+parseInt(Math.random() * 100000000);//利用随机数处理WinName window.open(url,sWinName, 'toolbar=no,location=no,directories=no,status=yes,

PHP快速生成各种信息提示框的方法

本文实例讲述了PHP快速生成各种信息提示框的方法.分享给大家供大家参考,具体如下: function ShowMsg($msg, $gourl, $onlymsg = 0, $limittime = 0) //系统提示信息 { /* *$msg 信息提示的内容 *$gourl 需要跳转的网址 *$onlymsg 1 表示不自动跳转 0表示自动跳转 *$limittime 跳转的时间 */ global $dsql, $cfg_ver_lang; if (eregi ( "^gb", $

使用Tkinter制作信息提示框

Tkinter是python的GUI模块,内含各种窗口控件,利用其中messagbox可以制作各种信息弹出窗口. 以下是制作信息提示框的代码: import tkinter as tk import tkinter.messagebox def show_warning(msg): tk.messagebox.showwarning("提示", msg) if __name__ == '__main__': show_warning('这是一个信息提示示例') 这段代码存在一个问题,就

AlertBox 弹出层信息提示框效果实现步骤

在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题. 此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新"包装",程序也改成组件的结构. 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 [实现原理] 弹出层的基本原理在仿Lightbox效果中已

Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置.问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下.先上一张对比图好了: js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题.而且由于IE6不支持border-color:transparent的属性,