本文介绍两个实用的 JavaScript 调试技巧。首先讲解如何使用 console.table 将数组或对象以表格形式直观展示，并支持指定显示特定列。其次介绍 Chrome 浏览器特有的 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 快速调试内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！