使用Google Chrome调试和编辑嵌入在HTML页面中的javascript

如果javascript位于.js文件中，Chrome developer tools允许您在浏览器中编辑javascript。然而，它似乎不允许我编辑嵌入在HTML页面中的javascript。即：

<script type="text/javascript> 
// code here that I want to debug/edit
</script> 

---

实际上chrome允许这样做，请在开发者工具窗口的源选项卡中选择HTML文件。您将看到HTML而不是javascript，只需在
标记中添加断点即可。还可以添加
调试器用于编写要调试的脚本的命令。例如：

<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>


//一些代码
调试器；//这是您的断点
//您可以调试的其他代码

不要忘记删除
调试器。
进入“元素”选项卡，找到你的脚本，右键单击你需要的部分并选择“编辑为HTML”

如果“编辑为HTML”未出现，请双击该节点，该节点应高亮显示并可编辑。
我很难找到包含内联/嵌入式javascript的文件。对于其他有同样问题的人来说，这可能有帮助，也可能没有帮助

在Windows上使用Chrome 21.0.1180.89 m


所有文件都会在点击这个非常谨慎的按钮后显示。见：


现在您可以开始调试

这些答案对我都不起作用

对我来说，如果我已经在页面上加载了javascript，我可以复制javascript，编辑它，然后将它粘贴到控制台中，它将重新定义任何函数或需要重新定义的任何内容

例如，如果页面具有：

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

这对我来说很有用

或者如果你喜欢

function foo() {
    doAThing();
}

你可以进去

function foo() {
    doSomethingElse();
}

而foo将被重新定义

可能不是最好的解决方法，但它很有效。
此处介绍的解决方案：

在内联/嵌入脚本中添加“sourceURL”指令，如下所示：

<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>


…这里的脚本。。。
//#sourceURL=helperJavaScript.js

然后这个脚本将出现在页面源代码中，您可以像从URL源加载的js一样调试和编辑它
仍然不为我工作。让我们举个例子。使用Chrome浏览并启动开发工具。我可以在“脚本”选项卡下编辑.js文件，但如果我尝试在该选项卡下编辑“www.google.co.uk/”或“gzip.html”文件，则不会发生任何事情。我双击了代码，但没有像单击.js文件那样得到编辑光标。我遗漏了什么吗？？？你是对的，但是你可以在
元素
选项卡上编辑它。另外，通过添加断点，你可以使用consoleBlimey编辑你的脚本！就这样！好东西安提拉！谢谢。有关如何使用控制台替换javascript的信息，请参阅此线程中@byronaltice的答案。您可以使用Opera。Opera允许编辑内嵌JS和JS文件。软重新加载页面后，将应用所做的更改。右键单击>源>进行更改>应用更改。@XP1从未想到我会+1一个Opera解决方案。但我们到了+1用于Opera中的实时编辑。如果您在JS断点上暂停时在“编辑为HTML”中更改JS代码，则不会修改“源”选项卡中的JS代码。该笑脸需要NSA鼻子。有时，在单击内容时，Google Chrome会将您从“元素”选项卡中移除，即使您从那里开始。因此，如果无法编辑内容，请仔细检查是否在“元素”选项卡中。不幸的是，即使允许添加断点，脚本元素的内容也不可编辑。铬V37@MaksimVi. 在断点已经执行之后，不要尝试更改代码。从列表中拾取代码后立即编辑代码。按Ctrl+S组合键应用更改。一旦代码在VM中运行，您就无法更改它，但您只需从列表中选择它即可更改它。非常感谢您的回答！这是唯一一个对我也有效的…非常感谢！这不是我要找的，但它是唯一有效的！在没有登录stackoverflow的浏览器中打开此页面。。。登录只是为了投票支持这个答案。非常感谢这个解决方案！我在Chrome v51.x上。除了此解决方案，本论坛或我检查的其他几个解决方案都不适用于我。我不知道为什么Chrome不允许我编辑嵌入HTML的JS。它允许我编辑DOM（添加/删除元素或编辑样式），但不允许编辑标记。在阅读了您提出的解决方案后，我在控制台上进行了所需的修改，重新定义了我的函数，它工作得非常出色。非常感谢你+1.如果您要重写的函数是全局函数，则此操作有效，但如果它位于IIFE中，则控制台将不会有帮助。在这种情况下，您需要使用本地覆盖，如本答案中所述：
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>