浏览器 DevTools 不允许我在某些行上设置断点，即使在我清理缓存并重新打开后也是如此

Question

我有一个 angular 项目：

angular 版本为 9.x
Typescript 版本为 3.8.x

当我在ng serve

中运行时，我可以在每一行设置断点

但是在ng build

运行的时候，有些行无法设置断点

这是我的编译选项：

              "optimization": true,
              "outputHashing": "none",
              "sourceMap": true,
              "extractCss": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,

这是我的相关代码：

    static httpHandle(error: HttpErrorResponse): Observable<HttpEvent<any>>{
            let errorMessage = '';
            if (error.error instanceof ErrorEvent) {
                // client-side error
                errorMessage = `Error: ${error.error.message}`;
            } else {
                // server-side error
                errorMessage = `Error Status: ${error.status} -- Message: ${error.message}`;
                if (error.status === 404){
                    errorMessage = "API is not found, Please contact Admin";
                }else if (error.status === 400){
                    errorMessage = error.error;
                }else if (error.status === 403){
                    errorMessage = `You don't have permission to do this`;
                }else if (error.status === 401){
                    errorMessage = `Session timeout, Please relogin`;
                }else{
                    errorMessage = `API Error: ${error.status} ${error.statusText}`;
                }
            }
            console.log(errorMessage);
            return throwError(errorMessage);
    }

在编译代码中，只有3行可以设置断点，在ng serve中，所有非灰色行都可以设置断点

我看到有人提到要重新打开 devTools 并清理缓存 Chrome DevTools won't let me set breakpoints on certain lines 我试过了，还是有问题。

我也试过 Chrome 和 Edge，他们有完全相同的问题。

Answer 1

我把optimization改成false后所有代码行都可以调试，但是生成的文件大了8倍

浏览器 DevTools 不允许我在某些行上设置断点，即使在我清理缓存并重新打开后也是如此

Browser DevTools won't let me set breakpoints on certain lines even after I cleaned cache and reopen

angular

debugging

compilation

breakpoints

devtools