I'm using UglifyJS2 to compress an output file from Browserify. Browserify has generated its own source map which it tacks the bottom of the file like so:
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjo...
I've got an error my JS somewhere in one of the files I've require'd, but Chrome is telling me the error occurred somewhere in the browserify output file rather than pointing me all the way back to require'd file.
The in-source-map option doesn't say anything about base64-encodings, so I haven't set it to anything.
i think sourcemap with uglified js has not support yet.
our team deploy minified source and debug it by Chalres's Map Local or Fiddler's autoresponder with not minified source with sourcemap.
Related
Is there any way to convert webpack bundled js file into source code ts?
I have bundle.js file with me bundled with webpack. Unfortunately the source code files are deleted by a stupid accident. I want to reverse engineer my bundle.js file to get back my source code typescript files. Is there any possible way to achieve this?
Do you still have your source map files by any chance (e.g. main.bundle.js.map )? If so, you can run your app (ng serve), open the Chrome Dev Tools in your browser and you'll see your sources in TypeScript under the tab Sources -> webpack://
You may try using debundle node module.
Debundle
Recently I faced a very nasty problem with source mapping using grunt-contrib-concat. Grunt-contrib-concat concatenates several .js files into one and uses source-map module for source mapping.
So breakpoints in my code paused incorrectly both in Chrome and in VS Code. (You know what is it, if you faced the same problem).
My environment: Windows 10, VS Code with Debugger for Chrome extension, Chrome browser, Node.js project with grunt-contrib-concat dependency.
It is very unefficient to debug your client-side code without correct breakpoints.
I have spent several hours to clear the problem, and finally I have found the solution. Problem was in concatenate minified .js files. After these minified files line numbers in source map become wrong.
So the solution is to exclude minified files and use normal instead.
I have some JavaScript code that is compiled to commonJS modules from arbitrary compile-to-JS languages and I would like to debug the browserified code using sourcemaps.
So my files have a //# sourceMappingURL=index.js.map already and I'd expect browserify to read that and transform them so I can debug with my original non-JS language.
Do I need another transform for this?
I tried it with browserify's debug flag, and then it does generate a sourcemap but it is for the intermediate JS files, and NOT the original non-JS files. I even see the original //# sourceMappingURL statements lingering in the bundle, and my browsers debugger doesn't like it a all.
Is this possible at all?
I see this: Keep original typescript source maps after using browserify But it doesn't work.
You can run Sorcery on the output of broswerify. Sorcery will resolve a chain of sourcemaps until it gets to the original files. Sorcery emits a new sourcemap that has the original sources. This is not tied to any specific tool so it will work with webpack.
Installation: npm install -g sorcery
Usage: sorcery -i outputOfBrowserify.js
That command will overwrite the file and its source map in place.
I am working on a project where I have to statically analyse JavaScript code. However, for a few libraries, I only have access to a minified version of the file and the corresponding source-map. Is there a method/technique with which I can generate the original file using these files?
I found a node.js library that can help do this: Maximize
Corresponding github repo
If your objective is "just" to do a onetime re-construction of the original source code I did it using:
Online Source Visualization
use the "Custom" option
upload compiled file
upload source map file
Depending on filesize it may take a while to view the results.
The correspoding Repo is here
This command line tool is really easy to use
npx uglify-js ugly.js -b --source-map "filename='ugly.js.map'" -o beauty.js
https://www.npmjs.com/package/uglify-js
https://stackoverflow.com/a/70584632/13581139
In node.js express app and nodeunit tests I widely use coffeescript without saving resulting javascript files on disk to avoid project clogging by javascript translations.
When I got any error in coffeeScript file I see in console: the filename where error was occured and line number (for example 37): /pathTo_File/fileName.coffee:37. But I dont have 37th line in my coffee file!!! I have two times less lines there.
I guess that I got error on 37th row in my output javascript file, but I don't have it on disk. Coffeescript files only.
So how I can get line number with error in coffeescript file?
I understand that I can translate my coffee script file manually (using console) to js and see there line number and guess on what line I got that error on my coffee file. But maybe there is something faster.
My IDE is WebStorm and os is osX.
CoffeeScript 1.6.1 and above include support for generating source maps, a way to tell your JavaScript engine what part of your CoffeeScript program matches up with the code being evaluated. Browsers that support it can automatically use source maps to show your original source code in the debugger. To generate source maps alongside your JavaScript files, pass the --map or -m flag to the compiler.
http://coffeescript.org/#source-maps