The Basics Of Chrome DevTools

Bryn Knowles
Nov 12, 2020 · 5 min read

A Brief Overview

As an emerging software engineer, any tool that makes programming life easier and more efficient is something I avidly seek out and try to learn immediately. When I was first introduced to Chrome DevTools, it was through the lens of being brand new to coding. Overwhelmed, I was daunted and unimpressed with DevTools, clumsily navigating my way through the features and trying to understand how to utilize them. I quickly became distracted by other shiny objects and soon forgot about it all together. Along my journey to become a software engineer it didn’t take long to realize the importance of DevTools.

About halfway through my program at Flatiron School, I began to learn JavaScript. “JavaScript runs on the client side of the web, which can be used to design / program how web pages behave on the occurrence of an event. JavaScript is a powerful scripting language, widely used for controlling web page behavior.” (https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript) Since JavaScript is essentially the behavior of a website, I was quickly introduced to the DOM in the beginning of my instruction of the language. JavaScript and the DOM go hand in hand.

What is the DOM, you say?

DOM stands for Document Object Model. A web page is a document, that can either be displayed in the browser, or as HTML source code in a program. The DOM is an object representation of that web page — a programming interface that enables a scripting language, such as JavaScript, to change the document structure, style and content of the web page. The DOM is an API that is essentially loaded in the browser, “representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).” It “allows code running in a browser to access and interact with every node in the document. Nodes can be created, moved and changed. Event listeners can be added to nodes and triggered on occurrence of a given event.”(https://developer.mozilla.org/en-US/docs/Glossary/DOM)

So, what does the DOM have to do with Chrome DevTools? Lo and behold, the main tool I would utilize to help write JavaScript code and interact with the DOM was Chrome DevTools!

“Hello, Again”

What is Chrome DevTools?

DevTools is a set of web developer tools that are built directly into the Google Chrome browser. DevTools allows you to view and change/manipulate the DOM, change a page’s styles (CSS) in a preview environment, and work with JavaScript by allowing you to debug, view messages and run JavaScript code in the console.

You can access DevTools in many different ways:

Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux) opens up directly into the DevTools console in the browser window.

Opening up the Chrome DevTools console with option + command + J

Another way of opening up DevTools is by left-clicking on an element on the page and choosing “inspect”. This allows you to inspect an element and its attributes on a page. In this view you will get immediate access to the page’s elements and styles. As you can see below, DevTools opens up and you are viewing the logo element and some of its CSS styling in the Elements and Styles panes.

a screen shot of opening Chrome DevTools by a left-click on an element
a screen shot of opening Chrome DevTools by a left-click on an element

Viewing and Changing a Page’s Content (HTML) and Styles (CSS):

If you want to do some CSS prototyping— select the element in the DOM Tree, and add declarations to that element in the Styles pane. You can change font properties such as color, size and family. You can change images, background colors, button colors, etc.

You can also edit your HTML. This can be done in 2 ways: in the console by selecting the element, or directly in the HTML pane of DevTools by double clicking the content you want to change.

As long as it’s an element on the page, its style and content can be changed in a preview mode. This does not permanently alter your page, and you will see that when clicking the refresh button for the browser, your web page goes back to its original state. No harm, no foul!

As you can see below, I’ve changed a web page by altering the colors and text content of certain elements.

You can use DevTools to change a page’s content and styles

Debugging JavaScript:

When you put a debugger into your JavaScript code, refresh the browser, and create an event, the debugger will pause your code and put you directly into the debugger console. This enables you to quickly locate problems, dig deeper into your code, debug and test out new code directly in the console of your web page. You can then use the new working code by copying and pasting it into your JavaScript file, removing your debugger and refreshing your browser. A pretty nifty trick!

View of debugger in action when using Chrome DevTools
Inspecting an object in a JavaScript function using Chrome DevTools

Viewing Messages and Running JS in the Console:

Chrome DevTools is very useful for running code directly in the console or sending messages to the console for testing purposes. Below, I’ve sent myself a message to see if a form submit button is working correctly. When refreshing the browser, if I click on the Create New Toy button, my message will appear in the console. This lets me know I’m able to listen for the click event, and write some JavaScript that updates the information on the page when the form is submitted. A very handy use for DevTools!

A DevTools example of viewing a message for an event listener in JavaScript

Conclusion:

As demonstrated, Chrome DevTools is a very useful tool for web app development. It allows you to work directly in the browser and see results in real time. You can use it to preview style changes, alter the HTML or help write your JavaScript code and do some debugging. There are so many more ways to use Chrome DevTools — far too many to list here. I don’t know about you, but I can’t wait to try them all out!

The Startup

Get smarter at building your thing. Join The Startup’s +788K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Bryn Knowles

Written by

Software Engineer // JavaScript | React Hooks | Ruby on Rails

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store