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.
What is the DOM, you say?
What is Chrome DevTools?
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.
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.
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.
Viewing Messages and Running JS in the Console:
Introduction to the DOM
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a…