Lesson Hero Illustration Image
Newline Image

Day 2

How to Open and Understand Developer Tools

Before we can begin, we need to get familiar with some essential tools. The first of which is the DevTools.

This post is part of the series 30 Days of Web Development.

In this series, we start from the basics and walk through everything you need to know to get started with Web Development.

Newline Image

How to Open and Understand Developer Tools
#

Before we can begin, we need to get familiar with some essential tools. The first of which is the DevTools.

Now that we know what Web Development is and why we want to learn more let's get set up with some essential tooling.

Developer Tools
#

Every modern browser comes with web developer tools (also called DevTools). These tools are used heavily by - you guessed it - Web Developers. The DevTools aim to help developers test and debug their code.

A good chunk of our future exercises will require that we use a web browser and DevTools. We will be using the Chrome web browser, and subsequently, the Chrome DevTools.

Exercise: Opening Chrome DevTools
#

  1. Navigate to any web page using the Chrome web browser.

There are several ways to open the DevTools, but I recommend using the keyboard shortcut method because it's the quickest and most convenient.

With a web page open, hold command + alt + j. Windows Users, use ctrl + shift + j.

Once you have the DevTools open, you should see the following window pop-up. Depending on your settings, the DevTools may show up at the bottom of the screen or on the right-hand side.

A couple of things to note:

  • By default, you will land on the Console panel. The Console is a panel in the DevTools where Chrome executes commands that you type there.
  • Everything inside the dark pink box is called a panel. To the left of the Console panel, for example, is the Elements panel.
  • The red errors I show on my Console panel may or may not show for you. Errors like this are for Web Developers and are sent to the Console panel from the web page you are on. For our purposes, we can ignore them.
  1. Let's navigate over to the Elements panel. Click on the Elements panel (just to the left of the Console panel).

The Elements panel shows the web page as "code." A good way to visualize what the Elements panel does is to think of the web page as a stitching. The Elements panel would then be the backside of the stitches; they're the same, one is just prettier. {#stitching}

  1. To help demonstrate how the DevTools can be useful, we are going to change the text of something on a web page. For this example, we are going to use the very first website ever created. Built-in 1991 by CERN, it’s rather incredible that this first website is still visible and usable today.

Open the first website in your Chrome browser by clicking on the link here.

  1. Open the DevTools and navigate to the Elements panel.

Under the Element’s section is the HTML of the web page. We will be playing with the heading Element.

Click on the <h1></h1> element. This is the element that makes the header of the web page read "World Wide Web".

We talk more about HTML, elements and tags in an upcoming article. For now, it's enough to know they represent the structure of the web page.

  1. Next, double-click on the World Wide Web text, and change the text from "World Wide Web" to "Your First Website." To see the change take effect, click outside of the Elements panel.

Now look at the web page and see that the text inside the <h1></h1> element has changed.

It's worth stopping for a moment to appreciate what you just did: you modified a web page! Nicely done.

Summary
#

A browser's developer tools do way more than allow you to make text changes. You can modify colors, layout, run code, and see details of how the web page is loading. Learning how to navigate and use the DevTools will be an essential skill that you will pick up on your way to becoming a Web Developer.

What's next?
#

Tomorrow we'll learn more about Operating Systems, and why understanding some of their key concepts will help you understand the foundations of Web Development.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Course Author

Avatar Image

Angel Garbarino

👋 Hi! I’m Angel, the author of the book.

I am a self-taught Frontend developer. Not until I was in my early thirties did I seriously consider building up skills as a web developer. In all honesty, I wasn’t even sure what it meant to work as a web developer. All I knew was, I wanted to work on computers because I was decent at using them, and I was attracted to the job opportunities.

I wrote this book for the “me,” five years ago; for the person who is starting to think about what it might take to become a programmer or web developer. My path was convoluted, stressful, and inefficient. But it did not have to be.

I started by reading articles and seeking advice from friends. I continued with more articles, books, and online courses. As my skills or ability to fake-my-skills improved, I sought out consulting gigs. Fixing friends’ websites, and then being hired out as a consultant. On the job learning is great, but I had no idea what I was doing and stressed and slept little during these contracts.

Eventually, I landed a position at a web application company. I made friends, asked questions, and studied the skills I learned were needed for a job as a Frontend Developer. The weekend studying paid off, I applied for a Frontend Developer position, and I got it!

In this book, I will cover the fundamentals. But more importantly, I will talk about why they are the fundamentals. My goal is not to teach you a specific skill like HTML. Instead, I show you how to navigate what’s ahead of you. I get you set up for your next steps, whether that’s a path of self-learning or attending a bootcamp. By the end of this book, you will be able to make an educated decision about your future and understand the steps and commitment it will take to get there.