标签: source-maps

我现在一直在使用Chrome,你必须在选项中明确启用源地图支持.

我正在使用Firebug在Firefox中测试一些东西,但我没有看到我原来的源文件 - 只是生成的包.

有没有办法在Firebug中启用源地图支持？我在Firefox 27.0.1中使用Firebug 1.12.8.

Visual Studio 2013 UP5 + Web Essential(v.2.6.36)生成的css.map文件在"Google Chrome"中无效,但在"Firefox"中有效.因此,无法在Google Chrome中调试较少的文件.

目前,我使用的是Web Essential 2.6.36(+ Visual Studio 2013 Up5).我可以从google chrome的开发人员设置中禁用源地图.哪个会删除这些错误,但是我们仍然无法调试更少的文件并更改样式.这是一个可怕的问题.

任何建议将被认真考虑.先感谢您.

我正在玩Vue CLI项目。我已经配置了启动项目，设置了一些开发更改，例如：

package.json

"dependencies": {
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.1",
    "preload-it": "^1.2.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "fontello-cli": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.2.2"
}

vue.config.js

module.exports = {
    configureWebpack: {
        devtool: process.env.NODE_ENV === 'development'
            ? 'inline-source-map'
            : false,
    },
    css: {
        sourceMap: process.env.NODE_ENV === 'development'
    }
}

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            { useBuiltIns: …

我通过用于Google Closure Compiler的Node.js包装器创建了一个连接的缩小文件.当我在Google Chrome中打开开发者工具时,源地图和映射文件都会正确加载.

我遇到的一个问题是,断点不会在源映射文件中触发,就像它们运行未经分析的单独文件会话一样.有时我会尝试在脚本中放置一个断点,它会向下跳几行,而不是我试图设置它.但最令人沮丧的是,当我可以设置断点时,它们不会被触发!我将在我知道正在调用的函数中间设置一个,但脚本永远不会暂停执行.

编辑

我在Ubuntu 13.10上运行Chrome 31.0.1650.57.我也无法在Firefox 25.0中使用它.

我的Web应用程序有两步编译过程.首先,我将CoffeeScript文件编译成JavaScript文件[1].然后,JavaScript grunt-angular-templatesClosure Compiler [2] 将JavaScript文件(来自CoffeeScript的文件和外部的文件,例如由AngularJS模板生成的文件)编译成单个最小化文件.

CoffeeScript ---[1]---> JavaScript --[2]--\
                                           \->
AngularJS templates --> JavaScript ----------> single minimized JS file
                                           /->
                    other JS files -------/

步骤[1]和[2]都产生源图.

是否可以将这些源映射组合成单个源映射,以允许我从运行最小化JS文件的Web浏览器调试CoffeeScript文件？

换句话说:假设源映射[1]由函数表示:

f(position in CoffeeScript) = position in JavaScript

源映射[2]由函数表示:

g(position in JavaScript) = position in minimized JS

我想得到一个由函数组合表示的源映射:

h(position in CoffeeScript) = g(f(position in CoffeeScript)) = 
                            = position in minimized JS

直到最近,我的Chrome浏览器正在正确加载CSS源地图文件.现在,事实并非如此.

设置为:

CSS文件底部有一个源映射标记:

/*# sourceMappingURL=Home.cshtml.css.map */

但网络标签和Fiddler2显示Chrome甚至没有尝试加载源地图文件.

有什么东西我不见了吗？是sourceMappingURL语法是否正确？我打开和关闭了"启用CSS源地图"设置.

Chrome版本:44.0.2403.30 beta-m

在VS 2013中由Web Essentials生成的源映射文件.

运行使用webpack 2构建的应用程序时,会在chrome中检测到源映射,但未加载原始源.我正在使用webpack beta21.

这些文件曾经被自动检测到,即当断点被放入webpack js文件的输出中时,源视图将跳转到webpack的原始源输入.但现在我被困在这个屏幕上:

配置:

var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


const PATHS = {
  app: path.join(__dirname, '../client'),
  build: path.join(__dirname, '../public')
};

module.exports = {


  entry: {
    app: PATHS.app + '/app.js'
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },


  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },

      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') …

我是webpack的新手,在配置它以生成必要的源映射时遇到了一些麻烦.在devtools它说

检测到源地图

但它显示了捆绑而不是原始代码:

这是我的webpack.config.js:

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-server',
    "./src/index.js"
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
  },
  debug: true,
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json']
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      }
    ]
  },
  devServer: { hot: true },
  plugins: [ new webpack.HotModuleReplacementPlugin() ],
  inline: true,
  progress: true,
  colors: true
};

这是我的package.json:

{
  "name": "react-template",
  "version": "1.0.0", …

浏览器何时下载缩小文件的源图？

我很难找到任何浏览器的文档,如果/当他们下载缩小文件的源图(一个以.map扩展名结尾的外部文件,如scriptname.min.js.map).

我正在尝试确定我想要创建的地图文件的详细程度(这会严重影响文件大小),但我看不到文件在Google Chrome中的下载位置(未显示在Dev Tools的网络选项卡中)但它是我在源选项卡中调试时可用.

我想知道如何在 create-react-app 中生成源映射？它们是隐式完成的吗？他们是否住在构建文件夹中

我已经阅读了很多关于它们是用 webpack 生成的，但我的应用程序没有使用它，所以我想知道如果没有 webpack 怎么办？

我也不想弹出