在浏览器中编辑 JavaScript

Muhammad Muzammil Hussain 2023年1月30日
  1. 在 Google Chrome 中编辑 JavaScript
  2. 在 Mozilla Firefox 中编辑 JavaScript
在浏览器中编辑 JavaScript

你可以使用浏览器编辑和保存 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快捷键。

相关文章 - JavaScript Browser