F12 for website developer tools & device modes

Modern versions of Firefox, Chrome, and Internet Explorer each come with powerful tools for website development. In your browser of choice, hit F12 on your keyboard to toggle them on and off.

Each browser offers variations on these tools, but these common utilities are my favorites:

A code inspector for viewing the page's HTML and CSS code and making on-the-fly edits to what you see onscreen. Edits made from the code inspector aren't saved anywhere—they only last until you refresh the page. Use it for: debugging tricky formatting, experimenting with new text or styling before actually making live edits.

A network tab reporting how quickly every component of the page loads, including total load speed and weight. Use it for: figuring out exactly which files may be slowing down the page.

Device modes for seeing how a web page looks on screens of varying sizes (with resolution presets for common devices). Use it for: checking how pages behave on small screens when you don't have access to the latest phones and tablets.

If you hit F11 by mistake, something scary happens—all your toolbars disappear! Your browser has gone full-screen. Take a deep breath, and hit F11 again to toggle full-screen mode off.

More about developer tools:

• Chrome: DevTools and Device Mode Emulation
• Firefox: Developer Tools Toolbox and Responsive Design View
• Firefox Developer Tools alternative: Firebug Add-on
• Internet Explorer: F12 Developer Tools and Emulation