source-maps

问题 I'm using cssmin with the following "Content" folder structure: src |--dir1 | |--style1.css | |--images | |--image1.png |--dir2 |--style2.css |--images |--image2.png dist |--styles.min.css |--styles.min.css.map Where styles.min.css and styles.min.css.map are the result of concatenating/minifying all stylesheets in the"src" folder. I first had issues where styles.min.css contained URLs for images in the wrong places (i.e. "images/image1.png" instead of "../src/dir1/images/image1.png") but

问题 I'm wondering how to generate source maps in create-react-app? are they done implicitly? and do they live in the build folder I've read quite a lot about them being generated with webpack but my app is not using it, so I was wondering how I do this without webpack? I also don't want to eject 回答1: According to CRA documentation, source maps are generated by default in production mode. However, you can disable this behavior (generating source maps in production mode) by running GENERATE

问题 I'm trying to get TypeScript source debugging working in Chrome, but I'm running into two specific and perhaps related problems. The first is that the comment generated by the TypeScript/WebEssentials compiler that's supposed to identify the location of the source map file looks like this: //sourceMappingUrl=MySourceFile.js.map But Chrome won't read that file. It seems expect that the comment will look like this: //@ sourceMappingUrl=MySourceFile.js.map If I manually change the comment to

问题 I'm trying to get TypeScript source debugging working in Chrome, but I'm running into two specific and perhaps related problems. The first is that the comment generated by the TypeScript/WebEssentials compiler that's supposed to identify the location of the source map file looks like this: //sourceMappingUrl=MySourceFile.js.map But Chrome won't read that file. It seems expect that the comment will look like this: //@ sourceMappingUrl=MySourceFile.js.map If I manually change the comment to

问题 I'm logging javascript errors from my site, but the files are minimized so I don't get meaningful line numbers. I do have source maps, however. Is there a service, script, npm module, or anything that can help me "translate" the line numbers from the minified versions into something useful? 回答1: I have found the answer using this npm module: https://www.npmjs.org/package/source-map Edit Feb 1st, 2015 Found the following project which handles this: https://github.com/epeli/source-map-peek 来源：

问题 I would like to attach Angular source code / source map to my generated Angular CLI project, so that I can debug directives like *ngIf in Chrome. Is it possible to somehow attach debugger into ng_if.ts using some angular.json configuration / source map ...? Or is there a setting to add source map in develop mode so that I can step through any 3rd party library with source map attached? If I press Ctrl + O in Chrome and then type ngIf or ng_if there is no such file in the list menu. Edit: How

问题 I have some errors from minified code in production. I have sourcemaps not in production. I'd like to (after the fact) use source maps in a way to convert my stack trace into a human readable stack trace. Has anyone done this before? 回答1: I am also doing some research on the same, and come up with some reference. I am sharing those for you: https://github.com/janekp/mapstrace https://github.com/novocaine/sourcemapped-stacktrace https://hacks.mozilla.org/2013/05/compiling-to-javascript-and

问题 I'd like to hide a part of my code from being shown in chrome dev tools. Is it possible with webpack? 回答1: I guess you could create an identity loader who filters out sourcemaps for these particular files. // remove-sourcemap.loader.js module.exports = function(source, map) { this.callback(null, source) }; Then, in your webpack config: module: { loaders: [ include: [/* list of files (absolute path) for which to remove sourcemaps */], loader: 'remove-sourcemap', ], }, You could also manually

问题 I'd like to hide a part of my code from being shown in chrome dev tools. Is it possible with webpack? 回答1: I guess you could create an identity loader who filters out sourcemaps for these particular files. // remove-sourcemap.loader.js module.exports = function(source, map) { this.callback(null, source) }; Then, in your webpack config: module: { loaders: [ include: [/* list of files (absolute path) for which to remove sourcemaps */], loader: 'remove-sourcemap', ], }, You could also manually

问题 I'm trying to debug javascript application bundled with WebPack in WebStorm using source mapping. My current webpack.config.js looks like this: var path = require('path'); module.exports = { debug: true, devtool: 'source-map', context: path.join(__dirname, 'js'), entry: './main.js', output: { path: path.join(__dirname, 'Built'), filename: '[name].bundle.js' } } The source map is generated and looks like this: {"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack