从 Chrome DevTools 复制数据 - JavaScript

在进行网站开发和调试时，我们通常会使用 Chrome DevTools。Chrome DevTools 提供了许多有用的调试工具，其中之一就是能够在控制台中查看和复制数据。

复制数据

我们可以使用 copy() 方法在控制台中复制数据。copy() 方法接收一个参数，该参数是将要被复制到剪贴板的数据。

例如，我们可以将一个对象复制到剪贴板：

const obj = { name: 'John Doe', age: 30, occupation: 'Developer' };
copy(obj);

可以使用 console.log() 方法查看：

console.log(obj);
// 输出：{name: "John Doe", age: 30, occupation: "Developer"}

但是，如果我们想复制对象的值并将其粘贴到文本编辑器或其他应用程序中，那么使用 copy() 方法就可以轻松实现：

// 复制对象
copy(obj);

在控制台中，我们可以看到复制成功的提示：

Copied {name: "John Doe", age: 30, occupation: "Developer"} to clipboard

我们可以将复制的对象值粘贴到任何我们想要的地方。

复制表格数据

我们可以使用 console.table() 方法在控制台中显示和复制表格数据。例如，我们可以创建一个包含多个对象的数组，并使用 console.table() 方法在控制台中显示数据：

const data = [
  { name: 'John Doe', age: 30, occupation: 'Developer' },
  { name: 'Jane Smith', age: 25, occupation: 'Designer' },
  { name: 'Bob Johnson', age: 40, occupation: 'Manager' }
];
console.table(data);

将会在控制台中以表格形式显示数据：

| (index) | name | age | occupation | | -------- | ------------ | ---- | ----------- | | 0 | John Doe | 30 | Developer | | 1 | Jane Smith | 25 | Designer | | 2 | Bob Johnson | 40 | Manager |

我们可以使用 copy() 方法复制表格数据。在打开控制台时，按下 Shift 键并移动光标，以选择要复制的表格。

然后使用以下 JavaScript 代码将表格数据复制到剪贴板：

copy($0.innerText);

其中 $0 是指向 DevTools 中当前被选中对象的引用。

在控制台中，我们可以看到复制成功的提示。

结论

通过使用 Chrome DevTools 中的 copy() 方法和 console.table() 方法，我们可以轻松地复制对象和表格数据。这是一个非常有用的开发工具，可以节省大量时间！