在浏览器中编辑 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快捷键。