当我在谷歌Chrome中打开开发人员工具时,我看到了各种各样的功能,如配置文件,时间线和审计,但基本功能,如能够在js文件和html和javascript代码中设置断点是缺失的!我尝试使用javascript控制台,它本身就有bug——例如,一旦遇到JS错误,除非刷新整个页面,否则我无法摆脱它。有人能帮忙吗?


当前回答

我遇到了这个问题,但是我的内联函数是在一个angularJS视图中。因此,在加载时,我无法访问内联脚本来添加调试,因为只有index.html在调试器的sources选项卡中可用。

这意味着,当我打开特定的视图与我的内联(没有选择在这)是不可访问的。

我能击中它的唯一方法是把一个错误的函数或调用内联JS函数。

我的解决方案包括:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

这意味着当我点击我的按钮,我就会在chrome控制台提示。

Uncaught TypeError: undefined is not a function 

这里重要的事情是它的来源:VM5658:6单击它可以让我遍历内联并将断点保留在那里以供以后使用。

极其复杂的到达方式。但是当处理动态加载视图的单页应用程序时,它是有用的。

虚拟机[n]无显著值,n on等于脚本ID。此信息可以在这里找到:Chrome“[VM]”

其他回答

这是上文Rian Schmits回答的延伸。在我的例子中,我在JavaScript代码中嵌入了HTML代码,除了HTML代码,我看不到其他任何东西。也许Chrome调试已经改变了多年,但右键单击源/源选项卡给我添加文件夹到工作区。我可以添加我的整个项目,这让我可以访问我所有的JavaScripts。你可以在这个链接中找到更多细节。我希望这能帮助到一些人。

使用sources选项卡,可以在那里用JavaScript设置断点。在它下面的目录树中(其中有上下箭头),您可以选择要调试的文件。您可以通过按下同一选项卡右侧的resume来摆脱错误。

添加调试器;我的剧本对我很有用。

在脚本选项卡上打开开发人员工具时,刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目,显示页面的html(包括脚本)。从这里可以添加断点。

我也有同样的问题,如何调试JavaScript是在<script>标签。但后来我在Sources选项卡下找到了它,名为“(index)”,带圆括号。单击行号以设置断点。

这是Chrome 71。