I've been stuck with the unpleasant task of "unminifying" a minified JavaScript code file. Using JSBeautifier, the resulting file is about 6000 lines long.
Ordinarily, the variable and parameter names would be permanently lost, but in this case, I have an obsolete version of the original file that the minified JavaScript code file was generated from. This obsolete version of the original file contains most of the code comments and variable names, but absolutely cannot be used in place of the current version.
I would like to know if there is some way of renaming all instances of a particular parameter or variable in JavaScript. Since minification reduces the names to a single character, find-and-replace is impossible.
Is there some tool out there, which I can tell, in this file, the parameter a to function foo should be clientName and have it semantically rename all instances of that parameter to clientName?
Unfortunately, I work for a large organization with an approved list of software and I am stuck with Visual Studio 2010 for the forseeable future (no VS 2012).
Update: #Kos, we don't use Git, but we do use source control. The problem is that a developer who doesn't work for my organization anymore once made changes to the file, minified it, and only checked in the minified version to source control, so his changes to the original have been lost.
I'm a year late for this answer, but I had a similar problem to yours so I built this: https://github.com/zertosh/beautify-with-words. It unminifies code using UglifyJS2 but uses a phonetic word generator to rename variables. You get "long-ish" variable names so it's a breeze to do a find-and-replace. Hope this helps someone else!
You might have another way out.
Check out the last unminified version of the code. Compare to the minified version. Arguably most of it should be the same modulo consistent variable renaming. The differences you'll have to rename and remerge.
Diff won't do this kind of compare; you need tools that compare the programs as code, not text. Our SmartDifferencer tool will do this (by using language-specific full parsers to generate ASTs, and then comparing the ASTs); in effect, it compares the programs in spite of whitepspacing. SmartDifferencer also handles renaming; if two file are identical modulo a single renaming, that's what SmartDifferencer tell you.
I don't know how well this work work out; we haven't tried SmartDifferencer with 6000 lines of "consistently renamed" variables.
I found that a Visual Studio extension we've licensed here called "Telerik JustCode" has functionality to do what I want.
Related
I am learning JavaScript and one of my learning methods I use (same as html, CSS/SCSS) is to read source code to learn the language and try to understand what is happening.
But I am having trouble with JavaScript, as it's full of random letters and I can't work out what the code is doing. Is there a process of changing the JavaScript code (variable names etc...) when the file is minified and published on the web with the rest of the website files.
It depends on what minifier or optimizer you're using, but I'd assume that any quality optimizer should reduce variable names to shorter versions.
Using TerserWebpackPlugin:
// src/index.ts
const greeting = 'Hello World!'
console.log(greeting)
export default {
greeting: greeting,
}
Compiles to:
// /lib/build.js
...{return(()=>{"use strict";var e,r,n,t,o,i={607:(e,r,n)=>{n.r(r),n.d(r,{default:()=>o});const t="Hello World!";console.log(t);const o={greeting:t}}},d={};function c(e){var r=d[e];...
Variable greeting was changed to t.
Which would also make sense because if you have 10k variables in your project, each ~10 letters long, reducing it to 1 letter would be 10k * 9 = 90kb reduction in bundle size.
If you want to study javascript code then don't do it with minified versions of code, it's incredibly hard to read such code.
JavaScript, as a interpreted language, is not being compiled. One of the downsides of this is that the code is supposed to be human readable but also as small as possible in order to have fast web pages.
That's why web developer tools include "bundlers" (like Webpack or Rollup) which help reduce the number of files by grouping them, remove unused code (also known as tree-shaking) and minify the code by reducing the number of characters as much as possible while not changing the code behavior.
For example:
var variable becomes var a
true becomes !0
false becomes !1
...
Even global objects can be minified by using this pattern:
(function(window) {
// You can write code that uses window while window is eligible to minification
// Because it's a regular variable in this context
})(window)
Many other minification techniques exist...
When the code has been minified, it's impossible to revert, unless it has been built with source maps which make the code look like it's not minified in the debugger.
If source maps don't exist for the code you are reverse engineering, then you don't have any solution unless the source code is public. In that case you'll probably be able to find it on https://www.github.com
I've started using Vim 7.4 on Ubuntu and am very pleased with it but there is just one thing driving me crazy: code folding doesn't work (at least for JavaScript)!
The syntax is automatically set to JavaScript when a js file is opened and syntax highlight works so I don't get it. The foldmethod is initially set to "manual" and setting it to "syntax" doesn't make a difference, which puzzles me. I did add let javaScript_fold=1 to my .vimrc file.
Any clue? I'd be very grateful. Thanks!
It's tough to say the exact cause of this issue, but if you don't have a javascript.vim file you probably should. I suggest starting with this enhanced javascript syntax config. It is likely to fix your javascript folding issue, and much more.
If you just want to focus on the folding issue you might try creating your own javascript.vim file in ~/.vim/syntax/javascript.vim that contains code along the lines of what I have given below. You may want to adjust the fold level to your liking (0 is completely folded). However, this simple version will not play well with comments containing curly bracket characters, which is where you will want to go with a more robust javascript.vim like the one I have linked.
syntax region foldBraces start=/{/ end=/}/ transparent fold keepend extend
setlocal foldmethod=syntax
setlocal foldlevel=0
I should add that both myself and the other responder are suggesting that you need a javascript.vim, and in fact by some of the same contributors. However, the one I am suggesting was last updated in December of 2015 as opposed to 2009.
I don't know why your solution isn't working, but a possible solution is to use a user-created vimscript available at http://www.vim.org/scripts/script.php?script_id=1491
Just had this same issue answered on Vim Stack Exchange, and the answer is that if you do use the stock syntax/javascript.vim file, then you have to set
vv
let g:javaScript_fold = 1
^^
The difference between the command in the question and here is the g: part (highlighted above). I'm new to Vim scripting, but I believe the difference is that let javaScript_fold=1 sets a script-local variable, making it confined to your .vimrc file, and the example above makes it global (which seems to be confirmed by this Stackoverflow thread). See more on this at section 41.2 Variables in :help usr_41.txt and :help internal-variables.
This Reddit thread was also enlightening; it's not JavaScript-related but the folding seems to be useful for JS files as well.
Original Question
This maybe a stupid question but is there a way in VS 2013 to unminify JavaScript?
Just making sure we are all on the same page here.
Minify:
var flashVer=-1;if(navigator.plugins!=null&&navigator.plugins.length>0){if(navigator.plugins["Shockwave Flash 2.0"]||navigator.plugins["Shockwave Flash"]){var swVer2=navigator.plugins["Shockwave Flash 2.0"]?"
That's just an example to make sure we all know what I'm on about. As far as I can tell there is no way to be able to do this. I have only been using VS 2013 for around 3 weeks so there is probably still stuff that is hidden to me.
If there is no way to do this within the program what is the next best thing for this?
I did see on another similar post that recommends the site http://jsbeautifier.org/ , so may have to give that ago but would make life easier if it was built into VS 2013
Thanks in advance as I know someone will be able to help me out here.
Update:
I have looked around VS 2013 and found nothing that can help me with this problem, like I said before they maybe some things I have missed (certain settings) so I guess if it cannot be done in VS what's the next best thing for the job? I seem to run into a fair amount of JS that is minifed and would like the quickest and best way to get the job done. I couple sites I have tried seem to have problems with it, is there a program I could install that would just allow me to short cut it with a hot-key or something. That would be pretty handy.
Update 2:
So I think its safe to say this cannot be done within VS2013, or for that matter at all due to missing var names and so on. So I have seen a few links and programs that allow you to format the code. Is there a way to do with within VS2013? And again if not what is the most reliable website/program that I can use to do this. Like I said I can see there have been answers and I appreciate all of them. I will be leaving this question open for a while to get more people to look at it and possibly give a better answer. Keep it up guys!
Update 3:
If anyone has any more information on this please do share. I am still looking around now and then waiting for someone to come up with something amazing for this. One day people.... One day!
The thing is that you cannot really "unminify" your code since some data was already lost - e.g. variable names. You can reformat it to more readable form though.
According to this question, since VisualStudio 2012 you can just use Ctrl+E, D keyboard shortcut
If the above is not right, there is this extension for VS 2010: http://visualstudiogallery.msdn.microsoft.com/41a0cc2f-eefd-4342-9fa9-3626855ca22a but I am not sure if it works with VS 2013
There is an extension to VisualStudio called ReSharper which can reformat javascript in a few different manners.
Also there are online formatters already mentioned in other answers (if your code is confidential, I would advise some paranoia manifested by downloading sources and using them locally).
Also you may always try to find unminified version of desired library on the interwebs
Also, there is the WebStorm IDE from JetBrains that is able to reformat JS - you may download a trial for the sole purpose of reformatting your minified scripts :)
If that's just to make debugging easier, you may want to use source maps
Also, here is a bunch of related questions:
How to automatically indent source code? <-- this is for VS2010, but it looks promising, maybe it will help you if it supports JavaScript (and it does since VS2012 according to MS support):
Ctrl+E, D - Format whole doc
Ctrl+K, Ctrl+F - Format selection
reindent(reformat) minimized jquery/javascript file in visual studio
Visual Studio 2010 can't format complex JavaScript documents
Visual Studio code formatter
how to make visual studio javascript formatting work?
I am not sure if they figured out a working way to reformat JS, but I've seen a few answers which might be helpful - I am just pasting this in here just FYI.
Added 03.06.2014:
http://www.jsnice.org/
This tool could be useful too, it even tries to infer minified names. As stated on their website:
We will rename variables and parameters to names that we learn from thousands of open source projects.
Personally I can't think of a reason to ever unminify code^:
If you're using a compiled js file (a-la google closure) and want more readable code to debug, use source maps available for well-supported libraries (speaking of jQuery, if it is served from a google CDN it already maps to the correct source)
If you're using a whitespace-only minified js file and want more readable code to debug, you could just toggle pretty print in-browser. This seems to best fit your question.
If you're using either of the above and want to modify the source code for a third-party js file, don't. Any future release will cancel out your change - instead consider one of the many patterns to extend a framework (or, perhaps, do some duck punching depending on the exact scenario.)
The other answers seem to cover the "unminification" process (maxification?) well, but it's worth making sure it's a necessary step first.
^ - Except when version control falls over, there are no backups and the only version of the file left is a minified copy in browser cache. Don't ask.
Its just a one way transformation .... sorry in normal cases you will not get something understandable back from minified JavaScript !
Make just a quick look at JQuery source for a second:
(function( window, undefined ) {
// Can't do this because several apps including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// Support: Firefox 18+
//"use strict";
var
// The deferred used on DOM ready
readyList,
// A central reference to the root jQuery(document)
rootjQuery,
// Support: IE<10
// For `typeof xmlNode.method` instead of `xmlNode.method !== undefined`
core_strundefined = typeof undefined,
// Use the correct document accordingly with window argument (sandbox)
location = window.location,
document = window.document,
docElem = document.documentElement,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// [[Class]] -> type pairs
class2type = {},
// List of deleted data cache ids, so we can reuse them
core_deletedIds = [],
core_version = "1.10.2",
------
And now at the minify source:
(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,
l=e.jQuery,u=e.$,c={},p=[],f="1.10.2", ....
I think now you see it =>
window => e
undefined => t
readyList => n
rootjQuery => r
core_strundefined => i
location => o
document => a
So its mapped somehow to make it more shorter look here to minify something
People normally use this so there is no way back
you can just format it look here
If the code has only been minified then the best you can do automatically is reformat to make it more readable. One way of doing this is using an online formatter/beautifier. E.g. Copy and paste the line of code you posted into http://jsbeautifier.org/ or http://www.jspretty.com/ and it'll produce something like this:
var flashVer = -1;
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"]
|| navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? ""
But of course what these don't do is put any comments that have been removed by the minifier back in. And if the code has also been obfuscated then it will be a lot less readable since the variable names will have changed (e.g. var a instead of var flashVer). See here for further details.
As you can see from the other answers, there is no way to reconstitute minified Javascript back into its original form, it is a lossy compression. The best you can do is make it readable by reformatting it.
If the code is open source, then it is likely that the code will exists in a raw state on some form of version control site or as a zip. Why not just download the raw version if available?
There is an online tool to unminify Javascripts
http://jsbeautifier.org/
And also for CSS
http://mrcoles.com/blog/css-unminify/
There is a website called Gild.com that has different coding puzzles/challenges for users to do. They can be completed in wide array of languages including Javascript. I am interested in solving these puzzles in Javascript, but I am unsure of the following:
How am I supposed to access the input file which is supposed to be passed as an argument?
How am I supposed to output the result?
My understanding of Javascript is that it is run from within an HTML page and that output really is only in the form of placing values in the HTML, modifying the DOM, etc. For that reason it is not clear to me how Javascript can be used for solving these types of problems. Can someone who has used Gild before or has some insights into my question suggest how to proceed?
An example of a problem would be: the given input file contains a positive integer, find the sum of all prime numbers smaller than that integer and output it.
EDIT: Some of the solutions below involve using external resources, but on Gild, I am supposed to put my solution in their editor and then submit it that way, like the following picture shows:
In other words, I don't think my solution can have access to Node.js or other external resources.
Edit: Here are some interesting articles that I have found that I think are the answer to my question:
http://www.phpied.com/installing-rhino-on-mac/
http://www.phpied.com/javascript-shell-scripting/
I haven't spent much time on Gild, but I do a lot of similar types of problems on Project Euler. I think the best way to go is probably Node.js.
If you're not familiar, Node is basically server-side JavaScript that runs in Google's V8 engine. Installing it on your own Mac/Windows machine takes about 2 minutes. It's also really fast (considering it's JavaScript).
And you'd use it like this:
var fs = require('fs'); // the filesystem module
var contents = fs.readFileSync('theFile.txt', 'utf-8');
// Do stuff with the file contents...
Everything after those first two lines can be done with the same JS you'd write in the browser, right down to calling console.log() to spit out the answer.
So, if you wrote your script in a file on your desktop called getprimes.js, you'd open up your terminal and enter node ~/Desktop/getprimes.js (assuming you're on a Mac)
If you're:
on a Mac,
planning to do a lot of these puzzles, and
willing to pay $10, then
I highly recommend CodeRunner. It encapsulates runtimes for a variety of languages — from C to JavaScript — and lets you quickly build and run any sort of one-off code. Just hack together your code, ⌘R, and the results are printed right there in the same window.
I haven't used any file-based JavaScript in CodeRunner, but I imagine kennis's suggestions would apply. To output your results:
console.log(...)
Easy as pie!
I'm looking adding Subversion's revision number to the name of each .js file we include, so whenever the .js file is updated, the browsers will automatically fetch the new version.
I believe Stackoverflow does this, but I wonder how. Is this part of the release procedure? Any hints on how to achieve this using Subversion tools?
There is no standard way to have Subversion add the revision to the file name. Use a build tool (for example, ant) and a custom target for this.
If you set the SVN Keyword "Revision" on the file which declares the tag, then the literal text $Revision$ becomes a SVN keyword. Each time you update the working copy, $Revision$ will update to read $Revision 1234 $ where 1234 is the current revision number.
Just be forewarned, we have run into problems with IE6 using this approach. We had put for all our tags (and applied the SVN Revision keyword to them) so that every time we push a new copy of code out to our production boxes, we know all clients will get the current revision. But IE6 sometimes creates weird errors when this happens; as though you were missing some of those script tags. In the end we took them out because it caused us more problems with IE6 than it ever solved us.