使用Chrome开发者工具编辑Javascript

Question

我正在尝试使用Chrome的开发者工具在网站上编辑javascript.我已经阅读了大约30个关于如何执行此操作的帐户以及观看了一些视频.事实上,当我进入"源"选项卡并打开我要编辑的文件时,我无法对其进行任何操作.我缺少一些步骤吗？

我可以创建断点,一步一步......等我无法编辑.最近是否删除了此功能？

Answer 1

我知道这个问题是陈旧的,但我遇到了类似的问题,并找到了解决方案.

如果您对该文件进行了美化,Chrome将不允许进行修改.我把它关了,能够编辑.愿意打赌这是你的问题.

作为旁注，如果您美化，然后复制并粘贴回原始文件，它将是一个可编辑的美化原始文件。 (6认同)
是的,这有帮助,谢谢@raddevon,我现在可以编辑它们,但页面没有任何影响 (4认同)
续:不.事实证明我和@raddevon有同样的问题.可能是chrome中的一个bug.您可以编辑和保存脚本,并且可以在调试时点击其中的断点.但实际运行的脚本仍然是原始的非编辑版本.示例:我编辑了脚本,评论了每一行,但仍然可以运行脚本,点击线上的断点等.因此编辑后的版本甚至没有运行,它只是显示...当然我重新启动脚本以各种不同的方式没有任何影响 (3认同)
对于搜索此主题的其他人：我已将美化设置为关闭但仍然无法编辑。再次打开和关闭它有帮助。（感谢 IT Crowd 的建议；）） (2认同)
@Eoin 太棒了！这完全成功了。借助“本地覆盖”功能，效果非常好。感谢您的提示:-) (2认同)

Answer 2

您可以在"源"选项卡上的开发人员工具中编辑javascript,但它只允许您在自己的文件中编辑javascript.嵌入在HTML(或PHP)文件中的脚本将保持只读.

Answer 3

它有一些局限性:

Answer 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将被重新定义.

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

Answer 5

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

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