在这篇文章中，我们介绍了如何使用Chrome浏览器中的开发工具之一--控制台。Chrome开发工具中的控制台有助于调试网页和调查外部网页。

内容表：

如何打开控制台？
查看日志信息+不同的控制台方法
在控制台中运行JavaScript

我们将通过在样本HTML页面上的尝试来探索这些功能。

如何打开控制台？

要打开控制台：

使用键盘快捷键Ctrl + Shift + I或Ctrl + Shift + J。
或者点击Chrome菜单，选择 "更多工具"选项，然后点击 "开发工具"，如下图所示：

console_dev

控制台的主要用途：

查看对调试有用的日志信息。
运行Javascript。

我们用下面的HTML代码来说明如何使用控制台：

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Console in Chrome DevTools</title>
    <link rel="stylesheet" href="main.css">
    <script src="index.js" async></script>
</head>
<body>
    <h1>Using Console in Chrome DevTools</h1>
    <button onclick="viewLog()">Click me</button>
</body>
</html>

查看日志信息+不同的控制台方法

控制台有一个信息标签，显示各种类型的日志信息：

Screenshot-from-2021-08-27-10-37-31

a.来自JavaScript的日志信息

我们可以使用Console对象提供的方法从JavaScript中查看日志信息。当按钮被按下时，消息和提示消息的JavaScript文件中的代码行会出现在控制台中。

这些方法是

console.log
console.error
console.warning
console.table

下面是一些Console对象的方法。

console.log()方法在控制台显示一条信息：

index.js
function viewLog() {
  console.log("I have been clicked")
}

log-1

**console.error()**方法显示一个错误信息：

index.js
function viewLog() {
  console.error("This is an error message.")
}

error

**console.warning()**方法显示一条警告信息：

index.js
function viewLog() {
  console.warn("This is a warning message.")
}

warn

console.**table()**方法显示表格式的数据：

index.js
function viewLog() {
  var students = [
    { name: "Lamorak", major: "Telecommunication Engineering" },
    { name: "Kay", major: "Computer Science" },
    { name: "Lancelot", major: "Art History" },
  ]

  console.table(students)
}

table

b.来自浏览器的日志信息

在加载页面出现问题的情况下，我们可以从浏览器中查看日志信息。

这可能是由服务器错误、主机错误、互联网问题等引起的：

Screenshot-from-2021-08-28-01-03-28

在控制台中运行JavaScript

a.我们可以在控制台中进行算术操作：

我们可以在控制台中进行算术运算，如加法、乘法、除法和减法。

逐行尝试这个代码片段：

let a = 7
let b = 5
console.log(a*b)

输出将是：

也试一下这个代码片段：

8+107

输出。

Screenshot-from-2021-08-26-17-41-15

b.我们还可以在控制台中使用JavaScript来修改HTML内容：

Javascript也可以用来修改HTML内容和HTML样式，如颜色、字体等。

在控制台中试试这个代码段：

let content = document.getElementById("content")

输出：

undefined

试试这个，我们打印变量 "content "的内容：

content

输出：

<p id="content"></p>

现在试试这个，我们在p标签中添加文本：

content.innetHTML = "Added dynamically by JavaScript"

输出：

"Added dynamically by JavaScript"

content-1

通过OpenGenus的这篇文章，你一定对如何在Chrome DevTool中使用控制台进行网页的各种调试有了深刻的认识。

如何在Chrome DevTools中使用控制台