html怎么做Source Map调试映射_html Source Map源码映射调试配置【实例】-html教程-PHP中文网

webpack 5 默认不生成 source-map，开发时 devtools 看不到原始 .ts/.jsx 文件，因 mode: 'development' 仅启用 eval 映射（无独立 .map 文件），需显式配置 devtool（如 'source-map' 或 'eval-source-map'）并确保 sourcemappingurl 可访问、devtools 启用源映射。

html怎么做source map调试映射_html source map源码映射调试配置【实例】

Webpack 5 默认不生成 `source-map` 文件

开发时打开浏览器 DevTools 却看不到原始 .ts 或 .jsx 文件？不是代码没写对，而是 Webpack 默认关掉了源码映射。它只在 mode: 'development' 下启用 eval 类型的快速映射（不生成独立 .map 文件），这种模式下断点能打、但无法直接查看原始文件结构或右键“Reveal in Sources”。

要让浏览器显示真实源文件并支持逐行调试，必须显式配置 devtool：

devtool: 'source-map' → 生成完整独立 .js.map，最准但构建慢，适合生产前调试
devtool: 'cheap-module-source-map' → 忽略 loader 处理前的列信息，快不少，日常开发够用
devtool: 'eval-source-map' → 每个模块用 eval() 包裹并附内联 sourceMappingURL，热更新快，但部署时绝不能用

注意：source-map 和 inline-source-map 都会把映射内容 Base64 编进 JS 文件，增大体积；而 hidden-source-map 虽不暴露 sourceMappingURL 注释，但依然生成 .map 文件——适合错误监控（如 Sentry）解析堆栈，但浏览器不自动加载。

Vue CLI 项目里改 `vue.config.js` 生效不了？

Vue CLI 封装了 Webpack，但它的 devtool 配置优先级高于用户手动写的 configureWebpack。直接写 devtool: 'source-map' 会被内部逻辑覆盖。

正确做法是用 configureWebpack 的函数形式，在 config 对象上修改：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'cheap-module-source-map'
    }
  }
}

或者更稳妥地用 chainWebpack（基于 webpack-chain）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'development', config => {
      config.devtool('cheap-module-source-map')
    })
  }
}

改完必须重启 npm run serve，热重载不触发 devtool 重新初始化。

浏览器不加载 `.map` 文件？检查三处关键位置

即使 Webpack 正确输出了 bundle.js.map，Chrome 也可能静默跳过加载。常见原因：

JS 文件末尾没有 sourceMappingURL 注释：比如构建后被 Uglify/Terser 删除了，需在压缩插件配置中设 keep_fnames: true 或关闭 drop_console 类选项
服务器没返回 .map 文件：确认请求路径正确（如 /static/js/app.abc123.js.map），且 HTTP 状态码是 200；Vite 开发服务器默认支持，但 Nginx/CDN 可能未配置 .map MIME 类型（应为 application/json）
DevTools 设置关了：打开 Chrome DevTools → F1 → 搜 “enable javascript source maps” → 确保勾选；再检查右上角三个点 → Settings → Preferences → Sources → 勾上 “Enable JavaScript source maps” 和 “Enable CSS source maps”

Source Map 上传到 Sentry 后堆栈还是乱码？

Sentry 需要两样东西才能还原原始错误位置：一是上传的 .map 文件，二是对应版本的原始源码（或通过 url_prefix 能回溯到源码位置）。光扔 map 文件没用。

常见翻车点：

打包时用了 output.publicPath: '/'，但 Sentry 里设置的 url_prefix 是 https://cdn.example.com/，导致它去错地方找 main.js，自然找不到映射上下文
CI 构建环境变量和本地不一致，process.env.VUE_APP_VERSION 没传进 sourcemap 的 version 字段，Sentry 匹配不到 release
Source Map 文件本身损坏：用 source-map-explorer 或在线工具（如 source-map-visualization）打开验证是否可解析