迹忆客 专注技术分享

你可以使用浏览器编辑和保存 JavaScript 源代码文件中的更改。通常，开发人员需要在运行时实时调试代码。借助浏览器的开发者工具，我们可以轻松地编辑我们本地存储的文件并调试我们的代码。

本文将讨论 Google Chrome 和 Mozilla Firefox 等流行浏览器中开发人员工具的功能，以及如何使用该功能来编辑我们的 JavaScript 文件。

在 Google Chrome 中编辑 JavaScript

谷歌浏览器提供了最有效和最优秀的方式来更改 JavaScript 代码。我们还可以将文件夹与 Google Chrome 开发人员工具的工作区相关联。

我们执行几个步骤来使用此功能。按照以下步骤更好地了解开发人员工具。

• 启动开发者工具

  在 Google Chrome 上加载 JavaScript 本地/服务器文件。转到菜单>>更多工具，你将看到开发者工具选项或按快捷键 (F12) 打开开发者工具。

• 源标签页

  浏览源代码标签，检查文件资源管理器以确定我们正在寻找哪个文件进行更改。我们可以编辑和更改我们的文件，但是如果我们刷新或重新加载页面，我们会丢失所有更改。

  如果你担心，没有问题，因为我们可以在接下来的步骤中保存我们的更改。

• 与工作区的文件夹关联

  通过单击文件系统标签页将文件夹添加到工作区，谷歌浏览器将要求确认，我们需要允许访问权限。通过单击，我们可以从资源管理器中打开我们系统的文件。

• 编辑和保存

  最后，我们现在可以编辑代码并按下 CTRL + S 键保存更改，然后刷新浏览器。

在 Mozilla Firefox 中编辑 JavaScript

Mozilla Firefox 为我们提供了其他插件来编辑浏览器内的 JavaScript 以实现相同的功能。

我们将通过几个步骤来研究 Firebug 等功能如何调试 JavaScript 代码。我们还可以查看突出显示的语法错误。

• 安装 Firebug 插件

  首先，我们需要从菜单中的附加主题安装 Firebug 插件。从菜单中，导航到插件并按名称 Firebug 搜索并安装。

• 创建并打开要编辑的页面

  我们可以在写字板、记事本等中编写我们的 JavaScript 代码。

  我们需要加载我们创建的 HTML 页面并打开 Firebug 控制台来创建一个 HTML 文件。然后导航到脚本标签页以查看该页面源的 JavaScript 代码。

• 断点调试

  要终止代码执行，我们可以使用断点；我们还可以指定代码范围以可视化错误。这对于调试非常有用。

• 更新更改的变量

  我们可以点击 Step over 按钮； Firebug 会更新所有变量，直到我们终止断点的执行。查看 Firebug 控制台在 Watch Window 上显示的值。

• 查看/加载更改

  最后，重新加载页面查看文件更改并按CTRL + R快捷键。