I downloaded draw.io source files from the github repository and tried to make some minor changes to the import function, but all the sources are minified (especially app.min.js).
So my question is this: is there any way to debug the code with the unminified sources?
Also I tried to pass inside the query string the param dev=1, but it gives some errors and doesn't manage to load.
I already saw the post Draw.io — Is there non-minified source? but I don't know how to build draw.io.
If you know the function that you need to edit you can use https://unminify.com to reverse the spacing minification but the variable and function names will still be simplified making it difficult (but not impossible) to edit.
I've found, in my opinon, a strange solution.
I took build.xml file and replaced all the <jscomp> instructions with <concat> so the result file isn't a minification but just a merge of all source files.
This method works just fine and it solves my problem but i don't know if there is a simpler and more right method.
Related
I'm writing code for a library consumed by another program that get compiled and deployed. I have followed these steps to edit my javascript directly in the browser but my changes are never applied.
Can you not edit a javascript file part of a library in place?
You should be able to edit the file. See my answer for this other question. Remember to press Command+S or Control+S to commit your changes.
I found what I was doing wrong. I needed to set a flag to false in my code base to use uncompiled javascript.
Problem I'm trying to solve:
I have multiple bundled JS files: head.js, footer.js, some-other-page.js
If I had these all in a single file I could easily check for dead code and strip it
I'd like to be able to still strip the site-wide dead code from each smaller bundle.
Willing to re-work my build to do this. Any ideas?
A good way to check about dead-code is by having unit-tests to your project and then check the code coverage and see which part was never used. For more about code coverage you can see: https://www.jetbrains.com/webstorm/help/monitoring-code-coverage-for-javascript.html
This will maybe need re-work of your code as well if you are not using unit-tests but it is a very good way to analyse your code for code coverage and see that some parts are never used (hence remove them from your code)
Also for code that it is not yours (e.g. for jQuery) you can use a grunt build to remove the functions/methods that you are not using. A very interesting article of how to do that is this: http://developer.telerik.com/featured/trimming-jquery-grunt . For example if you are not using the ajax from jQuery you can simply do this: grunt custom:-ajax. Known libraries has this functionality so you can build it on the go.
Well,
Good Idea but for understanding purpose it's good to keep it seperate but if you want to combine then use switch
I'm new to AngularJS and Grunt. I have two grunt tasks setup in GruntFile.js for dev and production. For production I'm uglifying & combine many js files into one.
I need some guidance/tips on how to debug uglified javascript code in production if any problem arises. I tried googling asking my co-workers but no help hence my question here on stack-overflow.
Is there a way to un-unglify scripts in production on the fly to debug or
some configuration that toggles to use uncompressed files for debugging and compress files after the job is done.
You guys gave me some amazing approaches. Thanks
If there are some more ways kindly please do share.
Don't debug minified code without source maps. You'll go crazy if you don't. Also, can't you rebuild the code instead of trying to fix minified code?
I use Chrome, but I'm sure FF has a similar tool:
That little brackets button at the bottom of the script panel prettifies on the fly. Works whether the code is sloppy or full-on minified.
It's a good solution for quick-n-dirty, but you will run into problems if you rely on it. Source Maps are recommended. See #Kosch's answer for a decent write-up. funny, we posted identical links
Why using jquery.min.map if:
jquery = 242 ko
jquery.min + jquery.min.map = 83 + 125 = 208 ko (the map is even greater than the library)
And if we remove the comments, we will get a small jquery that could be easier to read (and to debug).
So, why using the map if it will only add more than 100 ko and an extra request?
What is the best practice?
Source maps are loaded only when the developer tools are active. Browsers won't load them for application's users.
Edit: It should be mentioned that there are 2 types of source maps. One which is an external file and there is a link to it in the actual file and another one which is embedded in the main file. Browsers actually have to load the entire file (i.e. including the embedded source map) for the second type.
Check https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more information.
That's called a source map. This answer goes into detail about what they are, how they work, and why you would want to use it.
EDIT
Extracted answer from the above SO link for posterity. Answered by #aaronfrost
The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.
Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
What is it for?
To de-reference uglified code
How can a developer use it?
You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file?
If you care about being able to debug production code easier, then yes, you should do it.
How does it get created?
It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71
I'm dealing with a pure js front-end here and tried to use Juicer today to compress the javascripts.
It worked fine thought without minification since there are tons of errors in libraries I use found by JsLint the validator of which is essential to pass in order to have files minimized.
I left it as is since that would be cool to have at least merging working but it seems not to be the case.
Though eventually all the files were indeed merged into one, app stopped working since jquery is considered undefined. In the file is stays on the first place though.
What could be the possible reason for such a strange behavior? Thanks a lot in advance for your answer!
UPD Here is a link to the merged file
Since you only want to merge them and not minify them, maybe try merging them manually. It's just:
cat file1.js file2.js file3.js > all.js
It's the same for CSS, no fancy merging is needed.
For minification of JavaScript I recommend UglifyJS because it tends to not break code unlike some other tools. UglifyJS is used by jQuery.
When you merge the JavaScript files by simple concatenation what's important is the order of the files to not break dependencies. Another thing that sometimes causes problems are missing semicolons (those can break the code after minification) or missing newlines at the end of the files.