Beginner’s Introduction to DevTools: How to Design Webpages Like a Pro

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.

DevTools allows you to do this by giving access to the code of a displayed webpage. It looks like a hierarchical outline of HTML, CSS, and JavaScript code that makes up a webpage. This hierarchy is also known as the DOM tree, or Document Object Model tree. It represents the webpage code as a structured tree-like model.

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.

The changes are previewed in a browser without impacting the original HTML, CSS, and JavaScript code. This allows developers to fine-tune webpage design and functionality without having to rewrite code until the changes are just right.

You can monitor how the webpage loads in DevTools

Browsers are like ultra-speedy postmen that run between your PC and the servers that host websites. Every time you interact with a webpage, such as clicking a link or submitting a form, the postman brings your request to the server and then comes back with updated information on this webpage. This way, browsers retrieve HTML, CSS, and JavaScript files, images, videos, and other data required to display a page.

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:

• Firefox
• Chrome
• Opera
• Safari.

All these resources provide comprehensive guides, references, and tutorials on how to use Developer Tools. But, remember: this instrument is mostly designed for those having at least a basic understanding of HTML, CSS, and JavaScript.

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:

• Inspect website code (HTML, CSS, and JavaScript)
• 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 TripleTen’s Software Engineering Bootcamp. It’s a one-stop program for those planning to change their careers and start working in IT. Thanks to TripleTen’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!