浏览器开发者控制台使用入门基础

开发者控制台

代码是很容易出现错误的。你也极可能犯错误...... 哦，我在说什么？只要你是人，你必定会犯错误（在写代码的时候），除非你是机器人)。

但在浏览器中，默认状况下用户是看不到错误的。因此，若是脚本中有错误，咱们看不到是什么错误，更不可以修复它。

为了发现错误并得到一些与脚本相关且有用的信息，浏览器内置了“开发者工具”。

一般，开发者倾向于使用 Chrome 或 Firefox 进行开发，由于它们有最好的开发者工具。一些其余的浏览器也提供开发者工具，有时还具备一些特殊的功能，一般它们都是在追赶 Chrome 或 Firefox。因此大多数人都有“最喜欢”的浏览器，当遇到某个浏览器独有的问题的时候，人们就会切换到其余的浏览器。

开发者工具很强大，功能丰富。首先，咱们将学习如何打开它们，查找错误和运行 JavaScript 命令。

Google Chrome

打开网页 bug.html。

在 JavaScript 代码中有一个错误。通常的访问者看不到这个错误，因此让咱们打开开发者工具看看吧。

按下 key:F12 键，若是你使用 Mac，试试 key:Cmd+Opt+J。

开发者工具会被打开，Console 标签页是默认的标签页。

就像这样：

具体什么样，要看你的 Chrome 版本。它随着时间一直在变，可是都很相似。

• 在这咱们能看到红色的错误提示信息。这个场景中，脚本里有一个未知的 “lalala” 命令。
• 在右边，有个可点击的连接 bug.html:12。这个连接会连接到错误发生的行号。

在错误信息的下方，有个 > 标志。它表明“命令行”，在“命令行”中，咱们能够输入 JavaScript 命令，按下 key:Enter 来执行（key:Shift+Enter 用来输入多行命令）。

如今，咱们能看到错误就够了。稍后，在 <info:debugging-chrome> 章节中，咱们会从新更加深刻地讨论开发者工具。

Firefox、Edge 和其余浏览器

大多数其余的浏览器都是经过 key:F12 来打开开发者工具。

他们的外观和感受都很是类似，一旦你学会了他们中的一个（能够先尝试 Chrome），其余的也就很快了。

Safari

Safari（Mac 系统中的浏览器，Windows 和 Linux 系统不支持）有一点点不一样。咱们须要先开启“开发菜单”。

打开“偏好设置”，选择“高级”选项。选中最下方的那个选择框。

如今，咱们经过 key:Cmd+Opt+C 就能打开或关闭控制台了。另外注意，有一个名字为“开发”的顶部菜单出现了。它有不少命令和选项。

一般，当咱们向控制台输入一行代码后，按 key:Enter，这行代码就会当即执行。

若是想要插入多行代码，请按 key:Shift+Enter 来进行换行。这样就能够输入长片断的 JavaScript 代码了。

总结

• 开发者工具容许咱们查看错误、执行命令、检查变量等等。
• 在 Windows 系统中，能够经过 key:F12 开启开发者工具。Mac 系统下，Chrome 须要使用 key:Cmd+Opt+J，Safari 使用 key:Cmd+Opt+C（须要提早开启）。

如今咱们的环境准备好了。下一章，咱们将正式开始学习 JavaScript。

---

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。

在线免费阅读：https://zh.javascript.info/

---

扫描下方二维码，关注微信公众号「技术漫谈」，订阅更多精彩内容。