如何在同一页面上加载动态脚本后调​​试非动态脚本

时间:2014-11-19 16:48:13

标签: javascript google-chrome debugging

这个回答https://stackoverflow.com/a/10929430/749227 对于这个问题Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?是调试动态脚本的重点。

我面临的问题是我有一个页面上有一个脚本,并且在加载ajax请求后会触发一些HTML和一个放入页面的脚本。添加//# sourceURL=myDynamicDocumentFragment.html位后,我可以很好地调试动态脚本。

但是一旦它被加载,那么作为最初加载的外页的一部分的另一个脚本就会脱轨。我可以在空行上设置断点,并且不能在合法的行上设置断点。调试器将停在它们上,但它不会出现在代码中我所期望的位置。

看起来似乎是dev工具窗口显示原始脚本,调试器本身正在运行其他东西 - 一些包含外部页面脚本和动态脚本的更新版本的代码这是后来添加的。或者它可能只是显示它显示的行号以及它们实际运行的代码中映射的内容。

我希望我有一个很好的简单代码片段来演示这个问题,但我不知道。有没有人看过这个,有没有人知道如何让Chrome'刷新'开发工具脚本/调试器没有刷新页面? (它必须不刷新页面,因为在页面加载时工作正常 - 只有在动态脚本被丢弃后才会轮到车轮掉落)

注意:我已经使用Chrome进行了标记,因为我使用的是(第38页)。我不知道其他浏览器是如何运作的。

2 个答案:

答案 0 :(得分:0)

您可以找到注入head或evaluate的脚本,这是在youtube上添加的断点(另一个js文件)。

您也可以在chrome中找到它,添加console.log(单击显示的消息),并且您有源代码可以添加断点。

这里mozila打印调试/断点,在utube页面上评估脚本:

enter image description here

<强>更新

抱歉,我理解chrome不在范围内,我的英语:)

我是如何通过注入脚本对chrome进行调试的,但是如果脚本处于活动状态(页面加载加上几毫秒),有些情况下无法附加执行,则需要搜索变通方法。 在注入脚本的开头添加了这个:

//@ sourceURL=jseinjectedsource.js
console.log("evaluated");

和瞧瞧控制台:

enter image description here

比我的解释chrome developer

更好地检查这种方式

答案 1 :(得分:0)

检查您的脚本是否正在使用源映射(如果您正在使用TypeScript,则默认情况下这对VS项目通常是打开的)。 我发现Chrome在源地图方面非常糟糕,经常拒绝更新,或者在从代码中删除源地图行后停止显示它们。