javascript - WebStorm 中的断点未命中 JavaScript 调试

Question

我在 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 如何处理某些事情缺乏基本的了解。 :)

Answer 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