6 Tips for Chrome’s Web Tools
Chrome's Web Inspector (or equivalent in other browsers - even Internet Explorer!) is incredibly useful in testing sites - here's a few tips for getting the most out of it:
One of the most useful features of any inspector tool is the ability to change styles on a site without having to reload the page, giving you instant feedback on how style changes affect the site. (It's also very useful for 'correcting' horrible designs when you're trying to read other sites!). For instance, you can change colours to see how they'd look:
Of course, this is more useful when adjusting margins or text-size to see how the page's flow is affected. You can also add new styles to elements by highlighting the element then pressing the 'plus' icon in the top right:
It even has auto-complete!
Toggle hover states
If you've ever tried to edit link hover states in the Web Inspector, then you've probably been hovering over a link then frantically jumping across to the inspector before the hover state disappears. (No? Just me then :/ ) But no longer! Web Inspector has a useful feature to toggle various states (hover, active, visited) on element - click the dotted rectangle icon in the top-right of the 'Elements' tab to reveal the toggles:
One thing I missed from Firebug was the 'Layout' tab - a diagram of an element's box model (a drawing of the width, padding, margins and borders of each element on a page). However, Web Inspector does have this function - it's hidden away towards the bottom of the 'Elements' tab underneath the styles dropdown, and is hidden by default:
After you've tweaked your website, you could labouriously copy those changes to your source files - or alternatively use Web Inspector's save function! In the 'Sources' tab, right-click anywhere in a file and choose the 'Save' option - this will allow you to save the modified version of your file.
Tips for speeding up sites
One really useful function is the 'Audit' tab - this checks a page and lists ways to speed the page up:
This is similar to external tools such as YSlow, but having it built-in to the Web Inspector is very useful. The 'Network' tab can also come in handy for analysing why a page is taking a while to load - it generates a waterfall diagram of the time taken for each element of the page to load - ideal for tracking down any rogue (i.e. huge) images!