使用Google Chromedebugging和编辑HTML页面中embedded的JavaScript

Chrome浏览器开发者工具允许您在浏览器中编辑javascript，如果javascript位于.js文件中。但是，它似乎并不允许我编辑embeddedHTML页面的JavaScript。即：

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

这对我来说是一个很大的问题，因为我在某个页面中embedded了相当多的javascript。

类似于这个问题：编辑网页的JavaScript块…生活，但这是关于Firefox，而不是铬。

如何使用Google Chrome开发者工具编辑embedded在HTML页面中的JavaScript？

实际上Chrome可以做到这一点，在开发工具窗口的Sources选项卡中selectHTML文件。您将看到HTML而不是JavaScript，并简单地在<script>标记中添加断点。你也可以添加debugger; 命令来编写您想要debugging的内容。例如：

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

不要忘记删除debugger; 当你想发布你的网站。

我有一个困难的时间查找有我的内嵌/embedded式JavaScript的文件。对于其他人有相同的问题，这可能会也可能不会有帮助…

用于Windows的Chrome 21.0.1180.89米

在这里输入图像说明

点击非常谨慎放置的button后，所有文件都会显示。看到：

在这里输入图像说明

现在你可以开始debugging…

在这里输入图像说明

这些答案都没有为我工作。

什么对我来说是有效的，如果我已经加载了我的JavaScript，我可以复制该JavaScript，编辑它，然后将其粘贴到控制台，它将重新定义任何function或任何我需要重新定义。

例如，如果页面有：

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

我可以在脚本之间获取内容，编辑它，然后将其input到debugging器中，如下所示：

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

它会为我工作。

或者如果你有，

 function foo() { doAThing(); }

你可以input

 function foo() { doSomethingElse(); }

而foo将被重新定义。

可能不是最好的解决方法，但它的工作原理。

转到元素选项卡，find您的脚本，右键单击您需要的部分，然后select“编辑为HTML”。

如果“编辑为HTML”不显示，请双击该节点，并将其突出显示并可编辑。