关于代码编辑器和开发者控制台 原创

春节不停更，此文正在参加「星光计划-春节更帖活动

在此后之前允许我介绍两个知识点

代码编辑器

代码编辑器是程序员花费大部分时间的地方。

有两种主要类型的代码编辑器：IDE 和轻量级编辑器。许多人使用每种类型的一种工具。

集成开发环境

术语IDE（集成开发环境）是指与许多功能强大的编辑器，通常在运行“整个项目。” 顾名思义，它不仅仅是一个编辑器，而是一个全面的“开发环境”。

IDE 加载项目（可以是多个文件），允许在文件之间导航，提供基于整个项目（不仅仅是打开的文件）的自动完成，并与版本管理系统（如git）、测试环境和其他“项目级”的东西。

如果您尚未选择 IDE，请考虑以下选项：

• Visual Studio Code（跨平台，免费）。
• WebStorm（跨平台，付费）。

对于 Windows，还有“Visual Studio”，不要与“Visual Studio Code”混淆。“Visual Studio”是一款付费且功能强大的仅限 Windows 的编辑器，非常适合 .NET 平台。它也擅长 JavaScript。还有一个免费版本Visual Studio Community。

许多 IDE 是付费的，但有试用期。与合格开发人员的薪水相比，他们的成本通常可以忽略不计，因此只需为您选择最好的。

轻量级编辑器

“轻量级编辑器”没有 IDE 强大，但它们快速、优雅和简单。

它们主要用于立即打开和编辑文件。

“轻量级编辑器”和“IDE”之间的主要区别在于 IDE 在项目级别上工作，因此它在启动时加载更多数据，如果需要分析项目结构等等。如果我们只需要一个文件，轻量级编辑器会快得多。

在实践中，轻量级编辑器可能有很多插件，包括目录级语法分析器和自动完成器，因此轻量级编辑器和 IDE 之间没有严格的界限。

以下选项值得您注意：

• Atom（跨平台，免费）。
• Sublime Text（跨平台，共享软件）。
• Notepad++（Windows，免费）。
• 如果您知道如何使用Vim和Emacs，它们也挺好。

我们不要争论

上面列表中的编辑器是我或我认为优秀开发人员的朋友已经使用了很长时间并且对它们感到满意的编辑器。

在我们这个大世界中还有其他伟大的编辑。请选择您最喜欢的一个。

编辑器的选择与任何其他工具一样，因人而异，取决于您的项目、习惯和个人喜好。

开发者控制台

代码容易出错。你很可能会犯错……哦，我在说什么？你绝对会犯错，至少如果你是人而不是机器人。

但是在浏览器中，用户默认看不到错误。因此，如果脚本出现问题，我们将看不到损坏的内容，也无法修复它。

为了查看错误并获取有关脚本的许多其他有用信息，浏览器中嵌入了“开发人员工具”。

大多数开发人员倾向于使用 Chrome 或 Firefox 进行开发，因为这些浏览器拥有最好的开发人员工具。其他浏览器也提供开发者工具，有时具有特殊功能，但通常是在“追赶”Chrome 或 Firefox。因此，大多数开发人员都有一个“最喜欢的”浏览器，如果问题是特定于浏览器的，则切换到其他浏览器。

开发者工具很强大；他们有很多特点。首先，我们将学习如何打开它们、查看错误以及运行 JavaScript 命令。

谷歌浏览器

假如打开页面bug.html

上面的 JavaScript 代码有错误。它隐藏在普通访问者的眼中，所以让我们打开开发人员工具来查看它。

F12如果您使用的是 Mac，请按或 ，然后按。Cmd+Opt+J

默认情况下，开发人员工具将在控制台选项卡上打开。

它看起来有点像这样：

开发者工具的确切外观取决于您的 Chrome 版本。它不时变化，但应该是相似的。

• 在这里我们可以看到红色的错误消息。在这种情况下，脚本包含一个未知的“lalala”命令。
• 在右侧，有一个指向源代码的可点击链接，bug.html:12其中包含发生错误的行号。

在错误消息下方，有一个蓝色>符号。它标志着一个“命令行”，我们可以在其中输入 JavaScript 命令。按Enter运行它们。

现在我们可以看到错误，这就足够开始了。稍后我们将回到开发人员工具，并在浏览器中的调试一章中更深入地介绍调试

多行输入

通常，当我们在控制台中放入一行代码，然后按Enter，它就会执行。

要插入多行，请按。这样就可以输入很长的 JavaScript 代码片段。Shift+Enter

Firefox、Edge 等

大多数其他浏览器用于F12打开开发人员工具。

它们的外观和感觉非常相似。一旦您知道如何使用其中一种工具（您可以从 Chrome 开始），您就可以轻松切换到另一种工具。

苹果浏览器

Safari（Mac 浏览器，Windows/Linux 不支持）在这里有点特殊。我们需要先启用“开发菜单”。

打开首选项并转到“高级”窗格。底部有一个复选框：

现在可以切换控制台。另请注意，出现了名为“Develop”的新顶部菜单项。它有许多命令和选项。Cmd+Opt+C

概括

• 开发人员工具允许我们查看错误、运行命令、检查变量等等。
• 它们可以F12在 Windows 上的大多数浏览器中打开。Mac 版 Chrome 需要Safari:（需要先启用）。Cmd+Opt+JCmd+Opt+C

现在我们已经准备好了环境。在下一节中，我将带大家深入研究 JavaScript。