标签: source-maps

我已下载最新的jQuery版本"jQuery 1.10.2",从那时起我在Chrome中收到以下错误:

/jquery-1.10.2.min.map 404(未找到)

为了解决这个问题,我找到了问题报告,解释说有一个源映射文件用于调试.

其中一个可能的修复是删除jQuery js中的注释,其中包含文件,其他是下载地图文件.

我的问题是,如果源映射文件可以帮助我调试,当它被加载时,因为如果每次加载我的jQuery时都加载它,那么为什么要使用该库的min版本,因为这个源映射更大作为未压缩版本？

在谷歌浏览器中,我想知道堆栈跟踪将来是否会提供映射支持.目前,使用源映射,抛出错误将提供到我的TypeScript文件的行号链接,但是......当调用Error.stack时,它会给我JavaScript行和文件.

这是参考图片:http://puu.sh/4DTOG.png

正如您将注意到的,错误所在的实际行链接到TypeScript文件,但堆栈跟踪链接到JavaScript文件.

我有一个使用grunt,browserify和uglify的SPA ASP.NET项目.当我尝试在Chrome调试器中查看JavaScript时,它会显示缩小的JavaScript并且似乎忽略了地图文件.在IE11和Firefox中,调试器正确显示未分析的JavaScript.我确认在Chrome选项中选中了"启用JavaScript源地图".

在Chrome中,缩小文件的最后一行是:

//# sourceMappingURL=bundledApp.min.js.map

这是我的完整gruntfile:

module.exports = function (grunt) {

grunt.initConfig({
    clean: ['dist'],
    browserify: {
        build: {
            files: {
                "dist/bundledApp.js": [
                    './Scripts/jquery-2.1.4.js',
                    './Scripts/underscore.js',
                    './Scripts/backbone.js',
                    './App/App.js',
                    './App/**/*.js',
                    '!./App/**/*-spec.js'
                ]
            },
            options: {
                alias: {
                    'jquery': './Scripts/jquery-2.1.4.js',
                    'underscore': './Scripts/underscore.js',
                    'backbone': './Scripts/backbone.js'
                },
                transform: ['node-underscorify']
            }
        },
        test: {
            files: {
                "dist/bundledApp.js": [
                    './Scripts/jquery-2.1.4.js',
                    './Scripts/underscore.js',
                    './Scripts/backbone.js',
                    './App/App.js',
                    './App/**/*.js'
                ]
            },
            options: {
                alias: {
                    'jquery': './Scripts/jquery-2.1.4.js',
                    'underscore': './Scripts/underscore.js',
                    'backbone': './Scripts/backbone.js'
                },
                transform: ['node-underscorify']
            }
        }
    },
    less: {
        debug: {
            options: { …

我正在尝试使用源映射调试WebStorm中与WebPack捆绑的javascript应用程序.我当前的webpack.config.js看起来像这样:

var path = require('path');

module.exports = {
    debug: true,
    devtool: 'source-map',

    context: path.join(__dirname, 'js'),
    entry: './main.js',
    output: {
        path: path.join(__dirname, 'Built'),
        filename: '[name].bundle.js'
    }
}

生成源映射,如下所示:

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute …

我试图从编译.ts到.min.js如下:

TS --> ES6 ---> ES5 ---> .min.js + .map

在我刚刚做以下事情之前,一切正常:

TS ---> ES5 --->  .min.js + .map

我希望能够使用源地图.我的tsconfig.json如下:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

自从我添加后"target": "es6"我收到错误:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

tsify文档说:

在通过Browserify捆绑器运行之前未将TypeScript文件编译为JavaScript时,会发生此错误.您可能会遇到几个已知的原因.

但在我的Gulp任务中,在babelify之前运行tsify:

gulp.task("bundle", function() {

  var mainTsFilePath = "src/main.ts";
  var outputFolder …

我.ts编译的文件.js和.js.map文件通过我的编辑和我捆绑.js使用的WebPack文件.(我不希望webpack负责编译,.ts因为错误将无法在编辑器中正确显示.)

如果我将已编译的.js文件提供给webpack,则它不会获取现有.js.map文件(通过//# sourceMappingURL=...每个文件),因此结果bundle.js.map指向.js文件,而不是原始.ts文件.

如何让webpack保留现有.js.map文件,以便结果bundle.js.map点回到原始.ts文件？

我打开了chrome调试器,显示控制台和sources选项卡.我正在调试meteor.js应用程序,并在控制台中获得异常,该异常显示堆栈跟踪中带有行号的文件链接.

我发誓当我以前点击这些时它会交叉链接到来源选项卡中的特定行.但现在只需在chrome中的新选项卡中打开文件:

我正在使用咖啡脚本并启用了源映射,并在最新的Ubuntu LTS和Chrome测试版中完成此操作.

我正在使用 chrome 的 Javascript Profile 来存储 cpuprofile。当我们在 Chrome 中捕获 cpu 配置文件时，它会读取源映射的详细信息并显示实际源文件的路径和行号，类似于下图所示。

但是，如果我保存配置文件并再次加载它，它就不再使用源映射，如下所示。

看起来生成的 .cpuprofile 文件没有任何与源映射相关的信息。我需要将源映射与 cpuprofile 一起使用。有什么办法可以完成这个吗？

我非常习惯于具有标准机构拥有的规范文档的跨浏览器 Web API，例如来自 W3C 的 WebRTC 规范或来自 Khronos 的 WebGL 规范。

另一个 Web API 是“Source Maps”，在本文中进行了非正式的描述，并在 Chrome、Firefox 和其他地方实现。

但是，似乎没有针对此 API/功能的权威规范！所有文章/实现都只是链接到这个 Google 文档 URL，它只是说“我们很抱歉。您无法访问此项目，因为它违反了我们的服务条款。”

这个被删除的 Google Doc 真的是 Source Maps 的权威来源吗？如果是这样，这个特性是如何逃脱任何合理的标准化过程的？如果不是，这里是权威的规范呢？

我正在尝试调试 NodeJS 应用程序及其与npm link.

结构如下：

/root/package-a # typescript package
/root/package-b # another typescript package
/root/app # NodeJS application

我已将包链接到应用程序，如下所示：

1. npm link每个包装内
2. npm link package-a package-b 在应用程序中

然后/root/app/.vscode/launch.json我有：

"runtimeArgs": ["--preserve-symlinks"],
"outFiles": [
  "${workspaceFolder}/build/**/*.js",
  "${workspaceFolder}/../package-a/build/**/*.js",
  "${workspaceFolder}/../package-b/build/**/*.js",
]

当使用 . 构建每个包和应用程序时，这一切都非常有效npm run tsc。同样在监视模式下，更改会正确地从包传播到应用程序。但是，当我尝试在任何包内的 VS Code 中设置断点时，调试器找不到相关的 TS 源。断点保持灰色:-(

另外：我已经设置了每个tsconfig.json文件，因此应用程序和包中的每个构建文件旁边"sourceMap": true都有文件。.js.map

如何正确设置，使包中的断点变成红色？