JavaScript 控制台调试：console.table 与 copy 命令实战

直接分享两个实用的调试技巧。

使用 console.table 展示数据

使用 console.table 展示数据

在浏览器控制台中展示数组或对象时，使用 console.table 比 console.log 更加直观清晰。

// 在控制台上运行
console.table([
 { firstName: 'John', lastName: 'Doe', age: 2 },
 { firstName: 'William', lastName: 'Shakespeare', age: 3 }
])

它能将数据渲染为表格形式，视觉效果更友好：

此外，还可以指定只显示特定的列。

// 在控制台上运行
console.table([
 { firstName: 'John', lastName: 'Doe', age: 2 },
 { firstName: 'William', lastName: 'Shakespeare', age: 3 }
], ['firstName', 'lastName'])

例如指定展示 firstName 和 lastName 这两列，同时 (index) 列会默认保留。

索引列是默认包含的。

注意：语法格式为 console.table(data [, columns]);

使用 copy 命令复制数据

使用 copy 命令复制数据

如果你在使用谷歌浏览器并需要复制控制台输出的数据，可以使用 copy() 命令，无需手动高亮选择对应代码进行复制。

const data = [2, 3, 4];
copy(data);

执行上述代码后，data 数据值会被复制到你的剪贴板中，你可以在任意文档中进行粘贴。

注意：copy 命令仅在谷歌浏览器控制台中生效，在 Node.js 环境中无效。

参考链接

• developer.mozilla.org/zh-CN/docs/…
• dev.to/tawn33y/2-q…

到此这篇关于 JavaScript 快速调试技巧的文章就介绍到这了，更多相关 JavaScript 快速调试内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！