标签: source-maps

我正在使用一些缩小的JavaScript代码,并且真正受益于具有用于调试的源映射.在Chrome中,我没有启用源地图的问题,他们目前正在为我工​​作.

我目前不得不使用Safari开发工具来做这方面的工作,我不能为我的生活想出在Safari中启用源地图.我没有运气谷歌搜索它.

有没有人在Safari中为JavaScript创建源映射是否成功？我使用的是最新版本6.0.4.

我正在尝试在我的项目中使用源图.我正在使用LESS,使用Grunt使用grunt-contrib-less编译

这是我在gruntfile.js上的代码:

less: {
  development: {
    options: {
      paths: ["assets-src"],
      // LESS source maps
      // To enable, set sourceMap to true and update sourceMapRootpath
         based on your install
      sourceMap: true,
      sourceMapFilename: 'assets-src/desktop/css/desktop.css.map',
      sourceMapRootpath: 'assets-dist/desktop/css/'
    },
    files : {
      "assets-src/desktop/css/desktop.css" :
      [
      "assets-src/desktop/less/reset.less",
      "assets-src/desktop/less/variables.less",
      "assets-src/desktop/less/mixins.less" 
      ]
    }
  }
 }

这是我拥有的文件结构:

我在定义sourceMapRootpath时遇到问题.我尝试将所有.LESS文件放在同一个文件夹中,但没有任何事情发生,使用.CSS文件所在的文件夹也是如此.

有什么想法吗？

谢谢!西巴

有没有人找到Gulp,Uglify和Concat的工作组合来生成有效的源地图？在GitHub中似乎存在很多关于这些类型的交互的问题,但同样地,人们似乎找到了成功运作的组合.我尝试了很多变化,但是当我打开uglify时,符号映射不起作用,断点在浏览器中无法正常工作.例如,以下工作正常:

return gulp.src('/scripts/*.js')
            .pipe(sourcemaps.init())
            //.pipe(uglify())
            .pipe(concat(outputName + '.min.js'))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(outputPath))
            .on('end', function() { gutil.log('Minified ' + outputName); })
            .on('error', handleError);

但是取消注释uglify并没有.

我创建了一个GitHub repo来重现这个问题:https://github.com/jamescrowley/gulpIssues

全部，我将SystemJS与Babel一起用作编译器，以了解如何在浏览器中从ES6生成ES5代码。当我尝试使用Chrome Dev Tools查看源代码时，看到的是ES5代码，而不是原始的ES6代码。我babelOptions在SystemJS中使用默认值config.js，如下所示：

System.config({
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  ...

我可以看到内联源代码映射插入到生成的Javascript底部，格式为：

//# sourceMappingURL=data:application/json;base64,...

Chrome浏览器不应该解释这一行并向我显示ES6代码而不是ES5代码吗？我是否会误解这样的内联源映射应该如何工作？（我已经在Chrome 43.0.2357.65和45.0.2411.0上尝试过。我也没有在Firefox 38.01上尝试过成功。我正在运行Mac OS X 10.10.2。）任何帮助将不胜感激。

我想隐藏自己的部分代码，以免它们出现在chrome开发工具中。webpack可以吗？

我正在学习React和JSX并使用webpack进行编译,但是当我将'debugger'输入到我的组件中时,当我在Chrome Dev Tools的Sources选项卡中时,该行不匹配(通常来源不反映我在app.jsx文件中的所有内容.React选项卡也没有真正加载.下面是我的webpack.config:

module.exports = {
  context: __dirname,
  entry: "./api_assignment.jsx",
  output: {
    path: "./",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

// Webpack截图

任何人都可以指出我正确的方向,为什么我不能在我的任何TS文件中击中任何断点请？该应用程序是Node.JS应用程序,并使用TSC进行转换.以下是条目app.ts文件的示例:

./src/app.ts

import 'reflect-metadata';

import kernel from './ioc'
import { IServer } from './utilities/abstract/IServer'

let server = kernel.get<IServer>("IServer");
server.start();

./src/app.js

"use strict";
require('reflect-metadata');
var ioc_1 = require('./ioc');
var server = ioc_1.default.get("IServer");
server.start();

//# sourceMappingURL=app.js.map

./src/app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":";AAAA,QAAO,kBAAkB,CAAC,CAAA;AAE1B,oBAAmB,OACnB,CAAC,CADyB;AAG1B,IAAI,MAAM,GAAG,aAAM,CAAC,GAAG,CAAU,SAAS,CAAC,CAAC;AAC5C,MAAM,CAAC,KAAK,EAAE,CAAC"}

./tsonfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

./.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": …

使用Visual Studio Code，当我在.ts文件中设置断点时，它没有被点击。（并且在调试时不是红色的）。

但是，如果我在已编译的JS中设置一个断点，那么当我逐步执行代码时，它将把我切换到ts文件。然后，.ts文件中的所有断点都开始工作。

有没有一种方法可以使.ts文件断点正常工作（而不必首先在编译的.js文件中设置一个？

注意：我看了这个问题：使用Visual Studio Code在Typescript Jasmine测试中设置断点，这正是我的问题。但是，该问题的答案是升级到VS Code 0.10.9和Typescript 1.8.2。我正在使用VS Code 1.8.1和Typescript 2.1.4。

Chrome不会为HTML内联包含的脚本加载源地图。

<script type="text/javascript">!function t(n,e,r){ /* more code */}()
//# sourceMappingURL=public/js/edit-before.js.map
</script></body>

我知道Chrome不会请求源地图，因为我将服务器设置为记录所有请求，并且还检查了Chrome网络控制台。我验证了源映射的路径是正确的，浏览器没有找到它。

Chrome是否应在script代码中加载JS的源映射？如果是这样，我在做什么错？

由于某种原因，我无法在Chrome扩展程序中加载源地图。

正在为Chrome扩展程序加载的文件夹位于文件.map旁边.js。该.js文件的行//# sourceMappingURL=1.9215106f1980d05d2b4c.js.map引用.map文件路径。

但是，由于某些原因，Chrome开发者工具无法加载地图。

我仔细检查了Chrome设置，以确保js源地图已打开并且正在使用简单的Angular项目。

另外，请确保清单文件中包含以下内容：

  "web_accessible_resources":[
    "*.map"
  ],