Recently, I found a chrome extension Session Buddy. I want to study the js code of this extension. But the variables in the css and js file constructed only by l and I. The code is unreadable.
So I Google to find some tools change the js code unreadable. but failed.
I want to know Which tools can do this.
and I want to know if there is a tools can guess the origin file (some popular js library)?
The code was most likely minified (which decreases the file size, as well as makes it unreadable). You can use this site to minify your code: http://dean.edwards.name/packer/
You can check the Base62 Encode option to obfuscate the code further.
In order to make minified code more readable, use a Javascript beautifier: http://jsbeautifier.org/
Many developers want to protect their work and use "code obfuscators" to make the code unreadable.
Google for "javascript deobfuscate" to get a list of tools that can revert (some) of the damage. jsbeautifier is one of them.
Related
I am trying to understand JavaScript minification and compression processes and have couple of questions on these:
Since minification makes the code difficult to debug, is it possible to do on-demand de-minification on client-side to cover-up for cases where you actually need to debug and investigate something on the website?
I remember reading somewhere that one can enable compression of all resources (like images, CSS, JavaScript etc.) by setting some options in the Apache Web Server. Is there any difference in the JavaScript compression done at Apache level and, the one done using tools like YUI Compressor?
Can someone help me know the above?
The kind-of cases where I would actually need to de-minify my JavaScript files is let's say a JavaScript error happened at line no. X. With a minified files it would be very tough to know which block of code caused that error in production as the lines are all wrapped up in a minified file. How do you guys investigate and debug in such circumstances? Another user also mentioned this debugging problem in Packed/minified javascript failing in IE6 - how to debug? questions (slightly specific to IE6 though).
You shouldn't be debugging minified code. Ideally, development process is like this:
You build and debug the site locally. You have full versions of javascripts, stylesheets and everything.
You deploy a version to production machine. You minify and gzip a copy of your assets and push that to the server. Your local development copy is left untouched.
If there's a bug in production, you modify your local version, minify, compress, upload.
Repeat until PROFIT
Chrome Dev Tools can de-obfuscate (and de-minify) javascript code if you want to debug production code (useful when trying to replicate a bug on a live environment you may not be seeing in dev)
Typically developers will develop against the uncompressed script file, compress right before deploying.
If you have to go back and debug your script files, you'd just open up the regular, uncompressed file, do your work, compress, and deploy. If you mean debug something while your website is in production, then no, you can't un-minify your script file on demand.
And yes, Apache, and even IIS, can gzip compress scripts and images automatically for you.
Since minification makes the code difficult to debug, is it possible
to do on-demand de-minification on client-side to cover-up for cases
where you actually need to debug and investigate something on the
website?
Sort of. Minified javascript has the same structure, it just does things like delete extra spaces and shorten variable names. So you can easily make the code readable again, either manually or with a script, but you can't recover variable names, so the code will still be harder to work with. So, if you have the original code, definitely don't get rid of it. Save the minified code separately.
I remember reading somewhere that one can enable compression of all
resources (like images, css, javascript etc.) by setting some options
in the Apache Web Server.
Yes, it's called gzip compression. It's not unique to apache, but you would need to configure your server to enable it.
Is there any difference in the javascript compression done at Apache
level and, the one done using tools like YUI Compressor?
Yes. YUI compressor is a minifier - the output is valid javascript. Server-side compression is more analogous to zipping a file - the browser must decode it before it can be used. Using the two together would yield the smallest filesize.
I prefer working with a local unminified copy of the JS-file, and when i deploy the site, I minify all JS-files into one. That way it is easy to debug and improve the code. However, there are tools to revert minification. Have a look at this SO post on revert minification of JavaScript.
Have a look at GZIP compression - This blog describe how to enable GZIP in Apache and how to verify that your server actually is compressing the files.
is it possible to do on-demand de-minification on client-side
Some browsers have a "pretty code" view that automatically formats source code. See Firebug's CSS tab.
Is there any difference in the javascript compression done at Apache level and, the one done using tools like YUI Compressor?
YIU Compressor is a actually a minifier. Apache compression is like ZIP-ing up the file before it is sent to the client so the actual file that is sent is smaller than the file on disk. They are two different technologies that are independent of each other.
I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)
We know that Google and Yahoo use too much javascript AJAX stuff on their website.
Google specifically use too much in gmail.
I have seen in my website all the js files are readable and anyone can see how i am performing my functions.
i want to know that how can i read the javascript function in js files Google uses.
When i open them they all look very close that i can't even read it.
is there any software or site or any tool which can help me in reading those files
These scripts have been minified for bandwidth and obfuscation purposes.
Typically, part of the minifying process is to rename variables to meaningless names like a. It is not possible to regain the original names to make the code meaningful.
Instead, ask the developer whether (s)he is happy to provide you with a copy of his/her original code.
Copy/paste that code into Visual Studio (you can get Visual Web Developer Express for free), then use document formatting feature (Ctrl+k, Ctrl+d) to let it format the script for you. But don't forget that as #Tomalak Geret'kal has said, these scripts are both minified (compressed) and obfuscated. Therefore, reverse engineering is not that much possible.
I used online YUI Compressor for minifying my javascript file... Now i got minified version of it but i lost the source as i uploaded the source javascript file without taking a copy of it...
How can i get source from a minified javascript file?
You will have to work hard, but as a starting point I would recommend you to reformat and reindent the code, there are out there some tools to do it:
JavaScript unpacker and beautifier
JavaScript Beautifier
That as I said, will give you a starting point, you will need to know the code well to rename your variables and functions properly.
The last option would be to consider a rewrite, which if you know exactly what your script is meant to do, can take less time than refactoring the minified source...
And at last but not least I would recommend you to work always with a version control system and do backups often...
Minified JS file is the source code in fact. It's just highly obfuscated.
You can, for example, load this file into Aptana editor and hit ctrl+shift+f to format the source. Or use any other source code formater.
You will get your code structure back, but the variable/function/property names are lost forever.
Hard lesson :)
I've used both the aforementioned
JavaScript unpacker and beautifier
JavaScript Beautifier
but i find the built-in Chrome Pretty print function in the Developer Tools to have been the the most consistent.
it's under the Scripts tab, in the icon menu alongside Pause on debug, Show/hide console, and Window docking
Here is an example where the referenced file is a minified file and automagically transformed into something legible:
http://prettydiff.com/?m=beautify&s=http://prettydiff.com/prettydiff.js
I'm combining multiple js files using YUI Compressor. The command works successfully and outputs a combined file properly.
When I point my page to it, however, it doesn't seem to be read properly and I get this error in the Javascript error console.
YAHOO is not defined
I've tried using the --nomunge and --preserve-semi options but still get the same error.
Any ideas?
are you sure you're including the yahoo YUI js file before your script?
the variable YAHOO is defined within yui.js, so that script needs to exist and be loaded before you attempt to run any javascript that uses it.
Dave,
Hard to know what the problem is without a link to the compressed file.
You may also want to post those links to the dedicated YUI Compressor discussion forum on YUILibrary.com:
http://yuilibrary.com/forum/viewforum.php?f=94
Compressor's developers are there, as well as an interested community of fellow implementers.
-Eric
Did you try to jslint your code?
It may help you detect JS errors
It can usually be integrated in your IDE(I use Textmate), and warn you when you save your js file.
A poor man option is to use the online one at: http://www.jslint.com
Another option is to use a softer compression tool like jsmin to debug the problem. One is hosted here
You compress your files. Run your app, and usually your JS debugger will show you the problem.