什么是浏览器开发者工具？

2026-02-16 04:34:42

JavaScript 控制台

JavaScript 控制台是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许你针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台：

如果开发者工具已经打开，点击或按下控制台标签。

如果没有，Firefox 允许你直接使用 Ctrl + Shift + K 打开控制台，或使用菜单命令：菜单 ➤ Web 开发者 ➤ Web 控制台，或工具 ➤ Web 开发者 ➤ Web 控制台。在其他浏览器中，打开开发者工具，然后点击控制台标签。

这将为你提供一个如下所示的窗口：

要查看会发生什么，请尝试逐个输入以下代码片段（然后按 Enter 键）:

jsalert("hello!");

jsdocument.querySelector("html").style.backgroundColor = "purple";

jsconst loginImage = document.createElement("img");

loginImage.setAttribute(

"src",

"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",

);

document.querySelector("h1").appendChild(loginImage);

现在尝试输入以下错误的代码版本，看看你得到什么。

jsalert('hello!);

jsdocument.cheeseSelector("html").style.backgroundColor = "purple";

jsconst loginImage = document.createElement("img");

banana.setAttribute(

"src",

"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",

);

document.querySelector("h1").appendChild(loginImage);

你将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！