The Basics Of Chrome DevTools
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!
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.
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.
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!
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!
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!
Helpful Resources:
