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 事件之后接下来执行的行。

Chrome中的调试方法：识别Onload事件结束后执行哪行代码

Debugging Method in Chrome: Identify what line of code is executed after Onload event ended

javascript

debugging

google-chrome

onload

google-chrome-devtools