Cool Chrome Debugging features

This week while troubleshooting various issues I came across some cool features of the Chrome browser. While not really all that jaw dropping they may come in handy none-the-less.

Click the wrench icon in the top right corner and then pick “View Background Pages” this will bring up a dialog which shows you how much memory and cpu the browser, each tab and each extension is using, which is pretty handy. You can also end these processes from this window. Now click on the “stats for nerds” link at the bottom left of this dialog. This will show you more of the same information but with much more detail.

Open up the Developer Tools option by clicking the wrench icon in the top right corner and then click Tools\Developer Tools. Navigate to the console tab and in the bottom left hand corner is a set of icons:

chrome-console-options.jpg

Going in order from left to right, the first icon will open the developer tools into their own window. This comes in real handy to compare to the IE Tools ensure you’re seeing the same console.log outputs, compare the html tab to a source code page or just to be on a separate monitor for easy viewing. The next button is to toggle the console if you’re on a tab other than the console tab, this makes the console available on any tab. The last button here is to clear the console. Now, I was complaining that Chrome doesn’t have a place to execute Client Side Javascript from the console, but it does. While it’s not as intuitive or nearly as nice as the firebug console it is there and it does work. You can find it at the bottom of your javascript console output, it’s got a little “>” where you can type. To me this wasn’t very intuitive especially seeing as how I’ve been using this browser for pretty much everything for about a year now. Also, it doesn’t save your JS.

chrome-console-customjs.jpg

Navigate to the Scripts tab. Here you can see all the scripts that are loaded for the web page you’re currently viewing. But a lot of times these scripts are compressed and might as well be impossible to read. Well, the last button at the bottom left is a “Pretty Print” button. This will “uncompress” the javascript file so you can read it.

chrome-scripts-buttons.jpg

Navigate to the Network tab. Here shows all the network traffic initiated by the current web page. This tab is extremely handy for troubleshooting as it allows you to see the network traffic being passed back and forth between the server and the browser. It’ll show you submitted values, returned values, any JSON that may be coming back or being sent and also HTML being sent back to the browser. At the bottom left is a series of buttons. The ones to the right allow you to filter the information being shown in the panel. However the ones on the left do some other useful stuff. The first one will “minify” the list. By default each list item of network requests in the panel are kind-of tall, this will shrink them. Me personally, I like the tall version. The second button will preserve the console log between requests. So if you have a page that has a couple of full refreshes but you want to see what comes across the console, enable this and the console output won’t be lost. The last button is just to clear the requests.

chrome-networkButtons.jpg

Last on the tour is the HTML Elements tab. This tab will show the generated HTML for the current web page. This tab is also very handy as it allows you to see the determined styles so you can troubleshoot why your styles aren’t being used. You can also edit the styles and HTML elements right in this pane and they will show up immediately, very handy indeed.

On all these tabs there is also a search box available. I’ve had mixed results using the search functionality, especially with nested items, but YMMV. So, I hope you find something useful here to help you troubleshoot your web pages.

Share This: