Chrome DevTools 控制台 API - JavaScript

Chrome DevTools 控制台 API 是一组在浏览器开发环境中可用的 JavaScript API，用于编写自定义脚本、分析网站性能等。

Console API

控制台 API 是 Chrome DevTools 中最常用的 API 之一，通过这些 API 可以将输出写入到控制台中。以下是控制台 API 的一些常见使用方式：

console.log()

使用 console.log() 可以在控制台中打印信息。以下是一个例子：

console.log('Hello, world!');

该命令将输出 "Hello, world!" 到控制台中。

console.error()

使用 console.error() 可以在控制台中输出错误信息。以下是一个例子：

console.error('Something went wrong!');

该命令将输出 "Something went wrong!" 到控制台中，并将其标记为错误信息。

console.warn()

使用 console.warn() 可以在控制台中输出警告信息。以下是一个例子：

console.warn('Warning: Something might go wrong!');

该命令将输出 "Warning: Something might go wrong!" 到控制台中，并将其标记为警告信息。

console.table()

使用 console.table() 可以在控制台中输出一个表格。以下是一个例子：

console.table([
  { name: 'John', age: 24 },
  { name: 'Jane', age: 25 }
]);

该命令将输出一个表格，包含两列：名字和年龄，两行分别对应 John 和 Jane 的信息。

console.clear()

使用 console.clear() 可以清空控制台输出。以下是一个例子：

console.clear();

该命令将清空控制台中所有的输出。

Performance API

性能 API 用于分析网站性能，并提供有关网站的详细信息。以下是性能 API 的一些常见使用方式：

performance.now()

使用 performance.now() 可以返回当前时间戳，精确到毫秒级别。以下是一个例子：

const start = performance.now();
// do something
const end = performance.now();
console.log(`Elapsed time: ${end - start}ms`);

该命令将输出执行该代码块所花费的时间，单位为毫秒。

performance.mark()

使用 performance.mark() 可以在代码中创建时间戳标记，用于分析网站性能。以下是一个例子：

performance.mark('start');
// do something
performance.mark('end');
performance.measure('elapsed', 'start', 'end');
const entry = performance.getEntriesByName('elapsed')[0];
console.log(`Elapsed time: ${entry.duration}ms`);

该命令将输出执行该代码块所花费的时间，单位为毫秒。

performance.memory()

使用 performance.memory() 可以返回当前内存使用情况。以下是一个例子：

const memory = performance.memory();
console.log(`Memory usage: ${memory.usedJSHeapSize / 1024 / 1024}MB`);

该命令将输出当前页面使用的内存情况，单位为 MB。

Conclusion

Chrome DevTools 控制台 API 提供了丰富的 JavaScript API，在网站开发和性能优化中都有很大的帮助。以上只是一些常见使用方式，更多 API 可以在官方文档中查看。