Imagine that you are modeling a house in specialized software. Since it’s a virtual environment, you can change any room’s size, shape, or color in a few clicks. The software also prevents you from making construction mistakes by highlighting the parts of your model that won’t work in a real-world building.
There is a similar software instrument in web development — DevTools, also known as Developer Tools. It is used for inspecting and debugging webpages in real time. Knowing how to use DevTools is important for front-end developers, web designers, and anyone working with websites.
How to open DevTools in your browser
To access DevTools, you need to open any website in your web browser. Right-click on any object on the screen (Ctrl + click on macOS) and select the “Inspect element” option from the menu.
You can also press the hotkeys on your keyboard. The combination depends on your operating system:
- macOS — ⌘ + ⌥ + I
- Windows — F12
- Linux — Ctrl + Alt + I
Alternatively, DevTools can be accessed from your browser menu:
- Firefox: Tools → Web Developer → Toggle Tools
- Chrome: More tools → Developer tools
- Opera: Developer → Developer tools
- Safari: Develop → Show Web Inspector.
If there’s no Develop menu in your Safari browser, you can find it by going to Safari → Preferences → Advanced and selecting the checkbox for the “Show Develop” menu.
Here’s what Developer Tools looks like in different browsers:
DevTools allows you to see how any webpage is structured
If you work as a web developer, sometimes you might feel curious about what goes on behind the scenes of a website. It’s almost like taking a peek under the hood of a car to understand how it works.
The DOM tree allows web developers to visualize the structure of a webpage. And with DevTools, they can quickly navigate and inspect individual webpage elements and their associated code.
With DevTools, you can edit webpages in real-time
Remember we talked about the software that one could use to make changes to models of buildings? In the same way, one can edit webpage codes using DevTools.
You can monitor how the webpage loads in DevTools
This continuous flow of requests is called network traffic. Web developers can monitor it in DevTools by accessing the “Network” tab. This helps them optimize page loading speed by identifying and fixing any issues such as slow-loading resources or errors in requests.
The “Network” tab displays all the requests your browser is currently making to website servers. They are listed in rows that include information like the request completion time, URL, and size of data that your browser sent or received. Using “Network”, you can see how fast the webpage is loading, which requests take the longest, and how big the files are. It also shows if any requests failed or if there are any errors.
DevTools highlights coding mistakes
If you were designing a house, it would have been nice to see immediate notifications such as: “This piping configuration can cause constant clogging!”, right? It’s the same with websites. Thankfully, DevTools can do just that.
It alerts developers to potential errors and issues with the code of a webpage. As such, it shows error messages and warnings in the console tab whenever it identifies a bug. This enables developers to catch coding mistakes before they pose a significant problem for website visitors.
You can simulate a phone screen to ensure everything is functional there
Have you ever noticed that some websites look broken when you visit them on your smartphone? The reason behind this is the web developers’ failure to optimize them for mobile.
You can use DevTools to simulate a mobile device on your desktop browser without actually having to use a physical tablet or smartphone. This way, developers can test how a webpage works on different screen sizes.
To use this feature, open DevTools and toggle the responsive mode. Here’s how you can do this in different browsers:
- Chrome: click Toggle Device Toolbar or press Ctrl + Shift + M.
- Firefox: click Responsive Design Mode or press Ctrl + Shift + M.
- Safari: click Enter Responsive Design Mode or press ⌘ + ⌥ + R.
- Opera does not provide a built-in mobile emulator in Developer Tools.
This will enable you to change the size of the box where your website is displayed. This is how mobile screens are emulated. You can adjust the dimensions manually or choose the device from the drop-down list.
Useful resources for working with DevTools
If you want to master DevTools, you can start with the official documentation for different browsers:
DevTools is invaluable for web development
To sum up, DevTools, short for Developer Tools, is a built-in set of tools in web browsers. It’s like a toolbox for web developers that helps them to:
- Modify designs and styles in preview
- Find and fix coding errors in real time
- Test website performance and optimize it
- Check how a website appears on different devices.
DevTools makes developing websites more efficient and improves the final product.
If you are interested in web development, but don’t know where to begin, consider joining Practicum’s Software Engineering Bootcamp. It’s a one-stop program for those planning to change their careers and start working in IT. Thanks to Practicum’s interactive platform, the learning process feels more engaging. And you get access to bootcamp mentors, who are always on hand to offer additional guidance. So, give it a shot and start your awesome journey toward a new career today!