Skip to main content

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript files is an impossible task.

With the latest version of Google Chrome one can choose to de-obfuscate the javascript code right with in the developer tools. This is how the jquery.js file would look before de-obfuscation:



Now, to de-obfuscate the code one can right click on the file and select the 'De-obfuscate Source' option. This would de-obfuscate the javascript code and present the code which is readable and ready to debug:



Update:

This post was written when Chrome 12 was released. In recent versions, this option is available as a button - 'pretty print', at the bottom left corner of the screen. Look for the button with the icon '{ }'.


Comments

  1. I don't have an option for de-obfuscating the code, but I do have a new "Pretty Print" option next to the Pause Exceptions option. Seems to do the same thing.

    ReplyDelete
  2. You can right click anywhere on the javaScript and you should have 'De-obfuscate Source' option there. Are you on Chrome 12?

    ReplyDelete
  3. in chrome 13 and above it is a { } on the bottom right corner of the screen

    ReplyDelete
  4. @Adelein,

    You're right, they have now provided the option pretty print.

    ReplyDelete
  5. Oops, that's *bottom left* .. the curly brackets :)

    ReplyDelete
  6. I have update the post with the option available in recent version.

    ReplyDelete
  7. Thelle Hedegaard KristensenJune 7, 2013 at 9:12 PM

    Thanks for sharing! Is there something similar for minified CSS?

    ReplyDelete
  8. We've launched a new Javascript Obfuscator called http:///www.javascript2img.com.

    It embeds the JS code into a image.

    It's free and hope to he helpful ...

    ReplyDelete

  9. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  10. Please keep sharing more such article. I've really like your blog and inspire me in many ways. free essays for you.

    ReplyDelete
  11. Thank you for this post. This is very interesting information for me. paperhelp.org reviews

    ReplyDelete
  12. This article has a lot of useful information which help to meet all requirement with this topic. Same as another useful information remove fuq.com virus from system and stop adult popup ads.

    ReplyDelete
  13. I really liked your article and the photo is super. Thanks you.

    ReplyDelete
  14. I have completely read this information and want to say this can be inspiration because I found your effort by reading this article and also, I appreciate. free your computer from browser hijacker is also a valuable guide.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Discover best tips on essay writing https://homework-writer.com/blog/argumentative-essay learn how to put your argument right.

    ReplyDelete
  17. Some friends was provoke me to read useless blog but I could not get helpful information. That since day, I was looking for best blog for keep me updated so thank you for shaing such blog. Recently I read about how to download dell usb drivers which is the best guide for dell computer/laptop users.

    ReplyDelete
  18. You're the best to share this information. Internet showcasing is the best method for advancing and promoting any sort of business today. Showcasing a business online includes various distinctive advancements and systems that are each of the a piece of a decent. So, do not forget to read about how to protect your system from ytmp3.cc easily.

    ReplyDelete
  19. I was recently searching for a solution of javascript code in Chrome Developer Tools. Being a web developer at a web design London agency, I need to learn how to debugging javascript code via tools.

    ReplyDelete
  20. Academic writing is clear, concise, focussed, structured and backed up by evidence. Its purpose is to aid the reader’s understanding.
    It has a formal tone and style, but it is not complex and does not require the use of long sentences and complicated vocabulary.
    Each subject discipline will have certain writing conventions, vocabulary and types of discourse that you will become familiar with over the course of your degree. However, there are some general characteristics of academic writing that are relevant across all disciplines.
    Read more about academic writing at Oxford Style of Writing

    ReplyDelete
  21. I really liked your article and the photo is super. Thanks you.

    Web Design London

    ReplyDelete
  22. Thanks mark for your excellent service..well be using again in the near future..beats any other service in the area.thanks again. picbear

    ReplyDelete
  23. I was recently searching for a solution of javascript code in Chrome Developer Tools. Being a web developer at a http://weblinerz.co.uk/ agency, I need to learn how to debugging java script code via tools.

    ReplyDelete
  24. "Insightful" is the perfect word to describe this wonderful writing of yours. The artistic blend of this subject with your tone of writing made this a great read. Much love 😘.
    How to bottom

    ReplyDelete
  25. Amazing article written. This website was suggested to me by my cousin and he told me that I can find the answer to all my queries here.
    Great site, Great Content. i was searching about some best offline shooting games for my phone and I found the list of games on this website.
    Thanks.

    ReplyDelete
  26. Kaspersky and Bitdefender have almost the same list of features. The biggest difference is where they introduce them. You get more for less with Bitdefender, but at the cost of core security features such as a firewall.

    ReplyDelete
  27. A lot of time is needed by a student to conduct a research that will help in writing a brilliant paper. But you do not need to spend your valuable time on this. Here work professional writers who will do assignment on time.

    ReplyDelete
  28. Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

    website builder for reseller

    ReplyDelete
  29. Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

    private label website builder

    ReplyDelete
  30. This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

    white label website builder

    ReplyDelete

  31. Greetings.
    My teacher asked me to write some essay about World War II. I don't know the world history well
    so I'm going to use custom writing service. Did you use it once? What's your thoughts?
    https://samedayessays.net/coursework-writing-service/

    ReplyDelete

Post a Comment

Popular posts from this blog

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.