控制台工具中的日志消息

2023-09-07 19:51| 来源: 网络整理| 查看: 265

控制台工具中的日志消息项目 03/29/2023

自从浏览器开始提供开发人员工具以来，控制台就成为最受欢迎的工具，因为在大多数编程课程中，你将学习如何输出某种 print 或 log 命令，以深入了解代码中发生的情况。

在 DevTools 之前，对于 JavaScript，只能使用 alert() 或 document.write() 语句在浏览器中进行调试。使用 DevTools 时，若要在控制台中记录信息，可以在控制台对象 API 参考中列出的控制台中提供对象的许多方法Console。

控制台消息示例：日志、信息、错误和警告

对象 Console 具有多个级别的消息日志记录方法：

console.log - 将文本作为日志消息打印到控制台。 console.info - 将文本作为信息性消息打印到控制台。 console.error - 将文本作为错误消息打印到控制台。 console.warn - 将文本打印到控制台作为警告。示例代码 // prints the text to the console as a log message console.log('This is a log message') // prints the text to the console as an informational message console.info('This is some information') // prints the text to the console as an error message console.error('This is an error') // prints the text to the console as a warning console.warn('This is a warning') 演示网页：控制台消息示例：日志、信息、错误和警告

若要尝试在控制台中使用日志记录函数，请执行以下操作：

在新窗口或选项卡中打开演示网页控制台消息示例：日志、信息、错误和警告。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开，控制台在工具栏main打开。

演示页已将上述日志消息发送到控制台：

log()和 info() 方法似乎也这样做。将 info() 和 log() 用于不同的日志任务，因为这允许筛选控制台消息，以便仅显示一部分日志条目。

error()和 warn() 方法在消息旁边显示一个图标，以及检查消息的堆栈跟踪的方法。

将任何示例复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

不同类型的日志条目和变量

可以将任何有效的 JavaScript 或 DOM 引用发送到控制台，而不是日志文本。控制台适当地显示从控制台日志消息发送到它的各种类型的 JavaScript 值。控制台显示结果的筛选和格式化表示形式。

示例代码 let x = 2; // logs the value of x console.log(x); // logs the name x and value of x console.log({x}) // logs a DOM reference console.log(document.querySelector('body')); // logs an Object console.log({"type":"life", "meaning": 42}); let w3techs = ['HTML', 'CSS', 'SVG', 'MathML']; // logs an Array console.log(w3techs); 演示网页：记录不同的变量类型

若要使用 log 函数显示不同的变量类型，请执行以下操作：

打开演示网页控制台消息示例：在新窗口或选项卡中记录不同类型的内容。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开，控制台在工具栏main打开。

每种类型的结果都以不同的方式显示。

单击三角形可切换信息并更详细地分析每个结果。

假设你收到许多仅显示一个值的日志消息，但不知道该值的来源。在这种情况下，我们在变量周围x添加了大括号{}，以提供更好的分组。

控制台中不同类型的日志记录变量：

使用扩展的附加信息记录控制台中不同类型的变量：

将任何示例复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

使用说明符设置值的格式和转换值

所有日志方法的一个特殊功能是，可以在日志语句的消息中使用说明符。说明符是日志消息的一部分，以百分比符号开头， % () 字符。说明符允许以不同的格式记录某些值，甚至可以在格式之间进行转换。

%s 日志为字符串。 %i 或 %d 将记录为整数。 %f 日志为浮点值。 %o 日志为可展开的 DOM 元素。 %O 日志为可展开的 JavaScript 对象。 %c 允许使用 CSS 设置消息的样式。示例代码 // logs "10x console developer" console.log('%ix %s developer', 10, 'console'); // logs PI => 3.141592653589793 console.log(Math.PI); // logs PI as an integer = 3 console.log('%i', Math.PI); // logs the document body as a DOM node console.log('%o', document.body); // logs the body of the document as a JavaScript object with all properties console.log('%O', document.body); // shows the message as red and big console.log('%cImportant message follows','color:red;font-size:40px') 演示网页：使用说明符进行日志记录

打开演示页控制台消息示例：在新选项卡或窗口中使用说明符进行日志记录。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开，控制台在工具栏main打开。

网页已使用输出填充控制台。

第一个示例演示说明符的替换顺序是字符串后面的参数顺序：

console.log('%ix %s developer', 10, 'console'); // logs "10x console developer"

单击输出结果中的展开器三角形，展开并查看网页中的上述 log 语句输出的数据。

如有必要，请按 F5 重新加载页面并重新填充控制台输出。

说明符用于记录、格式化和转换值：

在控制台中，单击三角形展开日志结果，查看和 %O 说明符之间的差异%o。

网页正文显示为可展开的 DOM 节点，或显示为网页正文上所有 JavaScript 属性的完整列表：

将上面的示例代码列表复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

组日志消息

如果记录了大量信息，则可以使用 group 和 groupCollapsed 方法在控制台中将日志消息显示为可展开和可折叠的组。可以对组进行嵌套和命名，使数据更易于理解。

示例代码 // Example 1: Nested groups, with the inner group hidden (collapsed): console.group("Passengers: Heart of Gold"); console.log('Zaphod'); console.log('Trillian'); console.log('Ford'); console.log('Arthur'); console.log('Marvin'); console.groupCollapsed("Hidden"); console.log('(Frankie & Benjy)'); console.groupEnd("Hidden"); console.groupEnd("Passengers: Heart of Gold"); // Example 2: let technologies = { "Standards": ["HTML", "CSS", "SVG", "ECMAScript"], "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"] } for (tech in technologies) { console.groupCollapsed(tech); technologies[tech].forEach(t => console.log(t)); console.groupEnd(tech); } 演示网页：对日志进行分组

在此示例中，可以选择生成组名称。

打开演示页控制台消息示例：在新选项卡或窗口中对日志进行分组。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开，控制台在工具栏main打开。

网页已使用输出填充控制台。

将大量值记录为组：

在控制台输出中，展开并折叠每个部分：

将上面的示例代码列表复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

将复杂数据显示为表

方法 console.table() 不将复杂数据记录为可折叠且可展开的对象，而是记录为可以使用不同标头进行排序的表。排序表使用户能够更轻松地查看信息。

示例代码 let technologies = { "Standards": ["HTML", "CSS", "SVG", "ECMAScript"], "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"] } // log technologies as an object console.log(technologies); // show technologies as a table console.table(technologies); // get the dimensions of the document body let bodyDimensions = document.body.getBoundingClientRect(); // show dimensions as an object console.log(bodyDimensions); // show dimensions as a table console.table(bodyDimensions);

演示页中的代码列表的第二部分将进一步向下显示。

演示网页：使用表格格式

将复杂数据显示为表：

打开演示页控制台消息示例：在新窗口或选项卡中使用表。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开，控制台在工具栏main打开。

网页已使用输出填充控制台。

在控制台中，单击展开器三角形。

单击展开器三角形。使用 console.table 显示数据使数据更易于阅读：

将上述代码列表复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

的 console.table 输出具有表格式。不仅在控制台中显示输出时，输出具有表格格式，而且，如果将表复制并粘贴到 Microsoft Excel、Microsoft Word或任何其他支持表格数据的产品中，输出的结构将保持不变。

为每个属性指定列数组，以便提高可读性

如果数据具有命名参数，则 console.table() 方法还允许你为每个属性指定 Array 列，以显示为第二个参数。以下示例演示如何指定可读性更高的列数组：

示例代码

此代码来自上述演示网页。

// get all the h1, p and script elements let contentElements = document.querySelectorAll(':is(h1,p,script)'); // show the elements as an unfiltered table console.table(contentElements) // show only relevant columns console.table(contentElements,['nodeName', 'innerText', 'offsetHeight'])

此代码筛选方法显示的信息 console.table() 。

代码提供要作为第二个参数显示的属性数组：

将上述代码列表复制并粘贴到控制台中，然后按 Enter。

输出显示在控制台中输入的代码下方。

日志语句与断点调试和实时表达式

你可能倾向于使用log方法作为调试网页main方法，因为日志方法易于使用。考虑任何 console.log() 请求的结果。已发布的产品不应使用任何 log 用于调试的语句，因为它可能会向用户透露内部信息。在控制台中产生的噪音是压倒性的。

log尝试使用断点调试或实时表达式，而不是语句。你可能会发现工作流更有效，并且获得更好的结果。

【本文地址】

控制台工具中的日志消息

控制台工具中的日志消息

今日新闻

推荐新闻