Make better websites with browser developer tools

Once upon a time, debugging a web page involved inserting copious amounts of alerts into our JavaScript, hitting refresh, and then hammering every alert box OK button until we found the information we wanted. Thankfully, over the years, debugging a website has got easier, with the main browsers making specialist, built-in tools available to developers.

Browser developer tools allow us to inspect, edit, debug, log and profile our HTML, CSS and JavaScript, and include an exhaustive range of features and functionality to aid us in these tasks. You can improve your development workflow by getting to know how these tools work in every browser. Below are 20 tips, split into three categories (beginner, intermediate and advanced) to help you get started.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Latest in Web Browsers & Extensions
Arc web browser
This radical internet browser lets you remix any website
The Internet Explorer logo on a gravestone
Farewell, Internet Explorer
The Apple Safari logo on a gradient background.
This essential extension fixes Safari 15's biggest design flaw
Future of web browser
What's next for the web browser?
History of the web browser
The history of the web browser
CSS art
CSS art gets brilliantly ruined by old browsers
Latest in Features
Pete Gibbons headshot
"We’ve been making video for social since before social was a thing": a day in the life of Pete Gibbons
A group of people taking a selfie using the iPhone 16e.
7 reasons the iPhone 16e is a huge improvement on the iPhone SE 3
AI trends predictions 2025
How to use AI properly – 5 tips to help you get the most from the tech
How we made Ada; A digitally animated scene depicts two women in a grand, antique-style library, with one pointing.
How we made the "lush, handmade look" of animated series Ada
Cartoons of the 1950s - best animated movies of the 50s; A heartwarming animated scene depicts two canine characters sharing a meal of spaghetti and meatballs at a table outdoors.
Cartoons of the 1950s – the best animated movies from Lady and the Tramp to Animal Farm
Making Paddington in Peru's character animation; a small bear in a red had sat in a jungle
Paddington in Peru's animation works because of one small detail