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

简介:

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



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
17天前
|
Web App开发 C# Windows
一款.NET开源的Windows资源管理器标签页工具
一款.NET开源的Windows资源管理器标签页工具
|
2月前
|
安全 Windows
【Azure Cloud Service】在Windows系统中抓取网络包 ( 不需要另外安全抓包工具)
通常,在生产环境中,为了保证系统环境的安全和纯粹,是不建议安装其它软件或排查工具(如果可以安装,也是需要走审批流程)。 本文将介绍一种,不用安装Wireshark / tcpdump 等工具,使用Windows系统自带的 netsh trace 命令来获取网络包的步骤
85 32
|
2月前
|
监控 安全 网络安全
使用EventLog Analyzer日志分析工具监测 Windows Server 安全威胁
Windows服务器面临多重威胁,包括勒索软件、DoS攻击、内部威胁、恶意软件感染、网络钓鱼、暴力破解、漏洞利用、Web应用攻击及配置错误等。这些威胁严重威胁服务器安全与业务连续性。EventLog Analyzer通过日志管理和威胁分析,有效检测并应对上述威胁,提升服务器安全性,确保服务稳定运行。
|
3月前
|
XML 网络安全 数据格式
Kali渗透测试:Windows事件管理工具wevtutil的使用方法(一)
Kali渗透测试:Windows事件管理工具wevtutil的使用方法(一)
98 2
|
3月前
自动生成IE浏览器的xpath工具IEXPath
自动生成IE浏览器的xpath工具IEXPath
57 0
|
3月前
|
XML 网络安全 数据格式
Kali渗透测试:Windows事件管理工具wevtutil的使用方法(二)
Kali渗透测试:Windows事件管理工具wevtutil的使用方法(二)
51 0
|
18天前
|
安全 关系型数据库 MySQL
Windows Server 安装 MySQL 8.0 详细指南
安装 MySQL 需要谨慎,特别注意安全配置和权限管理。根据实际业务需求调整配置,确保数据库的性能和安全。
101 9
|
2月前
|
网络安全 Windows
Windows server 2012R2系统安装远程桌面服务后无法多用户同时登录是什么原因?
【11月更文挑战第15天】本文介绍了在Windows Server 2012 R2中遇到的多用户无法同时登录远程桌面的问题及其解决方法,包括许可模式限制、组策略配置问题、远程桌面服务配置错误以及网络和防火墙问题四个方面的原因分析及对应的解决方案。
140 4
|
2月前
|
监控 安全 网络安全
Windows Server管理:配置与管理技巧
Windows Server管理:配置与管理技巧
119 3
|
2月前
|
存储 安全 网络安全
Windows Server 本地安全策略
由于广泛使用及历史上存在的漏洞,Windows服务器成为黑客和恶意行为者的主要攻击目标。这些系统通常存储敏感数据并支持关键服务,因此组织需优先缓解风险,保障业务的完整性和连续性。常见的威胁包括勒索软件、拒绝服务攻击、内部威胁、恶意软件感染等。本地安全策略是Windows操作系统中用于管理计算机本地安全性设置的工具,主要包括用户账户策略、安全选项、安全设置等。实施强大的安全措施,如定期补丁更新、网络分段、入侵检测系统、数据加密等,对于加固Windows服务器至关重要。

热门文章

最新文章