标签: source-maps

Safari 7检查器将编译好的javascript线性映射回来自它的coffeescript.但是,有时我想直接与检查器中编译的javascript进行交互.如何切换源映射,以便我可以使用原始javascript？

问题标题几乎说明了一切.我不知道如何配置现在支持源映射的grunt-contrib-less任务.我的预期结果是让Chrome DevTools CSS检查器指向Less规则.如果可能的话,理想的情况是源映射在同一个输出的CSS文件中内联,以避免使用单独的源映射文件混乱我的工作区.

谢谢

是否可以生成包含所有这些转换的源图？

gulp.task('styles', function() {
    return gulp.src(source.styles)
        .pipe(plumber())
        .pipe(gulpif(/\.less$/, plumber().pipe(less({
            strictMath: true,
            strictUnits: true,
        }))))
        .pipe(concat('bundle.css'))
        .pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false}))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'));
});

使用的库:

• 吞掉少
• 吞掉,如果
• 一饮而尽,CONCAT
• 一饮而尽,autoprefixer
• 一饮而尽,缩小,CSS

我知道较少可以生成源图,gulp-concat我认为不支持它们,autoprefixer应该保留它们,而minify-css/clean-css似乎没有提到源映射.我运气不好吗？

我创建了一个Github仓库,其中包含与此问题相关的所有源代码.我可以build/index.html在运行后加载浏览器npm install.但是,当我在Chrome中查看"来源"标签时,我看不到与.tsx文件关联的源地图.

这是我看到的截图:

我已经添加sourceMap: true在我tsconfig.json以及debug: true和devtool: "source-map"我webpack.config.json.对我在这里缺少什么的想法？

编辑:

这可能是一个愚蠢的问题,但你必须使用webpack-dev-server才能看到源图吗？

使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.

很久以前,这一点工作得很好.最近(我无法确定何时),Chrome和Firefox都不会实际使用源图.

我在Chrome上启用了源图,并认识到有一个源图,告诉我在控制台中:

"检测到源映射.应将相关文件添加到文件树中.您可以将这些已解析的源文件调试为常规JavaScript文件.可通过文件树或Ctrl + P获取关联文件."

但是,源文件无法通过任何一种方法获得.

在本地构建上构建文件结构(仅使用Login作为示例):

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

但是,Chrome只在文件树中显示:

build
  |- resources
      |- js
         |- app.js

而已.没有Typescript文件夹,没有文件.Ctrl-P也找不到它们.因此,当我调试时,我只能调试已编译的app.js文件,而不是查看Typescript代码.

我的gulp文件相关部分:

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // …

我想反向或解包bundle.js.目前我正在浏览器中加载bundle.js(Chrome)Chrome检测到源图,并根据捆绑包向我展示了完整应用程序的一个很好的结构.该应用程序使用webpack进行捆绑,是一种助焊剂反应应用程序.

有没有办法从捆绑包中生成所有这些文件,以便我可以根据应用程序结构轻松浏览捆绑包？

这是一个逆向工程项目,用于从现有捆绑包中获取应用程序源.

所以在chrome中我可以使用devtools源很好地浏览整个应用程序.并查看所有单个文件.但我想在我的本地驱动器上创建完全相同的结构.

我试图像一个工具debundle但我不能找到一种方法,将sourcemap添加到这种转换？

因此,如果符合以下条件,我可以轻松地解开现有的bundle.js:

• 源图是可用的
• Chrome可以轻松向我显示结构和单个文件
• 捆绑没有缩小或扰乱.
• Bundle是使用webpack创建的

在开发人员控制台的调试窗口中 - 我可以看到列出的所有javascript资源,但在其中只是说sourceMaps is null.

我正在尝试获取的资源是一些缩小的jquery,并且没有明确,但是整合了javascript.javascript不包含sourcemaps评论.

关于我如何解决这个问题的任何建议？

当我尝试使用transform-async-to-generatorbabel插件使用async/await调试代码时,我有很多调试经验(尽管我几乎尝试了所有其他组合).

基本上带有await的代码将跳到方法的末尾,然后进入已编译的代码.视频

export class Cat {
    async meow(){
        let p = await this.bat(); // <<<< this line runs
        this.fart(); // <<<< then skips this line
        return p;  // <<<< and goes to this line ( always last line in fn )
    }
}

如果您查看该函数的生成代码:

meow() {
    var _this = this;

    return _asyncToGenerator(function* () {
        let p = yield _this.bat();
        _this.fart();
        return p;
    })();
}

难怪结果,但源地图应该处理这个,对吧？

我已尝试过各种设置(需要hook/babel-node/babel cli/gulp babel)并得到同样的问题.我正在使用:Node 5.3.0和Babel 6.3

我在github上创建了一个演示项目.我也在babel线程上发布了这个问题.

编辑: 问题是源图项目,因为我觉得这不是一个babel问题.该团队承认该问题是一个调试器问题.有关更多详细信息,请参阅: …

我有来自客户的性能分析记录，我可以在其中看到混淆的方法名称。

我有混淆的 JS 文件和源映射。

我希望在 Chrome 开发工具中打开性能记录后看到未混淆的方法名称。

不幸的是我不知道如何加载源地图。记录中的 URL 甚至指向一个域。

知道如何告诉 Chrome 使用驱动器中的特定源映射吗？

当我的 React Native 应用程序出现错误时，打印到控制台的堆栈跟踪指向而不是index.bundle原始源代码（请参见下面的示例）。有没有办法将 React Native 配置为使用源映射，以便日志正确显示？

仅当从异步回调或渲染之外的某些内容引发错误时，才会出现此问题。如果我在组件内抛出错误，则该错误会在控制台中显示正确的堆栈跟踪。有趣的是，错误始终在 LogBox 中显示正确的堆栈跟踪。

我正在react-native run-android通过 Metro 运行它并查看日志。为了澄清，我试图让它适用于本地调试版本，而不是生产/发布版本。理想情况下，日志会在控制台中显示正确的堆栈，这样我就不必手动符号化它们或在 LogBox 中查找错误。

console.error 的结果示例：

Error: Connection closed
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myapp.local&modulesOnly=false&runModule=true:261835:40)
    at forEach (native)
    at flushVolatile (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myapp.local&modulesOnly=false&runModule=true:261833:33)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myapp.local&modulesOnly=false&runModule=true:262065:20)
    at apply (native)

先感谢您！