Dive Into Dev Tools

Any modern browser you use to access the internet has something called “Developer Tools,” “The Developer Console,” or something similar. Collectively, these are commonly referred to as Dev Tools. Almost every web developer will leverage them, but what are they? In this article, we’ll give a brief overview of Dev Tools and their functionality. In future articles, we will go more in-depth on some of the different components.

Note: For the purposes of this article, we will be using the Dev Tools in Google Chrome. If you are using a different browser, your Dev Tools may look slightly different.

What are Dev Tools?

Dev Tools are designed to help developers test, debug, and build upon the code that makes web pages work. With them, developers can try out visual adjustments without having to edit and upload files repeatedly, monitor the information the web page is sending out, test how different inputs impact the code running on the web page, and more. Even if you’re not a developer, the dev tools can provide information that can be used by support technicians if you ever have to report an issue with a web page, so familiarizing yourself with them can help solve problems faster and improve communication. Each of the sections below will focus on one of the tabs you see in the Dev Tools and briefly explain what it does.

Elements

Screenshot of the developer tools as they appear in Google Chrome. The current web page is Google.com. A row of tabs goes across the top of the window. The "Elements" tab is currently selected. The html for the webpage is displayed in the major section of the developer tools. A column on the right displays various sections of the web page and their styles.
The ‘Elements’ tab of Google Chrome’s Developer Tools

The “Elements” tab of the Dev Tools is primarily used for exploring and testing edits to the HTML and CSS of a web page. These determine how a web page will look to a user. By using this tab, web developers can test different layouts, colour schemes, and other visual elements without having to edit code, upload the changes, refresh the web site, and navigate to the specific portion of the web page in question. This saves a lot of time and effort in design and testing.

Console

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the "Console" tab. A yellow bar alerts the user there is an error being reported from the web page. There is also a code snippet that shows a display for the phrase "Hello, World!".
The ‘Console’ Tab of Chrome’s Developer Tools

The “Console” tab is a frequent resource for getting information about what is happening on the client-side of a web page. It will display notices about information, errors, and warnings encountered while running the web page. Developers can also use it to test scripts. This can be helpful when debugging code or quickly trying to verify a snippet has valid syntax. You can even use some of the elements of the web page as variables for testing code. This is common for verifying simple functionality, like making sure the web page knows when you click a button. Make sure you understand any code you enter into the console, as executing code obtained from a non trusted source could lead to security problems.

Sources

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Sources'; tab.
The “Sources” tab of Chrome’s Developer Tools

The “Sources” tab displays all of the files that are used to render the web page client-side. For just about every website that exists, this is generated on a server based on variables you’ve provided – such as when you share your location data to find the nearest restaurant for your favorite chain. The server then generates the files needed to display the custom version of the website with the information for you, and uses the internet to send those files to your computer. Your computer then reads those files to show you the webpage you see now. If you want to see those files, you would check out the sources tab. (Note that many websites will abstract a lot of the functions that perform core functionality.) Web developers would use this tab to make sure all the appropriate files are loaded in, add break points to stop and check information partway through a process, or view how variables in the code change as they move through various functions.

Network

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Network' tab. A table is displayed in the tab. On the left is a list of various network calls. The next column displays their status. Then the type of call, initiator, size, and time for response (in milliseconds). The final column is called "Waterfall" and is used as a visual indicator of the speed in which calls are generated and received.
The “Network” tab of Chrome’s Developer Tools

The “Network” tab lets you monitor the information a web page is sending and receiving from a server. It is where I spend most of my time when I’m troubleshooting as a web developer. The information can be something as simple as getting fonts and images to style a web page and fill out its content. It can also be more complex, like the geographic area you’d like to generate a drive-time analysis for, the radius for the analysis, projection you are working with, and units you’d like the results displayed in.

Security

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Security' tab. This tab displays whether the web page is secure or not -based on if it has a valid HTTPS certificate. It also verifies the connection security and makes sure any additional resources the web page uses are secure.
The “Security” tab of Chrome’s Developer Tools

The “Security” tab presents basic information about how the web page you are looking at is verified. If you are ever curious, you can check out a web page’s security certificate – the thing that makes it “HTTPS” instead of “HTTP” – there. If the website relies on additional resources (and many do), you can also check that security information. The Security tab doesn’t come up often, but you are certainly glad it’s there when you do need it.

Performance

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Performance' tab. This tab allows you to capture the performance and resource usage of the web page you are on.
The “Performance” tab of Chrome’s Developer Tools

The “Performance” tab presents information on the resources being used by the web page. To start recording a performance snapshot, you can either press the ‘record’ button at the top left of the page, or press the ‘start profiling and reload page’ directly to the right. The first option can be useful when you want to analyze the performance of something triggered by user action, and the second is useful to analyze start-up performance of the web page. The Performance tab can be very useful when optimizing resource usage during development.

Memory

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Memory' tab. This tab allows you to capture the memory usage of the web page you are on.
The “Memory” tab of Chrome’s Developer Tools

Similar in use to the “Performance” tab, the “Memory” tab allows you to take a snapshot of the current memory usage of a web page. To do so, press the take heap snapshot button at the top left of the page. By taking multiple snapshots over time, a developer can track down memory leaks and bloat, which could cause the web page to slow down or even crash.

Application

Screenshot of the developer tools. The current web page is Google.com. The row of tabs at the top of the window show the current display is the 'Application' tab. This tab allows you to debug progressive web apps and view and edit local and session storage as well as cookies.
The “Application” tab of Chrome’s Developer Tools

Next up is the “Application” tab. This tab lets you more easily debug progressive web apps, and also allows you to view and edit local storage, session storage, and browser cookies. This tab contains advanced tools that can be useful for experienced developers, and will be expanded on in a future article as we dive deeper into the dev tools.

In Summary

This has been a brief overview of the most used tabs in the developer tools. These tools can greatly improve your coding experience, and help you create better web applications. They can also be useful when working out an issue with support technicians. We will be diving deeper into the uses of each tab in future articles, so stay tuned if you are interested in hearing more!

Future Reading

Want more from GEO Jobe? Check out these other recent articles:

Photo of Courtney Menikheim. They are about 5 foot 7, have hair cropped close to their head, except for the top, which hangs over by their jawline. They are smiling at the camera. They wear glasses.

Chief Support Officer

Courtney started at GEO Jobe as an intern. Through dedication and hard work, they have worked their way through the company and now serve as our Chief Support Officer. When they aren't helping design and build software, Courtney enjoys playing board games, spending time with their dogs, and gardening.