node.js - 调试 SSR node.js 服务器端 VSCode

问题描述

我在尝试调试 SSR 反应应用程序（服务器端）时浪费了太多时间。我们正在从头开始构建一个应用程序，这是一个非常大的项目，因此调试代码非常重要。

服务器的 webpack 配置如下：

const path = require('path');
const merge = require('webpack-merge');
const webpackNodeExternals = require('webpack-node-externals');
const webpack = require('webpack');

const baseConfig = require('./app.webpack.base');

const server = {
  name: 'server',
  entry: ['./app/server/index.js'],
  target: 'node',
  mode: 'development',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'public/server'),
    filename: 'server.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: 'file-loader',
        exclude: /node_modules/,
        options: {
          name: 'public/media/[name].[ext]',
          publicPath: (url) => url.replace(/public/, ''),
          emit: false
        }
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'css-loader/locals'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'SERVER_SIDE': true,
      'ENVIRONMENT': JSON.stringify(process.env.NODE_ENV),
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ],
  externals: [webpackNodeExternals()]
};

module.exports = merge(baseConfig, server);

baseConfig 只为 js 和 jsx 文件添加了一个加载器：

  module: {
    rules: [
      {
        test: [/js$/, /\.jsx?$/],
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

我无法在 VSCode 和 Chrome 中调试它。

在 VSCode 中，我得到了著名的：

未验证断点，已设置断点但尚未绑定

我正在使用 node --inspect 标志运行生成的 server.js 文件（与 webpack 捆绑后）：

我尝试了许多 launch.json 配置，例如：

{
    "name": "Attach to Process",
    "type": "node",
    "protocol": "inspector",
    "request": "attach",
    "port": 9229,
    "sourceMaps": true
}

在 Chrome 中，如果我打开 Chrome 的 DevTools，我可以看到源映射并设置断点，但它们永远不会被命中。

如果你能帮我解决这个问题，我将非常感激你们。任何见解或想法也受到赞赏。

谢谢。

标签： node.jsreactjswebpackvisual-studio-codegoogle-chrome-devtools

node.js - 调试 SSR node.js 服务器端 VSCode

问题描述

解决方案

推荐阅读