Angular good practice - 前端工程师都应该了解的source maps

目前情境：
按下Add Server，会将资料塞入阵列中，并在画面上以列表的型式表现。

这是一个有逻辑错误的程式，会删除所选取的下一个Another Server，开发者工具的Console也没有错误产生，那我们要如何得知在操作过程中，变数的值是多少，方便除错？

template：

<div class="container">  <div class="row">    <div class="col-12">      <h2>My Servers</h2>      <button class="btn btn-primary" (click)="onAddServer()">Add Server</button>      <br>      <div class="list-group mt-3">        <a class="list-group-item list-group-item-action" style="cursor: pointer;"          *ngFor="let server of servers; let idx =index" (click)="onRemoveServer(idx)">          {{ server }}        </a>      </div>    </div>  </div></div>

component：

idx = 0;servers = [];onAddServer() {  this.servers.push(`Another Server ${this.idx}`);  this.idx++;}onRemoveServer(id: number) {  const position = id + 1;  this.servers.splice(position, 1);}

这时可以利用source maps的功能：

滑鼠点选第17行：

执行删除Another Server 0，画面显示如下：

目前id为0：

按F10，跳到下一行程式执行，position为1，问题就出在这，由于position=id+1，因此所删除的会是下一个元素：

再按F10，这时已经取得变数的结果了：

按F8，完成这次方法的执行，结果如预料的，并非我们想删除的项目：

将position=id+1拿掉，就是我们要的逻辑。

source maps是什么？

简单说，source maps就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

开启开发人员工具 > 设定：

预设是开启的：

参考来源：
JavaScript Source Map 详解
Angular - The Complete Guide (2020 Edition)