标签: source-maps

从字节码的某些部分到最初来自的代码行,是否有一些很好的格式或库特性？这显然对调试和错误消息很有用.

特别是,我正在考虑将源映射的支持添加到js_of_ocaml是多么困难.

我不确定如何破解资产较少的过滤器来输出源图文件.我在这里指的是LessFilter https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/LessFilter.php

线145和146是其中Symfony\Component\Process\Process对象被创建

  $proc = $pb->getProcess();
  $code = $proc->run();

麻烦的是这个输出放在一个文件中.我不知道如何生成第二个源图文件.

如何扩展此过滤器或破解Assetic核心以使其工作？

我试图了解源映射是如何工作的。我使用 nodejs 创建了一个带有一页的简单 Web 服务器。安装了带有缩小版本和源映射的 jQuery。然后我在我的网页上放置了一个脚本标签，包括 jQuery 的缩小版本。由于源映射，我现在可以浏览 chrome 开发人员工具中未缩小的代码。但是如何？

我分析了从服务器发送的东西，源图没有传输。它们未显示在 chrome 开发人员工具的网络选项卡中，也不包含在缩小的 jquery 文件的下载内容中。唯一的事情是//# sourceMappingURL=jquery.min.map在缩小的 jQuery 文件的末尾。浏览器如何访问它们？

我有点想知道，因为在我的工作中我正在创建一个应用程序，如果能够在生产中使用源映射跟踪错误会很好。但现在看来，如果我允许这样做，也意味着任何访问该站点的人都可以获得未压缩的代码。这是正确的还是我可以控制源映射如何从服务器传输到客户端？

编辑：感谢您的回答。我自己也做了更多的研究，记录了服务器收到的每个请求。如果使用调试器工具，则源映射是在缩小文件末尾指定的 url 处的请求。chrome 隐藏了这一点的事实使事情变得非常混乱。如果我阻止传输源映射，源映射将不起作用，但 chrome 也会缓存源映射。即如果我允许源映射，查看它，然后阻止它并再次查看源映射可能仍然有效。

我正在开发一个Typescript项目,该项目被转换为ES5 JS,然后通过browserify运行以创建单个.js包和源图.捆绑的源映射指向已转换的JS而不是源TS,即使我正在生成源映射,这些源映射在转换为JS时正确指向源TS.

就好像browserify忽略了指向TS代码的现有源图并创建了自己的新映射到已编译的JS代码.

以下是我的gulp任务供参考 - 代码被编译到临时文件夹,然后从那里进行浏览.这使用browserify-incremental来支持增量编译.

谢谢!

注意:通过其他SO问题,我已经尝试过使用tsify,根据我的理解,它不适用于我的项目,因为我们使用import syntax&commonjs,它报告编译问题,其中tsc和gulp-typescript没有(相同的错误,无论是否通过使用gulp或通过CLI).我也试过minifyify,但它没有解决问题.

var gulp        = require('gulp'),
  ts          = require('gulp-typescript'),
  browserify = require('browserify'),
  browserifyInc = require('browserify-incremental'),
  source      = require('vinyl-source-stream'),
  del         = require('del'),
  sourcemaps  = require('gulp-sourcemaps'),
  buffer = require('vinyl-buffer'),
  xtend = require('xtend');

var tsProject = ts.createProject('tsconfig.json');

//COMPILE TS
gulp.task('compileTs', function () {
  var sourceTsFiles = [config.src.tsFiles, config.src.tsTypes];

  var tsResult = gulp.src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject));

  return tsResult.js
    .pipe(sourcemaps.write('.', {
      //includeContent: false,
      //sourceRoot: "../../src/js/"
    }))
    .pipe(gulp.dest(config.tempDir));
});

//BUNDLE BUILT TS->JS
gulp.task('bundleJs', …

npm在构建js应用程序时,我需要帮助在脚本中运行一系列命令.

现在我正在运行这一行:

"scripts": {
    "build-js": "browserify src/app/main.js --debug | exorcist dist/app.js.map > dist/app.js",
}

浏览并提取源图.但我也希望能够缩小uglifyjs2.

如何管道uglifyjs以获得具有外部源图的缩小源？

是否可以在 chrome dev-tools 中加载远程源映射文件？

我的 js 文件包括//# sourceMappingURL=file.js.map. 但该文件实际上位于不同的位置（出于安全原因..）。

我可以手动告诉 chrome dev-tools 源地图文件的位置吗？

我面临着一种奇怪的Ionic2行为.当我将我的应用程序部署到模拟器时,我可以在chrome检查调试器中看到.ts文件sourceMap.

在这两种情况下,我使用:

ionic run android

另一方面,当我在真实设备上部署我的apk时,选项卡"Sources"与其他目录组完全不同,并且没有引用我的.ts文件.

我的环境是:

• OS X 10.11
• Ionic 2 2.0.0-beta.35
• 科尔多瓦6.3.0

该项目最初由以下人员生成:

ionic start biblio tutorial --v2

ionic.config.json

{
  "name": "biblio",
  "app_id": "",
  "v2": true,
  "typescript": true
}

tsconfig.json

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

有任何想法吗？

诚然,我有基本的了解source maps和webpack.我的理解是,如果我devtools在我的webpack.config.js文件中正确设置,我应该获得映射到原始代码的源映射文件.

我正在使用以下配置文件,我没有得到任何源映射文件.知道为什么吗？

var IS_DEV = false;

var webpack = require('webpack');
var path = require("path");

// Define plugins needed for production and dev cases
var _pluginsDev = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),

];
var _pluginsProd = [
    new webpack.ProvidePlugin({
        'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
        moment: 'moment',
        ps: 'perfect-scrollbar'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: true,
        output: { comments: false }
    })
]; …

在 Chrome 上，我可以为我的bundle.js.

在 chrome 源面板中，我可以单击，bundle.js然后在源窗口内右键单击，我可以选择add source map. 我怎样才能在 Firefox 中达到同样的效果？

我有一个 create-react-app 项目，我希望部署过程生成 Sentry 版本并将源映射上传到 Sentry。