Open uCode

# SourceMap

# Inline SourceMap 调试插件 (开发模式)

开发者套件里面的 cua-build-dev 指令, 使用 inline-source-map 的方式

inline-source-map 顾名思义, 就是把 SourceMap 一起打包到代码里面.

由于, JS 的体积会增大几倍, 而且会暴露源码, 不建议在生产环境里面开启这个

  1. 使用我们预设的指令 cua-build-dev 打包你的插件

该指令会使用 webpack.dev.js 去打包

  1. 如果你已经修改过, 或者你需要单独自行开启

把 webpack 里面的配置 devtool 设置成 inline-source-map

下面是 webpack.dev.js 的配置:

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
});
  1. 使用 inline-source-map 的 main.js 不需要任何步骤, 浏览器加载完之后, 可以自动完成

不要在生产环境下开启 inline-source-map

inline-source-map 会把源码也打进代码里面, 除了大小变大, 代码相当于也是一个明文状态 所以不要生产环境下打开这个选项

# SourceMap 讲解 (生产环境)

如果你使用的是脚手架打包的插件, 默认会在 dist 下生成一个 map 文件

.
├── logo.svg
├── main.js
├── main.js.map (Source Map 调试文件)
└── manifest.json

浏览器默认加载 JS 文件的时候, 会自动加载这个 map 文件, 但是由于我们加载其实是一种压缩包格式, uCode 并没有直接加载 main.js 文件, 而是先把 main.js 存在了 浏览器内部, 然后通过它来读取 man.js, 因此, 这里需要额外的步骤去加载 SourceMap 文件

# 生产环境下使用 SourceMap 调试插件

  1. 首先在你的浏览器上打开你的 SourceMap

TIP

直接把 SourceMap 拖到浏览器上即可

  1. 在浏览器上复制你的 SourceMap 的路径

复制之后的路径类似, 需要以 file:// 打头 file:///Users/alex/Workspace/playground/open-ucode/ucodev4-ext-debug/dist/main.js.map

  1. 首先找到加载 main.js 的文件

脚手架都会在初始化的时候默认打印一行

// index.ts
console.log("初始化硬件插件", "debug");

debug 截图

点击打印的这一行进去

  1. 在打开的源文件里面鼠标右键, 选中 Add source map...

debug 截图

  1. 输入刚刚复制的 SourceMap 路径, 点击 Add

debug 截图

  1. 再回到控制台里面, 你会发现 打印的文件, 显示的是 index.ts

debug 截图

  1. 点进去之后, 就是你的源文件的代码

debug 截图

以下是完整的操作的录屏

debug 录屏

← 错误捕捉 →