This is part four of my mini-series, part one covered element inspection, part two covers scripting and part three covered performance.
In this, my final post, I will cover some of the other neat things the developer toolbar does for us. I may get a little deeper than a non-developers point of view. All of the items below live in the menu of the toolbar
Link Report
Click the View menu, then Link report.
This neat little report tells you all of the links on the current page, and how they’re accessed.
Image Report
Click the Images menu, then image report.
This report includes all of the images on the page, along with loads of data about the image, including sizes.
Cache
Pronounced cash, but has nothing to do with money. Cache is a local temporary storage location for assets like images and scripts, and allows your computer to use the local version instead of the server version, which is faster. However, cache is also a frequent headache dealing with web pages. Hopefully your developers and support teams never said “you need to clear your cache”. If they do, you can do this from this menu. Select Clear browser cache… from the Cache menu.
Resize your Browser
You can resize your browser to some of the standard dimensions. Click the Tools menu, then click Resize and select your size. Why would you want to do this? One, you can see what the page looks like for users with a lower resolution than yours. Two, basically an extension of one, is if you’re dealing with responsive web design, you can see what your tablet would see when the browser is reduced to the tablet size.
Ruler
Click Tools menu, then Show Ruler.
A neat little tool to size up anything on the page. Not sure what a non-developer would use this for, but hey, it’s cool anyway.
Don’t be afraid to explore
I think that should do it! The developer toolbar, though named and targeted to developers, has some nice resources for non-developers. Don’t be afraid to explore and try out some other stuff. Have fun and harass your developers, they’ll love it.
RSS - Posts