使用 Google Chrome 逐行调试 Javascript

Posted 2023-03-07

【中文标题】使用 Google Chrome 逐行调试 Javascript

【英文标题】：Javascript Debugging line by line using Google Chrome

【发布时间】：2012-05-25 04:01:49

【问题描述】：

如何在不进入 javascript 库的情况下使用 Google Chrome 开发人员工具逐行遍历我的 javascript 代码？

例如，我在我的网站上大量使用 jQuery，我只想调试我编写的 jQuery，而不是 jquery 库中的 javascript/jquery。如何只单步执行我自己的 jquery/javascript 而不必单步执行 jquery 库中的数百万行？

如果我有以下情况：

function getTabFrame() 
    $.ajax(
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) 
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        ,
        success: function(data) 
            $.each(data, function(index, item) 
                // do something here
            );
        
    );

如果我将断点放在$.ajax(，如果我开始调试它停止的地方，如果我然后按 F11，它会直接进入 jQuery 库。我不希望这种情况发生，我希望它转到下一行 url: 'get_tab_frame.aspx?rand=' + Math.random(),。

我曾尝试按 F10，但这直接导致函数的关闭 。而 F5 只是进入下一个断点，而不是逐行逐行执行。

【问题讨论】：

你主要在什么时候遇到问题？什么时候遇到异常？

基本上，我有太多的 javascript，以至于我无法再在脑海中看到它的结构，所以我只是想通过我自己的代码来提醒自己它是如何工作的在哪里寻找问题...

这听起来很像***.com/questions/7827882/…

***.com/a/19032178/3408 看起来是您需要的答案。

您可能还会发现这很有用：How-to-terminate-script-execution-when-debugging-in-Google-Chrome

【参考方案1】：

...如何在不进入 javascript 库的情况下使用 Google Chrome 开发人员工具逐行遍历我的 javascript 代码？...

---

郑重声明：目前（2015 年 2 月）Google Chrome 和 Firefox 都拥有您（和我）需要避免进入库和脚本以及超出我们感兴趣的代码的内容，称为 Black拳击：

当您对源文件进行黑盒处理时，调试器不会跳转到该源文件 单步执行您正在调试的代码时的文件。

更多信息：

铬：Blackbox JavaScript Source Files 火狐：Black box libraries in the Debugger

【讨论】：

就是这样，这对调试非常有用，谢谢。

【参考方案2】：

假设您在 Windows 机器上运行...

点击F12 键 在开发者工具中选择Scripts或Sources标签 点击顶层的小文件夹图标 选择您的 JavaScript 文件 通过单击左侧的行号添加断点（添加一个蓝色小标记） 执行你的 JavaScript

然后在执行调试期间你可以做一些步进动作......

F8 Continue：会一直持续到下一个断点 F10 Step over：跳过下一个函数调用（

不会

进入 图书馆） F11 Step into：进入下一个函数调用（

将

进入图书馆） Shift + F11 Step out: 走出当前 功能

更新

阅读您更新的帖子后；要调试您的代码，我建议暂时使用jQuery Development Source Code。虽然这并不能直接解决您的问题，但可以让您更轻松地进行调试。对于您要实现的目标，我相信您需要进入库，因此希望生产代码可以帮助您破译正在发生的事情。

【讨论】：

请查看我的问题中的附加信息，以举例说明正在发生的事情。我感觉 Google Chrome 的开发者工具无法逐行逐行进行类型调试？

我已经更新了我的答案，希望它能进一步帮助。

除非我记错了，在Chrome开发者工具中，我相信F5会刷新页面； F8 是继续键，不是吗？

F5 也将持续到结束，此时它将刷新

如果我的 js 代码在 html 文件中怎么办？？