用 source map 调试生产环境

Posted 2021-08-24 KenkoTech

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用 source map 调试生产环境相关的知识，希望对你有一定的参考价值。

当我们的应用程序部署到生产环境时，我们发现它与我们在开发环境时的代码不同。我们的代码在构建过程中会以各种方式进行修改和优化。

TypeScript 被转译、压缩。生成的 javascript 包尽可能小并且能够在浏览器中正常运行。

所有这些步骤都很有效率，它们提高了我们应用程序在生产环境下的性能。但是当我们需要在生产环境下调试代码时它对我们产生了很大的障碍。

但是有一个解决方案：Source Map

配合Chrome 开发工具可以为我们提供一个debug线上项目的功能

Source Map简介：

从技术上讲，source maps只是一个包含以下字段的 JSON 文件：

version: 表示source map版本
file: source map所属的转译后文件的名称
sourceRoot: basePath — 源相对于这里
sources: 原始源文件的路径（例如 TypeScript 文件）
sourcesContent: 可选属性，可以包含整个源代码。
names: 在代码中找到的方法或变量名称
mappings: 这是整个功能起作用的关键。从技术上讲， mappings 属性是一个非常大的字符串，其中包含 Base64 VLQ（可变长度数量）值。这些值有助于找到源文件中的原始位置。

项目环境：

使用 @angular/cli 12.0.3 所搭建的标准 Angular 项目

{
  "name": "sourcemap",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

debug步骤：

使用Source Map进行调试还需要一些步骤，一般情况下项目的 source maps文件是不会在生产环境下被生成的，以防止源代码泄露。

angular.json 文件包含一个sourceMap属性，允许我们指定是否要在生产构建中使用它

"architect": {
        "build": {
		…
          "configurations": {
            "production": {
			…
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        }
      }

或者添加下列命令行进行覆盖 (Angular 7.2版本以下的项目需要使用命令行方式)