我正在使用Chrome开发者工具尝试编辑网站上的JavaScript。 我已经阅读了大约30个关于如何执行此操作的帐户，并观看了一些视频。 事实是，当我进入“来源”选项卡并打开要编辑的文件时，我不能对其进行任何操作。 我是否错过了某些步骤？
我可以创建断点，逐步执行等...只是无法编辑。 最近是否删除了此功能？
使用Chrome开发者工具编辑Javascript
106
- cooperia
15
1我可以在控制台中正常进行调用。但是我无法编辑东西。 - cooperia
1你可以覆盖本地函数和变量，但是无法通过开发工具保存文件更改。你仍然需要使用外部编辑器来完成这个任务。 - Geuis
1实际上，我可以编辑CSS文件，但无法编辑嵌入在PHP文件中的脚本。 >.> - cooperia
1好的，我可以在Opera中做我想做的事情。问题已经解决了。 - cooperia
1@cooperia 将你的JS代码放在*.js文件中，然后你就可以在Chrome中实时编辑和运行它。 - Mahn
显示剩余10条评论
6个回答
123
我知道这个问题已经很久了，但是我最近遇到了类似的问题并找到了解决方法。
如果你的文件已经被美化过，Chrome将不允许进行编辑。我关闭了它，就能够进行编辑了。我愿意打赌这就是/曾经是你的问题。
- raddevon
8
5是的，那很有帮助，谢谢@raddevon。我现在可以编辑它们，但页面没有任何变化。 - ElieH
2对于其他搜索此主题的人：我将 prettify 设置为 OFF，但仍无法编辑。将其打开和关闭再次有所帮助。（感谢 IT Crowd 的建议 ;) ） - Drkawashima
4继续：不行，结果发现我和@raddevon有相同的问题。可能是chrome的一个bug。你可以编辑并保存脚本，在调试时可以触发断点。但实际运行的脚本仍然是原始的未经编辑的版本。例如：我编辑了脚本，注释掉每一行，但仍能运行脚本，并在这些行上触发断点。因此，编辑后的版本甚至没有在运行，只是被显示出来...当然，我已经以各种不同的方式重新启动了脚本，但没有任何效果。 - Drkawashima
10顺便提一下，如果您对文本进行了美化，然后将其复制并粘贴回原始文件，那么将得到一个可编辑的已美化原始文件。 - Eoin
2@Eoin 太棒了！这完全解决了问题。在使用“本地覆盖”功能后，它可以完美地工作。感谢你的提示 :-) - Xan-Kun Clark-Davis
显示剩余3条评论
60
您可以在开发者工具的 "Sources" 标签上编辑 JavaScript，但它只允许您编辑其自己的文件中的 JavaScript。嵌入在 HTML（或 PHP）文件中的脚本将保持只读状态。
- welah
3
4我正在Linux上使用Chrome浏览器，即使是单个的.js文件，我仍然无法编辑JavaScript。 - roopunk
2有趣的是：切换Pretty Print（“{}”图标）可以启用编辑嵌入式js，但更改不会生效，所以这仍然不是我们要找的。 （Chrome 29） - Patrick
1那就是我需要知道的。谢谢。 - geeves
34
它有一些限制：
必须是JS文件，不能在HTML页面中嵌入标签。
无法进行代码美化。
- gcb
4
如果按照上述指南进行操作并在“源”选项卡中进行更改后，更改仍未生效，请尝试右键单击左侧树视图中的编辑文件，然后选择“保存”。可能会出现对话框要求您保存本地文件，但您可以取消。只有在这一点上，Chrome的编辑历史记录才会显示编辑已经生效。 - Erhhung
我因为这个新文件嵌入了JS但我无法编辑而感到疯狂...我不明白为什么...谢谢#gcb和#welah。 - carinlynchin
在开发者工具的“Sources”选项卡下的列表中，是否有可能取消包含JS文件？ - techie_28
@techie_28 不确定，可以开另一个问题。但我可以写一个快速的扩展程序来解决这个问题。 - gcb
15
我不知道您是否需要将此内容永久保存，但如果您只需要暂时修改JavaScript，则可以将要修改的JavaScript复制到文本编辑器中进行编辑，然后将其粘贴到控制台中，它会重新定义任何需要重新定义的函数或其他内容。
例如，如果页面上有：
<script>
var foo = function() { console.log("Hi"); }
</script>
我可以取出 script 标签中的内容，进行编辑，然后将其输入调试器中，如下所示：
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
并且它对我而言是可行的。
或者如果你有类似的需求，
function foo() {
doAThing();
}
您可以直接输入
function foo() {
doSomethingElse();
}
并且foo将被重新定义。
可能不是最好的解决方法，但它有效。直到你重新加载页面。
- byronaltice
10
我搜索了“chrome dev tool edit javascript”，这个网页是第一个搜索结果。但它过时了，对我没有帮助。
我使用的是Chrome 73版本，此版本有“启用本地覆盖”选项。使用此功能，我可以编辑javascript代码并运行和调试。
我使用的是Chrome 73版本，此版本有“启用本地覆盖”选项。使用此功能，我可以编辑javascript代码并运行和调试。
- wafe
1
我的解决方案：
- 在开发工具的首选项中勾选启用本地覆盖。
- 转到网络选项卡，找到要编辑的文件，在其上右键单击并选择保存以进行覆盖（在源/覆盖选项卡上，您需要添加一个本地文件夹）
- 该文件将出现在“源”选项卡上的新标签页中，因此您可以编辑此文件，并在网站重新加载后加载新的（和编辑过的）覆盖文件！
- Péter Zajácz
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接