一& 什么是 Console
Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 Console 对象，使用该对象
可以输出信息到 Console 窗口中。
二& 什么支持 Console
很多人可能都知道
和 (FireBug)中都支持 Console。而其他浏览器都支
持不好。比如 IE8 自带的开发工具虽然支持 Console，但功能比较单调，显示对象的时候都是显示
[Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar，但也
不支持 console。Safari、Opera 都支持 Console，但使用上都没有 FireBug和 Chrome 的方便。
& 现在firebug推出了 firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug
几乎一样。详见 /firebuglite
& 后面的所有 demo 除特别说明外，都是使用 firebuglite在 IE8 下的测试截图。
三& 为什么不直接使用 alert 或自己写的 log
/**/& 作者& 熊星
使用 alert 不是一样可以显示信息，调试吗？alert 弹出窗口会中断程序，
如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。
& 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console
的介绍就知道了。
四& Console.log(object[, object, ...])
Console.log 是最简单输出信息到 console 窗口的方法，支持多个参数，该方法会把
这些参数组合在一起显示，e.g：
Log 方法第一个参数支持类似 C 语言 printf 替换模式，比如上面的列子可以这样写：
Log 支持下面几种替换模式：
%s& 代替字符串
%d& 代替整数
%f& 代替浮点值
%o& 代替 Object
五& console.debug，info，warn，error
这 4 种方法与 log 方法使用一模一样，只是显示的图标和文字颜色不一样，e.g
六& console. assert(expression[, object, ...])
assert 方法类似于单元测试中的断言，当 expression 为 false 的时候，输出后面的信息,e.g：
注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持
七& console.clear()
该方法清空 console 中的所有信息
八& console.dir(object)
以列表的方式打印 object 对象中的所有属性，e.g：
九& console.dirxml(node)
把 html 的html 代码打印出来，e.g:
十& console.trace()
trace 方法可以查看当前函数的调用堆栈信息，即当前函数是如何调用的，e.g:
十一& console.group(object[, object, ...]), groupCollapsed, groupEnd
这 3 个函数用于把 log 等输出的信息进行分组，方便阅读查看。groupCollapsed
&&& 方法与 group 方法一样，只是显示的分组默认是折叠的,e.g:
十二& console.time(name)/console.timeEnd(name)
我们经常需要测试 js 函数的执行时间，可能我们自己写代码在第1 条语句和
最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能，time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器，并显示时间。e.g:
十三& console.profile(name)/console.profileEnd()
这组方法用于打开浏览器的分析器，用于分析这组函数之间的 js 执行情况，
注：firebuglite 不支持 profile 功能，上图是 FireBug 的截图，Chrome 支持 profile，但分析的内容不 一样，感兴趣的同学可以自己研究下。
十四& console.count([title])
count 方法用于统计当前代码没执行过多少次，title 参数可以在次数前面输出
额外的标题以帮助阅读，e.g:
注： firebuglite 不支持 count 方法，上述代码在 Chrome 中会打印 1000 次，显示没有 FireBug 那么友好。
十五& console.exception(error-object)
exception 方法用于打印异常对象，与 log 打印不一样是，except ion 还会打印
该异常调用的堆栈信息，e.g:
注：exception 方法是 FireBug 独有的方法，Chrome 和 firebuglite 都不支持。
十六& console.table(data)
table 方法把data 对象用表格的方式显示出来，这在显示数组或者格式一样的
JSON 对象的时候非常有用。e
注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。
& Console 是帮助我们学习和调试 JS的 1 个非常好工具，如果你以前没用过，哪现在就开始用它吧。你 会发现它能帮你省很多开发时间的。查看: 5630|回复: 2
九个Console命令，让js调试更简单
该用户从未签到
本帖最后由 yetaoaiueo 于
11:35 编辑
一、显示信息的命令
&!DOCTYPE html&
&html&
&head&
& &&title&常用console命令&/title&
& &&&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&/head&
&body&
& &&&&script type=&text/javascript&&
& && && &console.log('hello');
& && &&&console.error('错误');
& && &&&console.warn('警告');
& &&&&/script&
&/body&
&/html&复制代码
最常用的就是console.log了。
二：占位符console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）
&script type=&text/javascript&&
& &console.log(&%d年%d月%d日&,);
&/script&
复制代码
07235.jpg (32.92 KB, 下载次数: 66)
10:32 上传
三、信息分组
&!DOCTYPE html&
&html&
&head&
&&&title&常用console命令&/title&
& &&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&/head&
&body&
& & &script type=&text/javascript&&
& && &&&console.group(&第一组信息&);
& &&&　　console.groupEnd();
　　& & console.group(&第二组信息&);
& & 　　　　console.log(&第二组第一条:程序爱好者QQ群： &);
& &&&　　　　console.log(&第二组第二条:欢迎你加入&);
　　& & console.groupEnd();
& & &/script&
&/body&
&/html&复制代码
23537.jpg (101.57 KB, 下载次数: 55)
10:36 上传
四、查看对象的信息
console.dir()可以显示一个对象所有的属性和方法。
&script type=&text/javascript&&
& && && &var info = {
& && && && & QQGroup:,
& && && && &message:&程序爱好者欢迎你的加入&
& && &&&};
& && &&&console.dir(info);
&/script&复制代码
35112.jpg (53.94 KB, 下载次数: 59)
10:40 上传
五、显示某个节点的内容
console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
&!DOCTYPE html&
&html&
&head&
& &&title&常用console命令&/title&
& && &&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&/head&
&body&
& &&&&div id=&info&&
& && && &&p&程序爱好者:,欢迎你的加入&/p&
& &&/div&
& & &script type=&text/javascript&&
& && & var info = document.getElementById('info');
& && & console.dirxml(info);
& &&&&/script&
&/body&
&/html&复制代码
02343.jpg (93.75 KB, 下载次数: 53)
10:42 上传
六、判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
&script type=&text/javascript&&
　　var result = 1;
& &　　console.assert( result );
& &&&　　var year = 2014;
& & 　　console.assert(year == 2018 );
& &&/script&复制代码
1是非0值，是真；而第二个判断是假，在控制台显示错误信息
13531.jpg (49.05 KB, 下载次数: 68)
10:44 上传
七、追踪函数的调用轨迹。
console.trace()用来追踪函数的调用轨迹。
&script type=&text/javascript&&
/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
　　function add(a,b){
& && &&&console.trace();
　　　　return a+b;
　　var x = add3(1,1);
　　function add3(a,b){return add2(a,b);}
　　function add2(a,b){return add1(a,b);}
　　function add1(a,b){return add(a,b);}
&/script&复制代码
控制台输出信息：
21351.jpg (79.05 KB, 下载次数: 52)
10:48 上传
八、计时功能
console.time()和console.timeEnd()，用来显示代码的运行时间。
&script type=&text/javascript&&
　　console.time(&控制台计时器一&);
　　for(var i=0;i&1000;i++){
　　　　for(var j=0;j&1000;j++){}
　　}
　　console.timeEnd(&控制台计时器一&);
&/script&复制代码
运行时间是38.84ms
34190.jpg (46.33 KB, 下载次数: 64)
10:50 上传
九、console.profile()的性能分析
性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
&script type=&text/javascript&&
& && & 　　function All(){
& && && && &alert(11);
&&　　　　& &&&for(var i=0;i&10;i++){
& && && && && && &funcA(1000);
& && && && && &}
　　　　& & funcB(10000);
　　& & }
& & 　　function funcA(count){
& & 　　　　for(var i=0;i&i++){}
&&　　}
&&　　function funcB(count){
& & 　　　　for(var i=0;i&i++){}
& &　　}
&&　　console.profile('性能分析器');
& & 　　All();
& & 　　console.profileEnd();
& &&/script&复制代码
说明一下，LZ测试时，在All()中未加alert,控制条没有输出，加上了之后，就有了一张性能分析表，暂时不清楚原因，若你知道，可以评论。
46763.jpg (106.69 KB, 下载次数: 59)
10:52 上传
TA的每日心情开心 10:13签到天数: 7 天[LV.3]偶尔看看II
本帖最后由 yetaoaiueo 于
11:35 编辑
感谢分享。
TA的每日心情开心 10:13签到天数: 7 天[LV.3]偶尔看看II
这个确实很有用。
Powered byconsole - 每天进步一点点！ - ITeye技术网站
博客分类：
一、如何调出控制台方法大家都知道，firefox需要安装强大的firebug，其他浏览器会自带。剩下的只要按f12就可以了二、言归正传说console首先先说一下在ie下如果控制台没有开启使用console会报错，不过没有关系，开启开发人员工具刷新就一切正常了。1、console.log相信大家最常用的console的一个属性就是console.log。他的作用是将一般的消息传到控制台上。例如：
console.log(a);
运行后我们在控制台上就能看到打印出一个3。同时这个属性还能帮助我们打印出一个对象或者函数。比如：
function a(){
var a1=new a();
console.log(a1);
这时控制台会将a对象的实例打印出来，对于chrome中，我们可以很完整的看到a对象的实例的整个结构包括继承情况，对于firebug，我们只能看到他的某些属性，不过对于ie来说，如果打印的是一个实例的话，只会返回[object,object]2、该命令的作用是返回信息性消息，这个命令与console.log差别并不大，除了在chrome中只会输出文字外，其余的会显示一个蓝色的惊叹号。3.console.warn和console.error这两个命令的作用就是帮助我们输出警告消息和错误消息的。当警告时，控制台除了出现输出信息外，还会出现有黄色的惊叹号，当错误时则是红色的叉子以上就是console的显示信息命令。不过有人会问，这些命令只是输出，具体有什么用处呢？这主要是分门别类的处理消息，例如我们只是为了测试某个函数是否运行，则用console.log就完全足够了，但是当我们希望抛出某些不知名的错误时，就可以使用console.error返回我们自己设定的错误。4、占位符显示console显示输出最大的优点就是支持占位符。不过支持的相对较少，目前支持字符（%s），整数（%d），浮点（%f）以及对象（%o）这个用起来很像java和c中的printf，用法也是一样的例如console.log(%d,3)，console.log(%f,4.2323),当我们使用%o的时候则会返回一个对象的内部情况例如：
&spanstyle="line-height: 1.5;"=""&var a={}
console.log("%o",a)&/spanstyle="line-height:&
5、分组显示利用console.group和console.groupEnd（注意大小写）可以将返回的数据分组显示，以便我们分类进行对比。例如：
console.group('第一组')
console.log(3)
console.log(5)
console.log(7)
console.groupEnd()
console.group('第二组')
console.log(4)
console.log(6)
console.log(8)
console.groupEnd()
在chrome中显示为：&ignore_js_op style="word-wrap: break-"&
不过这个命令我们伟大的IE浏览器并不支持&ignore_js_op style="word-wrap: break-"&
6、console.dir这个命令的作用是打印输出一个对象内的所有属性例如：
console.dir(a)
在chrome中 除了我们定义的b，c两个变量会打印出来时，一些隐藏属性也会被打印出来在firebug中只会打印出b，c在IE中 只会打印出[object,object]7、console.dirxml这个命令我们伟大的IE仍旧不支持，他的作用就是打印出书dom文档树，比如说：
&div id="tree"&
&li&aaa&/li&
&li&bbb&/li&
&li&ccc&/li&
&li&ddd&/li&
var tree=document.getElementById("tree");
console.dirxml(tree)
在chrome里是这样，&ignore_js_op style="word-wrap: break-"&
在firebug中样子基本相同就不发了8、console.trace该命令用于跟踪一个函数的调用轨迹，这个测试函数运行很有帮助，只要给想测试的函数里面加入console.trace就行了，当然，我们伟大的IE仍旧不支持。9、console.assert这个命令用于判断某个表达式或变量是否为真例如:
console.assert(a==5);
在chrome中返回：&ignore_js_op style="word-wrap: break-"&
ie返回：&ignore_js_op style="word-wrap: break-"&
firebug返回：&ignore_js_op style="word-wrap: break-"&
&ignore_js_op style="word-wrap: break-"&
(6.93 KB, 下载次数: 16)
=================================================================
使用 F12 开发人员工具控制台命令，可以接收来自 Windows Internet Explorer 9 的错误消息，并从代码发送回你自己的消息，而无需中断执行流。
　　可以使用 F12 工具控制台视图在程序代码之外立即运行脚本语句。
　　控制台选项卡和视图
　　可以从“控制台”选项卡或“脚本”选项卡下的控制台窗格中查看 F12 工具控制台消息。控制台在打开时收到来自 Windows Internet Explorer 的消息（例如，代码中包含错误时）。Internet Explorer 9 可以向控制台发送很多信息消息和错误消息 。若要导航到代码中的某个错误位置，请单击错误中提供的源信息。 如果在关闭 F12 工具时出现消息，则下次打开 F12 工具时会显示警告消息。以下屏幕截图显示 F12 工具控制台。
　　你还可以从代码向控制台发送消息 以记录状态、标志错误或使用控制台对象的相关问题的警告。Internet Explorer 9 提供了四种类型的消息 以区分代码中的问题 - 日志、警告、错误和信息。调试时可以使用这些消息，而不使用 "window.alert()"，或者只保留运行日志（如果在代码中进行了重要声明）。消息字符串可以包含文本、 变量、表达式结果或者所有这些内容的组合。以下屏幕截图显示已显示了多条消息的 F12 工具控制台。
　　将消息从代码发送到控制台
　　F12 工具提供了可从脚本代码中使用的命令，用于发送消息，启动或停止分析，或者更改用于评估键入控制台的脚本语句的窗口。
　　使用控制台对象，以将消息从代码发送到控制台。 测试代码时使用控制台而不使用 "window.alert()"，这样不会太明显，因而不会通过模式对话框停止执行。此对象提供大量表单，以便在需要时能够区分信息消息和错误消息。使用控制台对象时，请确保打开 F12 工具。为了避免执行不必要的代码，请使用以下功能测试：
if(window.console && window.console.clear)
　　在测试大量不具有括号和参数的 Internet Explorer 9 对象时，则如果存在功能，其将返回值 True。在这种情况下，我们将测试 console.clear() 功能。还可通过仅测试控制台对象以进行通用检查：
if (window.console){
// Add console commands here.
　　window.console
　　下表 展示可在脚本中使用的控制台命令的语法和示例。
log(message)
window.console.log("This is a logging message");
向控制台打印" message"，以“LOG:” 开头。
warn(message)
window.console.warn("This is a warning message");
向控制台打印警告" message"。该消息以 警告图标 开头。
error(message)
window.console.error("This is an error message");
向控制台打印错误" message"。该消息文本显示为红色， 并以错误图标 开头。
info(message)
("This is an info message");
向控制台打印信息性" message"。此消息以 信息图标 开头。
window.console.clear();
清除控制台中的消息。不清除你在控制台命令行中 输入的脚本错误消息或脚本代码。右键单击“控制台”窗格并单击“清除控制台”选项可清除 全部消息。
dir(object)
window.console.dir(oExample);
向控制台打印 "object" 的 属性。
assert(expression, message)
window.console.assert((x == 1)， "assert message: x != 1");
打印 "message"（如果 "expression" 的值为 false）。
profile(report)
window.console.profile("My profile report");
开始在 "report" 的标题下记录配置文件信息。此命令等同于单击“配置文件”选项卡上的“开始采样”按钮。
profileEnd()
window.console.profileEnd();
停止在上一个报告标题下记录配置文件信息。此命令等同于单击“配置文件”选项卡上的“停止采样”按钮。 可以在“配置文件”选项卡上查看“报告”""。
　　可以使用 "printf" 样式的替代模式设置消息控制台命令的格式。例如，你可以使用以下方法之一调用 "console.log"：
console.log("Variable x = " + x + " and variable y = " + y)
console.log("Variable x = ", x, " and variable y = ", y)
console.log("Variable x = %d and variable y = %d", x, y)
控制台消息方法接受可选参数，以允许将消息中的变量替换为值。例如，可以向控制台发送一个功能报告错误：
function sendErrorConsole(errorCode) {
window.console.error("Error: %s occured", errorCode);
　　在控制台中执行脚本和命令
　　在“控制台”选项卡或“脚本”选项卡中的“控制台”窗格的底部，可以执行一行 或多行控制台命令或脚本语句。可在控制台中执行任何有效的脚本命令或表达式。
　　例如，若要查看变量值，请在控制台中键入名称并按 Enter。若要更改脚本中某个变量的值， 请在控制台中键入所赋的值。 按向上键浏览之前执行的命令。
　　无论是否启动调试程序，都可以使用“脚本”选项卡中的“控制台” 窗格。在断点处停止执行时，在此窗格中输入的命令将 在断点的作用域内运行；当执行未暂停时，命令将在全局作用域中运行。
　　使用 cd() 跨框架执行命令
　　脚本语句和命令的执行 默认情况下在顶级窗口的上下文中进行。如果使用的是帧，则使用 "cd()" 控制台 命令。
　　cd(window)
可以将命令行表达式计算 从网页的默认顶级窗口更改为帧的窗口。调用不带参数的 cd() 会返回顶级窗口。
　　下图演示了在此处提供的示例中执行的几个步骤。
　　从控制台视图的顶部， 执行以下命令：
cd() - 打印当前窗口。
cd(myframe) - 将表达式计算 更改为 id 为“myframe”的示例帧。
counter - 显示 iframe 中 名为“counter”的全局变量。
counter = 25 - 将计数器的值更改为 25。
cd() - 将表达式计算改回 默认的顶级窗口。
counter - 在本例中，计数器在顶级窗口中 不是有效的变量。
　　可使用 ID 名称或 frames[] 集合来更改为 iframe。在本例中， "document.frames[0]" 同样发挥作用。
　　执行多行 脚本
　　若要执行多行脚本命令，请单击多行模式按钮
或按 Ctrl+Alt+M。在多行窗口中键入 script，然后单击“运行脚本”按钮以执行。与执行一行脚本的单行模式不同，按 Enter 会在脚本窗口中 添加一个换行。可调整大小的输入窗口通过右键单击或快捷菜单（如复制和粘贴） 以及 Unicode 功能来拥有其他控件。
　　筛选消息并扩展控制台对象
　　可以从控制台窗格 筛选控制台消息以显示或隐藏某些类别的消息。若要筛选消息，请右键单击“控制台”窗格并将鼠标指针悬停在“筛选器”上方。将显示一个可用筛选器的列表，其中带复选标记的筛选器是活动的。
　　可以扩展控制台对象以添加 新功能。例如，你可能希望自定义方法以将格式化的调试消息输出到控制台。若要添加 "console.debug" 命令，则可向 JavaScript 代码中添加以下代码段：
console.debug = function(name, value){
console.warn("DEBUG: " + name + "==" + value);
　　此示例采用了两个参数，并使用某种最小化格式将它们输出到“控制台”窗格。但 可以随意自定义函数参数和行为。通过这种方法，控制台对象可以用于添加所需的任意数量的 新命令。
由于你在新命令中使用了现有控制台命令，因此仍将应用筛选器。例如， 上一示例中的 console.debug 命令使用 console.warn 将消息输出到“控制台” 窗格。如果从“筛选器”列表中清除“控制台警告”，则“控制台”窗格中将不会显示 console.warn 中的任何输出。
浏览: 2548093 次
来自: 一片神奇的土地
StartHere2012 写道shadowred 写道&qu ...
shadowred 写道&在main方法中 通过ne ...
louistz 写道shadowred 写道shadowred ...
shadowred 写道&在main方法中 通过ne ...
u 写道在，请及时回复何事啊JavaScript调试技巧之console.log()详解
字体：[ ] 类型：转载 时间：
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑
一、什么是console.log()？除了一些很老版本的浏览器，现今大多数浏览器都自带调试功能；即使没有调试功能，也可以通过安装插件来进行补充。比如，老版本的Firefox没有自带调试工具，在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上，window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。比如，以下代码将在控制台中打印”Sample log”： 代码如下:window.console.log("Sample log");上述代码可以忽略window对象而直接简写为： 代码如下:console.log("Sample log");console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似，console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同， 本文主要探讨Firebug中console.log()的使用 。二、兼容没有调试控制台的浏览器对于缺少调试控制台的老版本浏览器，window中的console对象并不存在，因此直接使用console.log()语句可能会在浏览器内部造成错误(空指针错误)，并最终导致某些老版本浏览器的崩溃。为了解决这一问题，可以人为定义console对象，并声明该console对象的log函数为空函数；这样，当console.log()语句执行时，这些老版本的浏览器将不会做任何事情： 代码如下:if(!window.console){& window.console = {log : function(){}};}不过，在大多数情况下，没有必要去做这种兼容性工作 — console.log()等调试代码应当从最终的产品代码中删除掉。三、使用参数与alert()函数类似，console.log()也可以接受变量并将其与别的字符串进行拼接： 代码如下://Use variablevar name = "Bob";console.log("The name is: " + name);与alert()函数不同的是，console.log()还可以接受变量作为参数传递到字符串中，其具体语法与C语言中的printf语法一致： 代码如下://Use parametervar people = "Alex";var years = 42;console.log("%s is %d years old.", people, years);上述代码的执行结果为：”Alex is 42 years old.”四、使用其它日志级别除了console.log()，Firebug还支持多种不同的日志级别：debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息： 代码如下://Use different logging levelconsole.log("Log level");console.debug("Debug level");<("Info level");console.warn("Warn level");console.error("Error level");从Firebug控制台中可以看到，不同日志级别的打印信息，其颜色和图标是不一样的；同时，可以在控制台中选择不同的日志级别来对这些信息进行过滤：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具