如果我的 AngularJS 应用程序由 WebStorm 以外的服务器提供服务，我如何使用 WebStorm 调试它？答案

【问题标题】：How can I debug my AngularJS application with WebStorm if it is served by a server other than WebStorm?如果我的 AngularJS 应用程序由 WebStorm 以外的服务器提供服务，我如何使用 WebStorm 调试它？
【发布时间】：2017-10-08 14:31:28
【问题描述】：

假设我使用以下 gulp 任务来服务我的网站：

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

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

这是服务器代码：

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 });
    }
});

我想知道如何将 WebStorm 调试器用于我的应用程序？

【问题讨论】：

试试 Chrome 扩展程序~jetbrains.com/help/webstorm/2017.1/…
@Phil 我安装了扩展，在 webstorm 中我将端口号设置为 4000，但我得到了 webstorm 生成的 404。
你改了什么端口号？ Settings | Build, Execution, Deployment | Debugger 中的那个？请确保将其设置回默认值 (63342)。这些设置与您的 Node 服务器正在侦听的端口完全无关。 Settings | Buiild, Execution, Deployment | Debugger 中的端口是 Chrome 调试器用来连接 IDE 的端口。将其设置为您的 Node.js 服务器端口会中断客户端调试。

标签： angularjs webstorm javascript-debugger

【解决方案1】：

您要调试什么 - 您的 Angular 应用程序，还是它所在的服务器？要调试您的服务器端代码，您需要使用 Node.js 运行配置（参见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）

要调试客户端，您必须创建 JavaScript Debug 运行配置，指定 Node.js 服务器的 URL（http://localhost:4000 或其他任何内容），添加远程 URL 映射（如果必要） - 见https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver

【讨论】：

感谢您的回答，我想调试我的客户端代码。

【解决方案2】：

转到运行/调试配置并在 WebStorm 中设置新的 Gulp 配置。这可以在 Run > Edit Configurations... 下找到。

设置好配置后，选择该配置后，只需单击调试（运行 > 调试或 Shift + F9）。

这在 IDEA 和 PyCharm 中对我们可用，所以我假设它在 WebStorm 中可用。你可能需要安装 Gulp 插件，但我没有为 IDEA 安装。

【讨论】：

好的，这张图片比我想象的要大，抱歉截屏太大了。