使用 Chrome 开发者工具编辑 Javascript答案

【问题标题】：Editing Javascript using Chrome Developer Tools使用 Chrome 开发者工具编辑 Javascript
【发布时间】：2012-09-17 13:46:05
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

是的，这有帮助，谢谢@raddevon，我现在可以编辑它们，但页面没有任何影响
对于搜索此主题的其他人：我已将美化设置为关闭，但仍无法编辑。再次打开和关闭它有帮助。（感谢 IT Crowd 的建议；））
继续：不。原来我和@raddevon 有同样的问题。也许是 chrome 中的一个错误。您可以编辑和保存脚本，调试时可以在其中打断点。但实际运行的脚本仍然是未经编辑的原始版本。示例：我编辑了脚本，注释了每一行，但仍然可以运行脚本，在行上打断点等。所以编辑后的版本甚至没有运行，它只是被显示......当然我重新启动了脚本以各种不同的方式没有任何效果
附带说明，如果您美化，然后复制并粘贴回原始文件，它将是可编辑的美化原始文件。
@Eoin 太棒了！这完全成功了。并且使用“本地覆盖”功能，这可以完美地工作。感谢您的提示:-)

【解决方案2】：

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

【讨论】：

【解决方案3】：

它有一些限制：

【讨论】：

如果在遵循上述指南之后，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】：

我的解决方案：

【讨论】：