标签: source-maps

文件CSS夹中包含两个文件,其中包含.map文件扩展名.他们是:

bootstrap-theme.css.map
bootstrap.css.map

它们似乎是缩小文件但我不知道它们的用途.

最近我看到带有.js.map扩展名的文件附带了一些JavaScript库(比如Angular),这只是我脑子里提出的几个问题:

• 它是为了什么？为什么Angular的人会提供.js.map文件？
• 我(作为JavaScript开发人员)如何使用该angular.min.js.map文件？
• 我应该关心.js.map为我的JavaScript应用程序创建文件吗？
• 它是如何创建的？我看了一下,angular.min.js.map它充满了奇怪的格式化字符串,所以我认为它不是手动创建的.

我是webpack的新手,我需要设置一下来生成源图.我正在webpack serve从命令行运行,它成功编译.但我真的需要源图.这是我的webpack.config.js.

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: …

当我加载我的AngularJS应用程序的缩小版(通过UglifyJS)时,我在控制台中收到以下错误:

Unknown provider: aProvider <- a

现在,我意识到这是由于变量名称错误造成的.unmangled版本工作得很好.但是,我确实希望使用变量名称修改,因为它大大减少了我们的JS输出文件的大小.

出于这个原因,我们在构建过程中使用了ngmin,但它似乎并没有解决这个问题,尽管它在过去很好地帮助了我们.

因此,为了调试此问题,我在uglify grunt任务中启用了源映射.它们生成得很好,Chrome 会从服务器加载地图.然而,我仍然得到同样无益的错误信息,即使我的印象是我现在应该看到提供者的原始名称.

如何让Chrome使用源地图告诉我这里的问题是哪个提供商,或者,我怎样才能以其他方式找到提供商？

我遇到一个问题,inline-source-map当我使用Chrome devtools调试器时,Webpack使用配置设置生成的源图关闭了一行.Webpack是在Ruby on Rails应用程序中设置的,用于生成由几十个模块组成的连接的,未经过编辑的JavaScript文件.这些模块中的大多数都是ReactJS组件,并由jsx加载器解析.然后Webpack的输出application.js以及由gem生成的一些其他JavaScript库包含在文件中.

当我使用时eval-source-map,没有问题.关于使用的一些inline-source-map原因导致行号被一个人抛弃.

检查不是React组件的JavaScript仍然存在这个问题,所以我认为它与使用jsx无关.

我只是注意到Firefox控制台为我项目中的每个.js/.coffee文件输出了以下错误(甚至是包).

-file- is being assigned a //# sourceMappingURL, but already has one

Chrome的控制台没有显示任何内容.我尝试删除所有.map文件并清除Firefox的缓存,但我仍然收到错误.

有没有一种快速方法可以从Chrome DevTools中显示的jsx代码切换到原始ES5并再次返回？

• 源图应该在生产环境中使用吗？他们提供除调试之外的任何好处吗？
• 由于额外的服务器往返,它们是否会影响应用程序加载时间？.map在加载和呈现应用程序后,浏览器是否足够智能加载资产？
• 如果浏览器无法找到.map资产(404错误),是否会对性能产生影响？我应该关心修理吗？

请注意,.map如果存在复杂的concat/minify构建步骤,则修复最后一个可能不如提供资产那么容易.

我正在使用UglifyJS来缩小和整理我的资源,而Sentry则报告我的生产环境中的错误.

为了以可读的方式从Sentry获取错误,我需要添加source-map

在生产服务器中执行它是否安全,或者源映射文件是否应仅存在于暂存环境中？
有没有办法在生产环境中保护它们？

你们如何对使用Less/Sass构建的CSS进行维护？

我喜欢Dev Tools/Firebug的一个方面就是能够看到css样式的行号.除了必须手动搜索.less/.scss文件以找到我想要修改的代码之外,还有一种很好的方法可以使用CSS预处理器吗？