调试 SSR node.js 服务器端 VSCode

2024-05-02

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

服务器的 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 的开发工具,我可以看到源映射并设置断点,但它们永远不会被命中。

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

Thanks.


你可以看看我的解决方案here https://stackoverflow.com/a/66640557/15401271。顺便说一下,我对SSR进行了一些实验here https://github.com/Dmitriynj/React-mentoring

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

调试 SSR node.js 服务器端 VSCode 的相关文章

随机推荐

  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • 如何测试我的 Redis 缓存是否正常工作?

    我已经安装了 django redis cache 和 redis py 我遵循了 Django 的缓存文档 据我所知 以下设置就是我所需要的 但我如何判断它是否正常工作 设置 py CACHES default BACKEND redis
  • 有没有办法制作用于开发的 firebase 身份验证令牌?

    背景 我正在构建一个 React Native 应用程序 它将数据发布到节点服务器 然后通过管理 Firebase 库将数据发布到 Firebase 为了发布数据 我完全绕过应用程序并使用postman https www getpostm
  • 使用 Chudnovsky 算法计算 pi 时出错 - Java

    我一直在尝试编写一个简单的程序来使用 Chudnovsky 算法计算 pi 但是我不断得到错误的值输出 我编写的最新代码如下并输出 9 6427156192980758374488232782187800865411623432530844
  • WebBrowser 控件和 JavaScript 错误

    当我使用浏览器 ie9 访问该页面时 浏览器渲染正常 当我使用 WebBrowser 控件时 出现 JavaScript 错误 我知道我可以抑制脚本错误 但我希望它们正确运行 因为它们会影响页面的渲染和功能 我怎么解决这个问题 我可以将 I
  • 如何在C++控制台中删除已写入的字符

    我正在尝试编写一个 C 程序来读取密码 我编写了程序来计算 不是我写的字符 但我的问题是当我想删除字符时 因为它们是错误的 Example 我的固定密码是12345如果我输入1235该程序将显示 我必须删除最后一个字符 将其从字符串中删除很
  • 谷歌云sftp的权限

    我正在使用 wordpress 和 google cloud 并将其设置为 sftp 连接 文件夹的权限是755 文件的权限是644 即使我已经将Cloud API访问范围更改为 允许完全连接 当我尝试通过 WordPress 后端添加插件
  • 使用 git-svn 时模拟 subwcrev

    我使用 git svn 与包含一些 C 项目的现有 SVN 存储库进行交互 subwcrev exe 用作预构建事件来更新 C 标头 svnversion h 中的某些字符串 这些字符串被硬编译以形成生成的二进制文件的一些版本信息 由于 s
  • 如何在 R 中按字符变量的字母顺序对数据框进行排序?

    我想按 R 中字符变量的字母顺序对数据框进行排序 我尝试使用order 函数 但它将我的数据框转换为列表 有人知道吗 好吧 我这里没有问题 df lt data frame v 1 5 x sample LETTERS 1 5 5 df v
  • 我可以用 SASS \ Compass 计算和使用元素高度吗

    我在 RoR 项目中使用 sass 和 compass 我需要分配给top元素的 CSS 属性值 即元素高度除以 2 我可以用 SASS Compass 来做吗 你似乎已经得到了XY问题 https meta stackexchange c
  • 无法删除 windows 对象的事件侦听器

    我在尝试删除事件监听器时遇到了很多麻烦 我创建了一个非常依赖 JavaScript 的网站 当您在网站上导航时 它基本上是动态加载元素 而无需使用模板文字刷新页面 有时我必须加载内容并添加无限滚动 但也能够再次删除该事件 这是我用来处理滚动
  • MATLAB:生成给定三种颜色的颜色图

    我正在尝试在 MATLAB 中生成给定三种颜色 最高值 零值和最低值 的颜色图 我的思维过程是从最高端到中间循环 并将每个步骤存储到一个 3xN 第一列是 R 第二列是 G 第三列是 B 矩阵 所以我正在使用 fade from high
  • 谷歌地图动画符号(到达路径的目的地点后停止图标)

    我正在做一个学校项目 我正在使用 Google Map API API 很棒 但我需要一些代码方面的帮助 到达目的地后 我希望图标保留在那里 而不应该再次重复整个路径 function initMap var map new google
  • Java Paint 组件转换为位图

    我需要在位图中绘制组件及其所有子组件的内容 如果我想绘制整个组件 以下代码可以完美运行 public void printComponent Component c String format String filename throws
  • 使用 py2exe 在 .exe 中嵌入图标,在 Vista 中可见?

    我一直在尝试使用 py2exe 将图标 ico 嵌入到我的 编译 exe 中 Py2Exe 确实有一种嵌入图标的方法 windows script MyScript py icon resources 1 MyIcon ico 这就是我正在
  • 如何使用 jquery load 方法将文件的内容加载到变量中?

    如何使用 jQuery 将文件内容加载到变量而不是 DOM 中 load method 例如 logList load logFile function response 而不是将文件加载到 logListDOM 元素 我希望将其加载到变量
  • Gevent被flask阻塞甚至使用猴子补丁

    我正在使用flask gevent来构建我的服务器 但是名为 getall 的gevent被flask阻止 因此 getall 函数无法在这段代码中打印消息 猴子补丁正在使用中 import time import WSGICopyBody
  • 安装MySQLdb(对于python)作为非压缩的egg

    安装说明是 python setup py build sudo python setup py install or su first 这给了我一个 egg 文件 如何告诉安装程序将文件转储为普通的未压缩库 Thanks 好吧 我不想回答
  • WiX Burn:从注册表读取 LaunchTarget

    我是 WiX 的新手 我试图让我的 Bootstrapper 在完成后启动我安装的应用程序 为了实现这一点 我正在使用
  • 调试 SSR node.js 服务器端 VSCode

    我在尝试调试 SSR React 应用程序 服务器端 时花费了太多时间 我们正在从头开始构建一个应用程序 这是一个非常大的项目 因此调试代码非常重要 服务器的 webpack 配置如下 const path require path con