WebStorm中的断点不适用于JavaScript调试 [英] Breakpoints in WebStorm not hitting for JavaScript debugging
问题描述
我在WebStorm中进行了以下配置设置：
I have the following configuration setup in WebStorm:
当我点击调试时，它会很好地启动Chrome并导航到该页面，但我的断点永远不会受到影响。它以某种方式连接，因为我在WebStorm中看到了所有 console.log（）输出。
When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the console.log() output in WebStorm.
我是尝试导航到屏幕截图中指定的URL，并在 main.js 中遇到断点，但是它没有按预期工作（参见：at）。我不确定我错过了什么。我已经尝试为远程URL 部分中的特定 main.js 文件设置远程URL，但这也无济于事。
I'm trying to navigate to the URL specified in the screenshot and have breakpoints in main.js get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific main.js file in the Remote URLs section, but that didn't help either.
作为参考，我通过 bra run 和运行应用程序npm run watch 。
快速更新
所以我已经能够实际上得到一个断点，但它在一个不同的文件中（在不同的路径中）：
So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):
../ public / app / core / routes / dashboard_loaders.ts 允许我在断点处停止，但 ../ public / dashboards 不允许。
../public/app/core/routes/dashboard_loaders.ts allows me to stop at breakpoints, but ../public/dashboards doesn't.
当我导航到 http：// localhost：3000 / dashboard / script / main.js？orgId = 1 ，它命中了路线：
When I navigate to http://localhost:3000/dashboard/script/main.js?orgId=1, it hits the route:
.when('/dashboard/:type/:slug', {
templateUrl: 'public/app/partials/dashboard.html',
controller : 'LoadDashboardCtrl',
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
最终 加载文件 ../ public /dashboards/multi.js - 但没有命中断点。
Which ultimately does load the file ../public/dashboards/multi.js -- but no breakpoints are hit.
进一步更新
看起来脚本是通过以下命令（在 ../ public / app / features / dashboard / dashboardLoaderSrv.js 中）：
It looks like the script is served via the following command (in ../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对JavaScript的处理方式缺乏了解。 ：）
Where $routeParams are type:script and slug:main.js - If I step into this function, I get an anonymous(?) file that's identical to my actual main.js file, but the name is like 43550 instead of main.js -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)
推荐答案
编辑：我发现这个使用带有grafana的webstorm的问题（第二次编辑）看起来就像这样。
我认为他链接的内容通过声明sourceUrl来解决它，然后你的文件不是匿名的或者说是动态的。
I found this issue for using webstorm with grafana (second edit) looks like this is you. I think what he linked solves it with declaring a sourceUrl then your file isn't "anonymous" or rather dynamic.
//# sourceURL=filename.js
IE
//# sourceURL=main.js
参考如何在浏览器的调试器本身中调试动态加载的JavaScript（使用jQuery）？
这是文档和视频在webstorm中进行调试，以确保一切正常。 （I.E我的默认设置是调试我的索引文件而不是我的项目）。确保您拥有 Chrome扩展程序或 Firefox扩展
Here is the documentation and video on debugging in webstorm to make sure everything is setup properly. (I.E My default setting were to debug my index file instead of my project). Make sure you have their Chrome extension or Firefox Extension
这篇关于WebStorm中的断点不适用于JavaScript调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
