使用 Chrome 开发者工具编辑 Javascript

Posted 2023-02-19

【中文标题】使用 Chrome 开发者工具编辑 Javascript

【英文标题】：Editing Javascript using Chrome Developer Tools

【发布时间】：2012-09-17 13:46:05

【问题描述】：

我正在尝试使用 Chrome 的开发者工具编辑网站上的 javascript。我已经阅读了大约 30 个关于如何执行此操作的帐户并观看了一些视频。事实是，当我转到源选项卡并打开要编辑的文件时，我无能为力。有没有我遗漏的步骤？

我可以创建断点、单步执行等...我只是无法编辑。最近是否删除了此功能？

【问题讨论】：

我可以在控制台中拨打电话就好了。我根本无法编辑内容。

您可以覆盖本地函数和变量，但无法从开发工具保存对文件的更改。你仍然需要一个外部编辑器。

实际上，我可以编辑css文件但不能编辑嵌入在php文件中的脚本。 >.>

好吧，我可以用 Opera 做我想做的事。问题解决了。

@cooperia 将您的 js 代码放入 *.js 文件中，然后您就可以在 chrome 中实时编辑和运行它。

【参考方案1】：

我知道这个问题已经过时了，但我刚刚遇到了类似的问题并找到了解决方案。

如果您对文件进行了美化，Chrome 将不允许编辑。我将其关闭并能够进行编辑。愿意打赌这是/曾经是你的问题。

【讨论】：

是的，这有帮助，谢谢@raddevon，我现在可以编辑它们，但页面没有任何影响

对于搜索此主题的其他人：我已将美化设置为关闭，但仍无法编辑。再次打开和关闭它有帮助。 （感谢 IT Crowd 的建议；））

继续：不。原来我和@raddevon 有同样的问题。也许是 chrome 中的一个错误。您可以编辑和保存脚本，调试时可以在其中打断点。但实际运行的脚本仍然是未经编辑的原始版本。示例：我编辑了脚本，注释了每一行，但仍然可以运行脚本，在行上打断点等。所以编辑后的版本甚至没有运行，它只是被显示......当然我重新启动了脚本以各种不同的方式没有任何效果

附带说明，如果您美化，然后复制并粘贴回原始文件，它将是可编辑的美化原始文件。

@Eoin 太棒了！这完全成功了。并且使用“本地覆盖”功能，这可以完美地工作。感谢您的提示:-)

【参考方案2】：

您可以在“源”选项卡上的开发人员工具中编辑 javascript，但它只允许您在自己的文件中编辑 javascript。嵌入在 html（或 PHP）文件中的脚本将保持只读状态。

【讨论】：

我在 linux 上使用 chrome，即使它是一个 .js 文件，我仍然无法编辑它。

有点有趣的注意事项：打开/关闭漂亮打印（“”图标）将启用编辑嵌入式 js，但更改不会生效，所以它仍然不是我们想要的. （铬 29）

这就是我需要知道的。谢谢。

【参考方案3】：

它有一些限制：

必须是 JS 文件。不能在 html 页面中嵌入标签。

不能美化。

【讨论】：

如果在遵循上述指南之后，Sources 选项卡中的更改仍未生效，请尝试在左侧树状视图中右键单击已编辑的文件并选择“保存”。可能会出现一个对话框，要求您保存本地文件，但您可以取消。只有到那时，Chrome 的编辑历史才最终显示编辑卡住了。

我快疯了，因为这个新文件嵌入了 js，但我无法编辑..我不明白为什么..谢谢#gcb 和 #welah

是否可以从开发者工具Sources标签下的列表中取消包含JS文件？

@techie_28 不确定，打开另一个问题。但我会为此写一个快速扩展。

【参考方案4】：

我不知道你是否需要这个永久保存，但如果你只需要临时修改js：

我可以将要修改的 javascript 复制到文本编辑器中，对其进行编辑，然后将其粘贴到控制台中，它将重新定义任何函数或我需要重新定义的任何内容。

例如，如果页面有：

<script>
var foo = function()  console.log("Hi"); 
</script>

我可以获取脚本之间的内容，对其进行编辑，然后将其输入到调试器中，例如：

foo = function()  console.log("DO SOMETHING DIFFERENT"); 

它对我有用。

如果你喜欢，

function foo() 
    doAThing();

你可以直接输入

function foo() 
    doSomethingElse();

而 foo 将被重新定义。

可能不是最好的解决方法，但它确实有效。将持续到您重新加载页面。

【参考方案5】：

我确实搜索过“chrome dev tool edit javascript”。此页面是第一个搜索结果。但它太过时了，对我没有帮助。

我使用的是 Chrome 73，这个版本的 Chrome 有“启用本地覆盖”选项。使用该函数，我可以编辑一个 javascript 并可以运行和调试。

【参考方案6】：

我的解决方案：

在 devtools 首选项中选中启用本地覆盖。 转到网络选项卡，找到要编辑的文件，单击它并选择保存以覆盖（在源/覆盖选项卡上，您需要添加本地文件夹） 该文件作为本地副本显示在“源”选项卡上的新选项卡中，因此您可以编辑此文件，在站点重新加载后，新的（和已编辑的）覆盖文件将加载到站点上！