it-swarm.cn

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

如果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?

54
Mark Robinson

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

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

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

29
antyrat

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

使用 适用于Windows的Chrome 21.0.1180.89 m

enter image description here

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

enter image description here

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

enter image description here

30
Theo

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

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

例如,如果页面具有:

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

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

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

它对我有用。

或者,如果你喜欢,

function foo() {
    doAThing();
}

你可以进入

function foo() {
    doSomethingElse();
}

和foo将被重新定义。

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

17
byronaltice

转到Elements选项卡,找到您的脚本,右键单击您需要的部分,然后选择“Edit as HTML”。

如果未显示“编辑为HTML”,请双击该节点,该节点应突出显示并可编辑。

1
brimble2010