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:
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.
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.