How can I debug my AngularJS application with WebStorm if it is served by a server other than WebStorm?

Question

Imagine I use the following gulp task to serve my website:

gulp.task("server", ['build'], function () {
    $.util.log($.util.colors.green("Server started at http://localhost:" + 4000));
    server.listen(PORT);

    open("http://localhost:" + PORT);
});

and here is the server code:

server.get("*", function(req, res){
    var base = __dirname + "/dist";
    var path = base + decodeURIComponent(req.path);
    console.log(path);
    try{
        var stat = fs.lstatSync(path);

    }
    catch(e){
        res.sendFile('index.html', { root: base });
        return;
    }
    if(stat.isFile())
        res.sendFile(path);
    else{
        res.sendFile('index.html', { root: base });
    }
});

I wanted to know how can I use the WebStorm debugger for my application?

Answer 1

What are you trying to debug - your angular application, or the server it's hosted on? To debug your server-side code, you need using Node.js Run configuration (see https://blog.jetbrains.com/webstorm/2014/05/guide-to-node-js-development-with-webstorm/, https://confluence.jetbrains.com/display/WI/Running+and+debugging+Node.js+application#RunninganddebuggingNode.jsapplication-DebuggingNode.jsapplocally)

To debug client side, you have to create JavaScript Debug run configuration, specify the URL of your Node.js server (http://localhost:4000, or whatever it is), add remote URL mappings (if necessary) - see https://www.jetbrains.com/help/webstorm/2022.2/debugging-javascript-in-chrome.html#debugging_js_on_external_web_server