如何在浏览器中编辑Javascript？

问题描述：

我正在寻找一种方法来在浏览器（例如Firefox）中即时编辑JavaScript并执行它。 Firebug允许我们即时编辑HTML和CSS，但JavaScript是一种痛苦。我必须回到源代码并修改它。如何在浏览器中编辑Javascript？

我不明白为什么浏览器开发人员工具不允许编辑。有没有办法做到这一点？

[更新]：标志着在2015年一个新的答案

快速指针：

IE现在提供同时编写JavaScript，最好的开发/调试体验
Chrome提供的智能感知其中一个很酷
FF的工作方式与2010年一样..！

人们可以使用所有三个（火狐，IE和Chrome）浏览器控制台更新现有的功能：说我有一个功能a()它用来做的console.log（“A”），我可以去到控制台，重新定义功能a()为alert('a')并再次执行以查看警报框。

当我问这个问题在2010年，浏览器没有那么大的调试JavaScript和我也很可能不知道的功能可以即时更换。

答

在Chrome中：打开Chrome DevTools - >源面板，浏览左侧导航，或按Ctrl键+Ø打开文件包含在页面中。

然后，你可以编辑该文件，然后按下Ctrl键+小号到保存的变化，看到新的代码会发生什么。我通常的破发点帮助做到这一点。

如果你正在调试，并希望将更改保存到本地文件系统，你可以右键点击导航，并选择将文件夹添加到工作区：

enter image description here

在这种情况下，如果您将更改保存在DevTools中，则文件系统中的相关文件也会更新。

例如我的文件夹添加到工作区中，它有一个1.js：

enter image description here

然后我编辑DevTools JS文件，变化在更新立即本地文件系统：

enter image description here

你知道吗，每当你重新访问web时，是否可以自动加载这些更改页面？ – 2015-04-24 20:43:04

就持久性而言，您可能必须将该站点克隆到您的系统本地，然后从此处继续。 – kpie 2015-04-25 02:23:16

答

当然，我发现执行JS（适用于Firefox）是在时间的帮助，而且我认为这是你在找什么：

https://addons.mozilla.org/en-US/firefox/addon/1729

它允许您查看和修改的Javascript在网页上。

哦..！我曾访问该网址earler ...它不会与FIrefox 3.6工作.. :( – Amit 2010-04-01 06:02:17

它服务的目的..更好的不得不等待下一个版本我相信.. – Amit 2010-04-01 09:05:30

有趣的是，不少扩展似乎不起作用与最新版本的Firefox ... – 2010-04-01 14:42:12

答

Chrome的就可以更改JS代码一个非常强大的功能。你基本上设置了一些断点，并且一旦打你按你的意愿编辑JS。 More info and demo - Paul Irish修复了一个破损的页面。

在FF的情况下，你可以使用Developer Edition：

JavaScript调试器 停止，单步，检查和修改的JavaScript在网页上运行。

任何想法为什么Firefox不提供该功能？我愿意使用Chrome，但由于我主要使用Firefox，所以它的解决方案会很好。 – 2015-04-18 09:10:07

@static_rtti在FF开发者版上寻找https://developer.mozilla.org/en-US/docs/Tools：JavaScript Debugger 停止，检查并修改在页面中运行的JavaScript。' 但我主要使用chrome。 – 2015-04-18 09:12:32

答

在Chrome版本42.0.2311我n开发者工具通过点击控制台你可以得到你可以编辑javascript的窗口，并且在按下回车键之后可以在浏览器中看到它的效果。

enter image description here

在开放后的开发工具通过点击控制台编辑在工具窗口的右侧和运行，以测试在浏览器中的Java脚本代码完成编辑后点击您的Java脚本代码Mozilla的版本37.0.1。

enter image description here

答

创建/编辑在浏览器中的JavaScript我会使用firebug（插件火狐）或内置在Firefox开发工具栏（最好用developer version of firefox使用）。

既然你的赏金评论是要求修复一个破损的网站，我会使用上述工具来创建一个JS代码片段来修复你的问题。之后，我不想每次都在开发人员工具栏中执行代码。

所以......一旦你创建了这个为你修复网站的JS片段，你可以使用GreaseMonkey（插件）在每次访问时执行网站修复脚本。这样，您可以正常使用该网站，而无需在每次加载页面时手动执行该网站。

答

铬提供了一个极好的工具在浏览器中编辑的JavaScript

第一步：启动开发工具打开Chrome，从本地文件系统/服务器所开放的开发工具加载一个页面工具菜单或按Ctrl + Shift + I/Cmd + Shift + I。导航到Source选项卡，然后单击Sources图标或点击Ctrl + O选择您的JavaScript文件

setp2：编辑您现在可以直接跳入并编辑您的代码。 Chrome还提供了一个有用的功能列表来帮助您找到正确的行 - 按Ctrl + Shift + O/Cmd + Shift + O

step3：保存按Ctrl + S/Cmd + S保存您的更改。这将更新内存中的文件并立即应用更改。但是，注意该代码不会再次启动，因此对初始化变量的更改不会受到影响。

要保存对原始文件的更改，请右键单击编辑器并选择保存或另存为 ...。一旦完成，您可以刷新页面，脚本将重新启动

步骤4：撤消更新是否会导致问题？右键单击编辑器并选择本地修改...。下面的窗格显示所有最近的更改并允许您恢复。

火狐提供了另一种工具，在浏览器中编辑的JavaScript

SETP1：启动暂存要打开便签窗口，按Shift F4，或转到Web Developer菜单（这是一个子菜单在OS X和Linux的Tools菜单中），然后选择Scratchpad。这将打开一个Scratchpad编辑器窗口。从那里你可以立即开始写一些JavaScript代码来尝试。

第2步：编辑 “文件”菜单提供了用于保存和加载JavaScript代码片段的选项，因此如果您喜欢，可以稍后重新使用代码。代码完成和类型信息仅在Firefox 32及更高版本中可用。要列出自动填充建议，请按Ctrl空间。要显示弹出窗口，请按下Firefox 32中的Shift Space或Firefox 33+中的Ctrl Shift Space。

第3步：执行编写代码后，选择要运行的代码。如果你不选择任何东西，窗口中的所有代码都会运行。然后使用Execute菜单或使用上下文菜单，选择希望代码运行的方式。该代码在当前选定的选项卡范围内执行。你在函数之外声明的任何变量都将被添加到该选项卡的全局对象中。

有四个执行选项可用。

运行
检查
显示
刷新和运行

答

这是目前无法在Firefox OTB。请参阅错误737743和486546。

在参考@artur-grzesiak，“停止，单步，检查和修改”似乎是指variables

如何在浏览器中编辑Javascript？

相关推荐