console

uule

浏览: 6358279 次
性别:
来自: 一片神奇的土地

最近访客更多访客>>

wangenbao1

hyjqdy

逆光下的轮廓

taominghua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

一、如何调出控制台
方法大家都知道，firefox需要安装强大的firebug，其他浏览器会自带。剩下的只要按f12就可以了

二、言归正传说console
首先先说一下在ie下如果控制台没有开启使用console会报错，不过没有关系，开启开发人员工具刷新就一切正常了。
1、console.log
相信大家最常用的console的一个属性就是console.log。他的作用是将一般的消息传到控制台上。例如：

var a=3;
console.log(a);

复制代码

运行后我们在控制台上就能看到打印出一个3。同时这个属性还能帮助我们打印出一个对象或者函数。比如：

function a(){
var b=3;
}
var a1=new a();
console.log(a1);

复制代码

这时控制台会将a对象的实例打印出来，对于chrome中，我们可以很完整的看到a对象的实例的整个结构包括继承情况，对于firebug，我们只能看到他的某些属性，不过对于ie来说，如果打印的是一个实例的话，只会返回[object,object]

2、console.info
该命令的作用是返回信息性消息，这个命令与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={}
a.b=3
a.c=5
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-word;">

不过这个命令我们伟大的IE浏览器并不支持
<ignore_js_op style="word-wrap: break-word;">

6、console.dir
这个命令的作用是打印输出一个对象内的所有属性
例如：

var a={}
a.b=3;
a.c=5;
console.dir(a)

复制代码

在chrome中除了我们定义的b，c两个变量会打印出来时，一些隐藏属性也会被打印出来

在firebug中只会打印出b，c

在IE中只会打印出[object,object]

7、console.dirxml
这个命令我们伟大的IE仍旧不支持，他的作用就是打印出书dom文档树，比如说：

<body>
<div id="tree">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
</body>
<script>
var tree=document.getElementById("tree");
console.dirxml(tree)
</script>

复制代码

在chrome里是这样，
<ignore_js_op style="word-wrap: break-word;">

在firebug中样子基本相同就不发了

8、console.trace
该命令用于跟踪一个函数的调用轨迹，这个测试函数运行很有帮助，只要给想测试的函数里面加入console.trace就行了，当然，我们伟大的IE仍旧不支持。

9、console.assert
这个命令用于判断某个表达式或变量是否为真
例如:

var a=3;
console.assert(a==5);

复制代码

在chrome中返回：
<ignore_js_op style="word-wrap: break-word;">

ie返回：
<ignore_js_op style="word-wrap: break-word;">

firebug返回：
<ignore_js_op style="word-wrap: break-word;">

<ignore_js_op style="word-wrap: break-word;">

未命名ff.jpg (6.93 KB, 下载次数: 16)

=================================================================

使用 F12 开发人员工具控制台命令，可以接收来自 Windows Internet Explorer 9 的错误消息，并从代码发送回你自己的消息，而无需中断执行流。

　　可以使用 F12 工具控制台视图在程序代码之外立即运行脚本语句。

　　控制台选项卡和视图

　　可以从“控制台”选项卡或“脚本”选项卡下的控制台窗格中查看 F12 工具控制台消息。控制台在打开时收到来自 Windows Internet Explorer 的消息（例如，代码中包含错误时）。Internet Explorer 9 可以向控制台发送很多信息消息和错误消息。若要导航到代码中的某个错误位置，请单击错误中提供的源信息。如果在关闭 F12 工具时出现消息，则下次打开 F12 工具时会显示警告消息。以下屏幕截图显示 F12 工具控制台。

“脚本”选项卡的控制台窗格中的由 Internet Explorer 发送的代码错误的屏幕截图

　　你还可以从代码向控制台发送消息以记录状态、标志错误或使用控制台对象的相关问题的警告。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)	window.console.info("This is an info message");	向控制台打印信息性" message"。此消息以信息图标开头。
clear()	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()

　　cd(window)

可以将命令行表达式计算从网页的默认顶级窗口更改为帧的窗口。调用不带参数的 cd() 会返回顶级窗口。

　　下图演示了在此处提供的示例中执行的几个步骤。

使用 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 中的任何输出。

分享到：

localStorage、sessionStorage | TCP协议的三次握手和四次挥手

2015-06-25 18:02
浏览 5449
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

console

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

console

评论

发表评论

相关推荐

抢购学习

querySelectorAll与querySelector

JSONP跨域

Ajax请求是否可以实现同步

JS总结（二）

JS实现的刮刮卡程序

this为何要赋值给局部变量that

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

使用megapixImage.js定位并展示上传的图片

基于jquery实现日历签到功能

利用cookie控制弹窗24小时只显示一次

手机版倒计时问题 + 伪异步

localStorage、sessionStorage

加载更多

Form的onsubmit

JS共用方法 - 转码/doAjax

EasyUI项目中的自定义JS

textarea校验长度

JS操作DOM元素属性和方法

event.srcElement

最近访客更多访客>>