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
Chrome Developer tools is almost identical to Firefox’s firebug.
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
- 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.