console对象目录开发者工具目前,各大浏览器都自带开发工具。以Chrome浏览器为例,它有一个“开发者工具”(Developer Tools)用来调试网页。 打开“开发者工具”的方法有三种。
打开以后,可以看到在顶端有八个面板卡可供选择,分别是:
这八个面板都有各自的用途,以下详细介绍Console面板,也就是控制台。 console对象console对象代表浏览器的JavaScript控制台。虽然它还不是标准,但是各大浏览器都原生支持,已经成为事实上的标准。 console对象主要有两个作用:
console对象的接口有很多方法,可供开发者调用。 console.log()log方法用于在console窗口显示信息。 如果参数是普通字符串,log方法将字符串内容显示在console窗口。
如果参数是格式字符串(使用了格式占位符),log方法将占位符替换以后的内容,显示在console窗口。
上面代码的%s表示字符串的占位符,其他占位符还有
log方法的两种参数格式,可以结合在一起使用。
console对象的所有方法,都可以被覆盖。因此,可以按照自己的需要,定义console.log方法。
上面代码表示,使用自定义的console.log方法,可以在显示结果添加当前时间。 console.debug(),console.info(),console.warn(),console.error()除了log,console对象还有四个输出信息的方法:
这四个方法的用法与log完全一样。
console.table()对于某些复合类型的数据,console.table方法可以将其转为表格显示。
上面代码的language,转为表格显示如下。
复合型数据转为表格显示的条件是,必须拥有主键。对于上面的数组来说,主键就是数字键。对于对象来说,主键就是它的最外层键。
上面代码的language,转为表格显示如下。
console.assert()assert方法用来验证某个条件是否为真。如果为假,则显示一条事先指定的错误信息。它的格式如下。
使用方法如下。
下面是另一个例子,判断子节点的个数是否大于等于500。
console.time(),console.timeEnd()这两个方法用于计时,可以算出一个操作所花费的准确时间。
time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,console窗口会显示“计时器名称: 所耗费的时间”。 console.group(),console.groupend()这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。 其他方法
命令行API在控制台中,除了使用console对象,还可以使用一些控制台自带的命令行方法。 *(1)$_ * $_属性返回上一个表达式的值。
*(2)$0 - $4 * 控制台保存了最近5个在Elements面板选中的DOM元素,$0代表倒数第一个,$1代表倒数第二个,以此类推直到$4。 *(3)$(selector) * $(selector)返回一个数组,包括特定的CSS选择器匹配的所有DOM元素。该方法实际上是document.querySelectorAll方法的别名。
上面代码打印出网页中所有img元素的src属性。 *(4)$x(path) * $x(path)方法返回一个数组,包含匹配特定XPath表达式的所有DOM元素。
上面代码返回所有包含a元素的p元素。 *(5)inspect(object) * inspect(object)方法打开相关面板,并选中相应的元素:DOM元素在Elements面板中显示,JavaScript对象在Profiles中显示。 *(6)getEventListeners(object) * getEventListeners(object)方法返回一个对象,该对象的成员为登记了回调函数的各种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数。 *(7)keys(object),values(object) * keys(object)方法返回一个数组,包含特定对象的所有键名。 values(object)方法返回一个数组,包含特定对象的所有键值。
(8)monitorEvents(object[, events]) ,unmonitorEvents(object[, events]) monitorEvents(object[, events])方法监听特定对象上发生的特定事件。当这种情况发生时,会返回一个Event对象,包含该事件的相关信息。unmonitorEvents方法用于停止监听。
上面代码分别表示单个事件和多个事件的监听方法。
上面代码表示如何停止监听。 monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。
上面代码表示监听所有key大类的事件。 *(9)profile([name]),profileEnd() * profile方法用于启动一个特定名称的CPU性能测试,profileEnd方法用于结束该性能测试。
*(10)其他方法 * 命令行API还提供以下方法。
debugger语句debugger语句必须与除错工具配合使用,如果没有除错工具,debugger语句不会产生任何结果。 在chrome浏览器中,当代码运行到debugger指定的行时,就会暂停运行,自动打开console界面。它的作用类似于设置断点。
上面代码打印出0,1,2以后,就会暂停,自动打开console窗口,等待进一步处理。 移动端开发(本节暂存此处) 模拟手机视口(viewport)chrome浏览器的开发者工具,提供一个选项,可以模拟手机屏幕的显示效果。 打开“设置”的Overrides面板,选择相应的User Agent和Device Metrics选项。 User Agent可以使得当前浏览器发出手机浏览器的Agent字符串,Device Metrics则使得当前浏览器的视口变为手机的视口大小。这两个选项可以独立选择,不一定同时选中。 模拟touch事件我们可以在PC端模拟JavaScript的touch事件。 首先,打开chrome浏览器的开发者工具,选择“设置”中的Overrides面板,勾选“Enable touch events”选项。 然后,鼠标就会触发touchstart、touchmove和touchend事件。(此时,鼠标本身的事件依然有效。) 至于多点触摸,必须要有支持这个功能的设备才能模拟,具体可以参考Multi-touch web development。 模拟经纬度chrome浏览器的开发者工具,还可以模拟当前的经纬度数据。打开“设置”的Overrides面板,选中Override Geolocation选项,并填入相应经度和纬度数据。 远程除错(1) Chrome for Android Android设备上的Chrome浏览器支持USB除错。PC端需要安装Android SDK和Chrome浏览器,然后用usb线将手机和PC连起来,可参考官方文档。 (2) Opera Opera浏览器的除错环境Dragonfly支持远程除错(教程)。 (3) Firefox for Android 参考官方文档。 (4) Safari on iOS6 你可以使用Mac桌面电脑的Safari 6浏览器,进行远程除错(教程)。 Google Closure(本节暂存此处) Google Closure是Google提供的一个JavaScript源码处理工具,主要用于压缩和合并多个JavaScript脚本文件。 Google Closure使用Java语言开发,使用之前必须先安装Java。然后,前往官方网站进行下载,这里我们主要使用其中的编译器(compiler)。 首先,查看使用帮助。
直接在脚本命令后面跟上要合并的脚本,就能完成合并。
使用--js参数,可以确保按照参数的先后次序合并文件。
但是,这样的运行结果是将合并后的文件全部输出到屏幕(标准输出),因此需要使用--js_output_file参数,指定合并后的文件名。
Javascript 性能测试(本节暂存此处) 第一种做法最常见的测试性能的做法,就是同一操作重复n次,然后计算每次操作的平均时间。
上面代码的问题在于,由于计算机的性能不断提高,如果只重复6次,很可能得到0毫秒的结果,即不到1毫秒,Javascript引擎无法测量。 第二种做法另一种思路是,测试单位时间内完成了多少次操作。
这种做法的注意之处在于,测试结构受外界环境影响很大,为了得到正确结构,必须重复多次。 参考链接
|
|