.webp)
(1).webp)
According to the Google Chrome Developers’ website, DevTools are “a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.”
In this article, we’ll go over the core features of Chrome DevTools, focusing primarily on CSS prototyping, making quick edits to adjust element styling and positioning, and test-running and debugging JavaScript.
There are several ways to open DevTools, and each way gives quick access to different parts of the DevTools UI.
Upon opening DevTools, you will see the following tabs (as displayed in the image above) at the top right:
So, what can you do in DevTools, anyway? These tools enable you to quickly edit web pages, diagnose problems, and build better websites. We will cover the core uses of DevTools related to inspecting and debugging in the Sources, Elements, Console panels. We’ll also briefly touch on the other panels, such as Network, Application, and Performance. For an in-depth analysis, please visit the complete DevTools documentation here.
Under the Sources panel, you will find Pages and Filesystem at the top and Breakpoints at the bottom. Clicking Pages will show you which file you’re currently inspecting. Clicking Filesystem will allow you to directly connect your file from your code editor to DevTools via the “Add folder to workspace” button.
This is especially useful if you want to quickly adjust the styling of your project, as it means the changes made on the DevTools editor will also be saved to the source file. While this approach is less common, it makes sense if you’re certain about which changes you want to implement.
If you want to quickly test how any changes to the CSS look without carrying the risk of having those changes saved in the source code, then you won’t have to worry — by default, DevTools doesn’t save changes at the source code level unless it’s connected to the file’s workspace.
DevTools will open on the Elements tab by default when you inspect an element, which allows you to hover and select an element of your choice.
Simply select an inspected element in the DOM (Document Object Model) Tree to do quick CSS prototyping. All you have to do is add declarations to that element in the Styles pane, or you could opt to change its properties like color or font-weight. You can even adjust images, buttons, positioning, spacing, etc. If you’re making a design from scratch, you can inspect an element and input the styles on the debugger/inspector before applying them in your source code.
You can also decide whether or not you wish to edit the HTML. There are two ways to do this — selecting the element or going to the HTML panel of DevTools by double-clicking the content you want to edit.
As long as it’s an element on the page, you can edit the style and content without the risk of affecting the source code. What does this mean? Any changes made to your page will revert to its original state after a page refresh. This is super handy if you simply want to run quick tests to see how your CSS turns out.
Use the Computed tab to see which classes are applied for the entirety of your code. There is a caveat, though. Say you want to test that your CSS is being used. It’s possible that Your CSS may be used but not reflected in the Computed tab because it’s being overridden. The Computed tab only shows the final styles being applied — so if final styles are your concern, this is the place to go. The best use case is to check if the classes you are planning to use are being overridden.
Make sure to constantly apply the input-output principle to check. If you input something and you expect it to appear, then the Computed tab will show what class is overriding the expected class. The box in the Computed tab can be useful for visualizing potential sizing issues. As you hover over each box, you’ll know what’s causing your sizing issue — if it’s margin, border, padding, or the actual size (since this will be reflected).
Go to the Styles tab to see whether a class is being applied to a certain element, as well as the order in which all styles are being applied.
Basically, you can execute any JS in the console. And when you type in a variable, you can see its properties.
Put a lot of console.log lines in your code if you want to constantly know the status of your code.
You can simply open the Inspect tab and look at the Console tab to debug. All you have to do is put a debugger into your JavaScript code and give the browser a refresh. Then, create an event, and the debugger will pause your code and redirect you into the debugger console. This makes it easy to spot issues quickly, dive deeper into your code, and test and debug the new code in the web page’s console. From here, you can use the working code by simply copying and pasting it right into your JS file.
Breakpoints, in layman’s terms, are responsible for stopping the execution of your code. After clicking on Sources, find the code that you want to test. You will need to pinpoint the exact part you intend to test so that you can apply your breakpoints properly. When you’ve identified the code block, look at the number to the left and click on it. It will highlight and turn blue, and to the lower left box, you will see it added under the Breakpoints accordion.
Go to the Pages tab and this is where you will see which HTML file for the webpage you're currently inspecting. From here, you can now select where to add any breakpoints for testing.
You can also change values dynamically here. If you want to isolate code or processes, then you can substitute a value for the input and test the output to see if it behaves the way you were anticipating to see what's expected. You can actually double-click the value and change it to the variable that you want to use. This could hypothetically allow you to check if the variable has regex characters, null values, or numbers.
If you’re doing the replacement, then you need to resume the operation. But, if you’re just inspecting the value of a given variable and notice that it doesn’t match the expected output, then you don’t have to wait for the operation to resume. You can simply proceed with changing your code.
In case you have multiple parts of your code that you want to test, you can highlight different line numbers, and the code will pause at each of these breakpoints.
Go to the Network tab to see if all your requests are being handled properly. By default, you should have status 200. If you don’t, that means something is wrong.
The Application tab is used to test local storage. If you have any web SQL, session storage, or cookies, then go to the application. Apply the input-output testing principle. This is the default mindset you should have when debugging.
Performance records all the operations running. From here, you can see which operations are taking long and need optimization.
As you can see, the debugger/inspector in DevTools is an extremely useful and versatile tool for web development. It gives easy access to let you work right in the browser, with edits reflecting instantly. It also allows you to conveniently preview style changes or even make them directly in your source code. On top of this, DevTools enables you to adjust your HTML and run any JavaScript code to do tests or even debug.
While we only tackled the core concepts today, Chrome DevTools can do so much more. Without a doubt, mastering Chrome DevTools will go a long way to boosting your productivity as a programmer. I hope this article helped provide insight into just how useful DevTools can be.
Nikolas Escobal is constantly striving to become his best self. Passionate about learning, music, and building meaningful tech, he is also a sushi and ramen lover.
Career advice, the latest coding trends and languages, and insights on how to land a remote job in tech, straight to your inbox.
