IE调试网页之三：使用 F12 工具控制台查看错误和状态 (Windows)

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

 

转载来自：

做者：Artwl

出处：http://artwl.cnblogs.com