使用谷歌浏览器调试和编辑HTML页面中嵌入的JavaScript

Question

如果javascript位于.js文件中,Chrome开发者工具允许您在浏览器中编辑javascript.但是,它似乎不允许我编辑嵌入在HTML页面中的javascript.即:

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

这对我来说是个大问题,因为我在某个页面中有相当多的嵌入式javascript.

与此问题类似:编辑网页的JavaScript块...但这是关于firefox,而不是chrome.

如何使用Google Chrome开发者工具编辑嵌入HTML页面的JavaScript？

Answer 1

我很难找到具有内联/嵌入式JavaScript的文件.对于有同样问题的其他人,这可能有用也可能没有帮助......

使用适用于Windows的Chrome 21.0.1180.89 m

单击非常谨慎放置的按钮后会显示所有文件.看到:

现在你可以开始调试......

Answer 2

实际上chrome允许这样做,在Developer tools窗口的Sources选项卡中选择HTML文件.您将看到HTML而不是javascript,只需在<script>标记中添加断点即可.您还可以添加debugger;命令来编写要调试的脚本.例如:

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

debugger;当您想要发布您的网站时,不要忘记删除.

Answer 3

这些答案都没有对我有用.

对我有用的是,如果我已经加载了页面上的javascript,我可以复制该javascript,编辑它,然后将其粘贴到控制台中,它将重新定义任何函数或任何我需要重新定义的函数.

例如,如果页面具有:

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

我可以在脚本之间获取内容,编辑它,然后将其输入调试器,如:

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

它对我有用.

或者,如果你喜欢,

function foo() {
    doAThing();
}

你可以进入

function foo() {
    doSomethingElse();
}

和foo将被重新定义.

可能不是最好的解决方法,但它确实有效.