devtools 控制台_使用DevTools控制台和控制台API

devtools 控制台

Every browser exposes a console that lets you interact with the Web Platform APIs and also gives you an inside look at the code by printing messages that are generated by your JavaScript code running in the page.

每种浏览器都提供一个控制台，该控制台使您可以与Web平台API进行交互，还可以通过打印由页面中运行的JavaScript代码生成的消息来使您深入了解代码。

• Overview of the console

  控制台概述

• Use console.log formatting

  使用console.log格式

• Clear the console

  清除控制台

• Counting elements

  计数元素

• Log more complex objects

  记录更复杂的对象

• Logging different error levels

  记录不同的错误级别

• Preserve logs during navigation

  导航期间保留日志

• Grouping console messages

  分组控制台消息

• Print the stack trace

  打印堆栈跟踪

• Calculate the time spent

  计算花费的时间

• Generate a CPU profile

  生成CPU配置文件

控制台概述 (Overview of the console)

The console toolbar is simple. There’s a button to clear the console messages, something you can also do by clicking cmd-K in macOS, or ctrl-K on Windows, a second button that activates a filtering sidebar, that lets you filter by text, or by type of message, for example error, warning, info, log, or debug messages.

控制台工具栏很简单。 有一个按钮可以清除控制台消息，您也可以通过以下操作来完成此操作：单击macOS中的cmd-K或Windows中的ctrl-K ，第二个按钮可以激活过滤侧边栏，使您可以按文本或消息类型进行过滤，例如错误，警告，信息，日志或调试消息。

You can also choose to hide network-generated messages, and just focus on the JavaScript log messages.

您还可以选择隐藏网络生成的消息，而只关注JavaScript日志消息。

The console is not just a place where you can see messages, but also the best way to interact with JavaScript code, and many times the DOM. Or, just get