Chrome中的调试方法：确定Onload事件结束后执行的代码行

Question

我在javascript中有一个功能。例如：

function Sample(){
    var myid_signature_image  = new Image(); 
    myid_signature_image.onload = function () {                              
        alert('Two');                                                                                                                           
    }; 
    alert('One');
}

我在函数的每一行都放了一个断点。首先显示One，然后Two。在onload事件之后，某些javascript函数会干扰我的代码。我如何知道使用Google Chrome Developer Tools的代码行？

Answer 1

使用Chrome DevTools的 timeline 。

过滤掉紫色（渲染）和绿色（绘画）事件，因为这不是您感兴趣的事件。

您可以使用console.timeStamp("Marker name");以编程方式在时间轴中添加标记。这可能有助于您找到时间范围：

myid_signature_image.onload = function () {
    console.timeStamp("Image loaded");
};

如果火焰图视图未激活，标记将在时间轴中呈现为一个小的彩色条。将鼠标悬停在其上可查看时间戳标签。您还可以使用搜索框来查找事件。见下面的捕获：

一旦找到与图像加载事件后执行的javascript相对应的事件，您就可以从那里跳转到脚本代码行。

Answer 2

启动开发人员工具（Ctrl + Shift + I），在“来源”标签下，在alert('Two');行放置一个断点。通过浏览器执行html操作，在这种情况下onload需要刷新，它将在断点处停止。从这里开始，只需按F10（跳过下一个函数调用），它就会告诉您在onload事件后执行的下一行。