Question

我使用System.js加载用TypeScript编写的模块。 System.js将我的原始代码包装在一个函数中，因此当我的代码中出现错误并尝试在Chrome开发人员工具中看到它时，单击错误只会将我带到JavaScript文件的第一行，其中有＆＃ 39;是System.js添加的包装函数的声明，而不是原始TypeScript文件中的正确行。

通常这不是问题，因为System.js将自己的堆栈跟踪添加到错误的末尾并单击它会将我带到原始TypeScript文件中没有包装函数的正确行。

但是，有时System.js不包含整个堆栈跟踪，那么Chrome生成的原始堆栈跟踪是查看错误行的唯一位置，但问题是单击它会将我带到JavaScript文件而不是如上所述，TypeScript one和第一行，而不是正确的那一行。

我的问题：这是System.js中的错误还是我做错了什么？

为了使其更容易理解，我将在此添加我的代码并解释该方案。但请记住，我不会尝试修复我的代码，而是要了解为什么我无法通过开发人员工具找到正确的错误行。

所以这是我的System.js声明＆amp;配置：

<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>

<script>
        System.config({
            defaultJSExtensions: true,
            transpiler: 'typescript',
        });

        System.import('app.module')
                  .then(null, console.error.bind(console));

 </script>

这是app.module（System.js加载的根文件）：

import './angular-1.4.7'
import './angular-route.min'
import {User} from "./classes";
import {Post} from "./classes";
import {BlogModel} from  "./model"

var app: angular.IModule = angular.module("blogApp", ["ngRoute"]);

var model: BlogModel = new BlogModel();

app.run(function($http: angular.IHttpService): void{
    $http.get("/user-context/current-user")
    .success(function(currentUser: User): void{
        if(currentUser.userName) {
            model.currentUser = currentUser;
        }
    }); 

  ... 
});

...

产生错误的行：

$http.get("/user-context/current-user")

以下是我得到的完整堆栈跟踪：

正如您所看到的，正确的错误行仅显示在OOTB开发人员工具堆栈跟踪中，但不在System.js中显示（其中50％的时间确实显示了实际的错误行，并且应该这样做一直以来。

当我点击OOTB开发人员工具堆栈跟踪中的错误行时，我只是突出显示第一行的这个文件：

(function(require, exports, module, __filename, __dirname, global, GLOBAL) { //this line is highlighted
require('./angular-1.4.7');
require('./angular-route.min');
var model_1 = require("./model");
var app = angular.module("blogApp", ["ngRoute"]);
var model = new model_1.BlogModel();
app.run(function ($http) {
    $http.get("/user-context/current-user")  //but this is the line that should be highlighted
        .success(function (currentUser) {
        if (currentUser.userName) {
            model.currentUser = currentUser;
        }
    });
    ...
});
...
});
//# sourceMappingURL=app.module.js.map
}).apply(__cjsWrapper.exports, __cjsWrapper.args);

我的问题：这是System.js中的错误还是我做错了什么？

任何帮助都将深表感谢！

Answer 1

此问题已报告＆amp;已关闭：Javascript errors don't link to original source?

Chrome控制台通常会将错误指向第1行：Chrome appears to report wrong line for error。

还可以尝试其他浏览器，因为它可能是浏览器问题。另一种可能是文件损坏，如here所述。

Answer 2

在SystemJS转换代码的错误堆栈跟踪上添加源映射支持。要解决堆栈跟踪问题，您必须安装source-map-support

   require('systemjs');
System.import('./test/modules/error.js').catch(function(error){
      console.error(error.stack);
});

Answer 3

不推荐使用System.js使用的arguments.caller。如果在最新版本的Chrome中发生这种情况 - 您无法做任何事情。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller

尝试使用旧的Firefox版本进行确认。

System.js不显示完整的堆栈跟踪

3 个答案: