WebStorm 中的断点未命中 JavaScript 调试答案

【问题标题】：Breakpoints in WebStorm not hitting for JavaScript debuggingWebStorm 中的断点未命中 JavaScript 调试
【发布时间】：2018-05-23 01:43:19
【问题描述】：

我在 WebStorm 中有以下配置设置：

当我单击调试时，它会正常启动 Chrome 并导航到页面，但我的断点永远不会被命中。它以某种方式连接，因为我在 WebStorm 中看到了所有 console.log() 输出。

我正在尝试导航到屏幕截图中指定的 URL，并在 main.js 中设置断点，但它没有按预期工作（请参阅：根本）。我不确定我错过了什么。我已经尝试在 Remote URLs 部分中为特定的 main.js 文件设置一个远程 URL，但这也没有帮助。

作为参考，我通过bra run 和npm run watch 运行应用程序。

快速更新

所以我实际上已经能够获得一个要命中的断点，但它位于不同的文件中（在不同的路径中）：

../public/app/core/routes/dashboard_loaders.ts 允许我在断点处停止，但../public/dashboards 不允许。

当我导航到http://localhost:3000/dashboard/script/main.js?orgId=1 时，它会到达路线：

.when('/dashboard/:type/:slug', {
    templateUrl: 'public/app/partials/dashboard.html',
    controller : 'LoadDashboardCtrl',
    reloadOnSearch: false,
    pageClass: 'page-dashboard',
  })

最终确实加载文件../public/dashboards/multi.js——但没有命中断点。

进一步更新

看起来脚本是通过the following command（../public/app/features/dashboard/dashboardLoaderSrv.js）提供的：

/*jshint -W054 */
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);

其中$routeParams 是type:script 和slug:main.js - 如果我进入此函数，我会得到一个与我的实际main.js 文件相同的匿名（？）文件，但名称类似于43550的main.js——我认为这归结为我对 JavaScript 如何处理某些事情缺乏基本知识。 :)

【问题讨论】：

您的浏览器是否有 IntelliJ 调试插件（当您尝试从 IDE 进行调试时，它是否显示为顶部的黄色横幅）？
我知道，它只在我右键单击并选择 Inspect in WebStorm 时显示——它会重新加载页面，但仍然没有命中断点（并且 WebStorm 中的控制台日志记录停止）跨度>
我真的不知道您的问题的根源，但作为一种解决方法，您可以使用 Chrome 调试器并编写“调试器；”如果开发工具打开，您的 Javascript 代码和 Chrome 将在此时中断。我比 WebStorm 调试器更喜欢它，因为它使用 proper colorization for warnings and errors。
这个 hack 的问题是它迫使我在任何我想停止的地方输入“调试器”，并且还要求我记得在提交之前返回并删除源中的每个 debugger 命令.
您还可以在 Chrome 调试器中设置断点，方法是打开 Sources 面板并单击左边距。不需要debugger; 声明。

标签： javascript intellij-idea webstorm remote-debugging run-configuration

【解决方案1】：

编辑：我发现这个issue for using webstorm with grafana（第二次编辑）看起来就是你。我认为他链接的内容通过声明一个 sourceUrl 来解决它，那么您的文件不是“匿名的”或者是动态的。

//# sourceURL=filename.js

I.E

//# sourceURL=main.js

参考How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?

这是有关在 webstorm 中调试的文档和视频，以确保一切设置正确。（即我的默认设置是调试我的索引文件而不是我的项目）。确保你有他们的Chrome extension 或Firefox Extension

General JS Debugging in Webstorm

Debugging for Chrome in Webstorm

Debugging for Firefox in Webstorm

Debugging Node.JS in Webstorm

【讨论】：

查看 git 问题后更新