嘿，作为刚上手WebStorm和Node.js的新手，你已经把Apache的基础配置捋顺了，这起点很不错！下面我结合你的场景，给你一些实用的调试环境搭建建议，一步步来：

一、先搞定本地开发调试（不用每次npm run build，效率翻倍） #

开发阶段每次都build再丢到Apache里太折腾了，建议直接用项目自带的Node.js开发服务器（大部分前端框架比如React、Vue都默认带），同时配置API代理，替代Apache的重定向规则：

1. 配置开发服务器的API代理

   • 如果是Create React App项目，直接在package.json里加一行：

     "proxy": "http://servername"
     

     这样你本地访问/abc/restapi/{param1}/xxx时，请求会自动转发到http://servername/abc/restapi/{param1}/xxx，完全不用依赖Apache。
   • 如果是Vue项目，在vue.config.js里配置：

     module.exports = {
       devServer: {
         proxy: {
           '/abc/restapi': {
             target: 'http://servername',
             changeOrigin: true
           }
         }
       }
     }
     

   其他框架的话，找对应dev server的代理配置就行，原理都是一样的。

2. WebStorm调试本地代码
   打开WebStorm的「Run/Debug Configurations」，点击左上角的+号：

   • 选择「npm」，然后在「Script」下拉框里选你的开发启动脚本（一般是start），工作目录选项目根目录。
   • 勾选「Debug」模式，点击「Apply」保存。
     现在你可以在源码里点击行号左边加断点，启动调试后，浏览器访问本地开发服务器（比如http://localhost:3000），触发代码执行时，WebStorm就会自动停在断点处，你可以单步调试、查看变量，非常方便。

二、如果需要在Apache环境下调试build后的代码 #

如果必须验证生产环境的运行效果，那可以这么做：

1. 确保build时生成Source Map
   源码被压缩打包后，直接调试build后的文件会很痛苦，所以要让项目在build时生成Source Map，这样WebStorm能关联压缩代码和原始源码。

   • 比如Webpack项目，在webpack.config.js里设置：

     module.exports = {
       devtool: 'source-map' // 生产环境建议用source-map，不要用inline的
     }
     

   框架项目一般可以在build配置里开启这个选项，比如React的package.json里的build命令默认已经包含了。

2. WebStorm关联build后的文件
   把Apache的文档根目录（也就是你的build文件夹）添加到WebStorm的项目中，然后在WebStorm里找到build后的对应文件，点击行号加断点（因为有Source Map，WebStorm会自动定位到源码的对应位置）。
   启动Apache后，浏览器访问你的虚拟主机地址，触发代码执行，就能在WebStorm里调试了。

3. 验证Apache的API重定向规则
   确保你的virtualhosts.conf里的重写规则是反向代理（而不是跳转），这样浏览器地址栏不会变，更符合API调用的场景：

   <VirtualHost *:80>
     ServerName your-local-domain.com
     DocumentRoot "/path/to/your/build/folder"
   
     RewriteEngine On
     # 把/abc/restapi开头的请求反向代理到目标服务器
     RewriteRule ^/abc/restapi/(.*)$ http://servername/abc/restapi/$1 [P,L]
   
     # 其他Apache配置...
   </VirtualHost>
   

   配置完后重启Apache，用浏览器开发者工具的「Network」面板查看API请求的地址和响应，确认是否正常转发。

三、小Tips #

• 优先用本地开发服务器调试，效率更高，等功能稳定了再去Apache环境验证。
• WebStorm的调试面板里有很多实用功能，比如「Watch」窗口可以实时监控变量，「Console」可以执行临时代码，多摸索一下。

内容的提问来源于stack exchange，提问作者Hemal