Remote Webpack debugging Angular-cli v6 / WebPack on Apache
I am using PhpStorm 2018.1.6 and need to debug and Angular-CLI v6 application running on a remote Apache server. I am unable to get the breakpoints to fire although the debug console displays console.log messages.
I can run and debug when using the development server using the following command:
"ng serve --disable-host-check --public-host=myserver.com --host=0.0.0.0"
The he following build command will create a development build and put the .js and .map files in dist/test3/dist.
"ng build --watch --base-href=/PHP/test3/dist/test3/"
The URL to access this build is
http://myserver.com/PHP/test3/dist/test3/
The app will run as expected but will not stop on set break points.
The source is in
http://myserver.com/PHP/test3
How can I configure PhpStorm to use the local source and the remote map files to fire breakpoints.
Thanks for all your help.
请先登录再写评论。
Just checked this - debugging works out of the box:
my debug condiguration:
I have deployment mappings set up as follows (I'm deploying files located in C:\downloads\test3 to Apache server):
Build is started with
"ng build --watch --base-href=/PHP/test3/dist/test3/"Thank you for your assistance. Using your example, I was able to do the same with a windows based Apache server local to my work PC. Debugging worked as you indicated. When running you will notice a similar scripts configuration in the debug tool:
Note the mapping of the ng:// and webpack://. URLs
When the debug is configured to use a remote (Linux) Apache server connected using SSH, the webpack:// mapping is missing.:
I have tried following the suggestions found here by adding webpack://. with various numbers of slashes (/) to no effect.
Suggestions?
I don't actually think that the server location makes any difference here... What do your deployment settings look like? Please provide screenshots of Settings | Build, Execution, Deployment | Deployment, Connection and Mappings tabs, and screenshot of your run configuration
Just checked - debugging works on remote Apache accessed through ssh (sftp). My deployment preferences:
Thank you for your post. I rebuild a clean angular-cli 6 project and now both local and remote debugging works as expected.
Now if I could only get the live reload feature to work when use ng build --watch like it does when doing ng serve.
Live reload functionality is something that the server provides.
ng build -wonly builds files and not serve them. And Apache, AFAIK, doesn't provide its own hot reload support, unlike webpack dev server that is used byng serve