EDIT: This post is now irrelevant..I've since found the new placement of the 'Pretty Print' button
Making debugging easier
One of my biggest paints when developing/debugging my HypeMachine extension was that they minify all most of their scripts they use. That's why it was a pleasant surprise to hear in Chrome 12.X they had inserted the option to de-obfuscate the scripts in the developer tools window since debugging minified JavaScript is almost impossible because it makes stepping and tracing through the code nearly impossible.
Chrome Developer tools is almost identical to Firefox's firebug.
With Minification
Post De-Obfuscation/Minification
Minificiation is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.
Why was it removed? No worries.
I've recently started to use the dev/canary build of Chrome to play around with and have noticed that the context menu offering the option was removed. I'm not sure the option was removed in the latest builds (I tried Googling a reason) however I decided this would be a perfect time to muck around with their developer tools and learn some a lot of new things!
Chrome Developer Tools
So I've been recently slowly trekking my way up the JavaScript slope (a very awkward and winding slope) and it was neat to see that the frontend for the Chrome Developer Tools are built using JavaScript allowing modifications to their frontend to be straightforward, easy and you can debug it with another instance of Chrome!
- Download front end source files.
- Make modifications.
- Run Chrome with the following command line flag: --debug-devtools-frontend="full path to the extracted folder"
- Run another instance of chrome with the following command line flag: --remote-debugging-port=9222 --user-data-dir=remote-profile
- Navigate to http://localhost:9222 on the second instance.
- Debug your new modifications to the window!
I had decided to add a button to the Scripts panel which performed the same de-obfuscation/minification as previously done in the context menu. Prior to the addition of the option in the context menu in version 12, I was using very often the site http://jsbeautifier.org/ which performed the same functionality. The sourcode that the site uses was graciously placed on github . Using their scripts, I included them into the frontend package and was happy to have back my missing functionality!
You can find the little modification I made to the frontend package here. I'm sure the old code for the missing de-obfuscation context menu was still lying around in the package but meh.
N.B. JavaScript is crazy and Google writes some even crazier JavaScript.
