如何使用WebStorm调试Webpack-dev-server(在内存中)?

问题描述 投票:8回答:4

根据WebStorm,它们要求我们根据:https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/中指定的dist目录进行调试

但是,根据Webpack建议的开发过程,我们应该运行webpack-dev-server,所以它的所有内存都在:

webpack-dev-server -inline -progress -colors -display-error-details -display-cached -hot -port = 3000

所以没有dist目录,这与@ @ qazxsw poi发布的例子相矛盾

有没有办法让webpack-dev-server使用dist dir,这样可以将WebStorm映射到它,这样我们就可以使用源映射进行实时调试了?

仅供参考我这是我用来测试的项目:

https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

TX

肖恩

intellij-idea webstorm webpack angular
4个回答
5
投票

目前,WebStorm需要从WebPack创建的Bundle + SourceMap来分析它并找到实际的断点。

简而言之,您无法仅使用WebPack DevServer调试WebPack应用程序。但是,您可以运行正常的WebPack构建,并与文件并行查看:`


2
投票

如您所知,您必须使用源映射创建分发/生产捆绑包,然后在WebStorm中使用它进行调试。就个人而言,当我运行webpack-dev-server时,我用Karma运行测试。可以使用调试器运行Karma测试,这通常可以满足我的任何调试需求,而webpack-dev-server提供我的“手动测试”以查看我的工作情况。

我想我的意思是你的情况......你可以让dev服务器运行,同时,有一些自动构建,源代码地图在你可以运行的同一时间运行并使用调试器上。这可能是密集的,因此它取决于您的内存和处理能力。


2
投票

我最终使用了实时服务器https://github.com/ocombe/ng2-webpack并按照本教程,工作... https://github.com/tapio/live-server(只是不能在webpack中使用内置服务器,但没关系)


1
投票

我想补充一点,你可以把声明

调试器;

在你的javascript / typescript文件中甚至在angular或vue2的框架文件中,如* .vue

因此,即使您的路径映射到URL不起作用,它仍然会步进。

© www.soinside.com 2019 - 2024. All rights reserved.