Lesson Weekend

In this section we'll use our browser's DevTools (developer tools) to practice new JavaScript concepts and tools, and to debug our JavaScript code. In the last course section, we learned how to use the Elements tab to explore our HTML and CSS. In this section, we'll explore the Console and Sources tabs. Our goal is to become very comfortable with using browser DevTools so that we can improve our development and debugging processes.

In this lesson, we'll cover some expectations for using browser DevTools while pairing and while coding on your own. Take note that all of our instructions are for the Google Chrome browser DevTools. While major web browsers offer very similar options and configurations for their developer tools, there may be slight differences that could be confusing. If you are not using the Google Chrome browser yet, we recommend downloading and installing it now.

Accessing DevTools


To access your browser's DevTools, start by finding the browser menu, an icon with 3 dots or lines in the top right-hand corner of your browser. If you are anything like me, it could say "update" next to the three dots/slashes, indicating that you have an update to install for your browser.

Once the menu is open:

  • Go to the More Tools menu.
  • Then, select Developer Tools.

Shortcuts for accessing the DevTools console are:

  • Windows:
    • Ctrl + Shift + j
    • Ctrl + Shift + i
  • Mac:
    • Cmd + Option + i
    • F12

Shortcuts for accessing the DevTools Elements inspector are:

  • Windows: Ctrl + Shift + c
  • Mac: Cmd + Shift + c

DevTools Inspector Versus Console

The DevTools inspector and console are different. Each lives on a separate tab in the DevTools window. The DevTools inspector is found in the Elements tab and helps us inspect HTML elements. This includes being able to look at an element's CSS rules and adjust them. You can optionally review the features of the elements tab in this lesson from the previous section.

The DevTools console is a JavaScript console that lets us write and execute JavaScript code. It is found in the Console tab of the DevTools window. This console is also used for logging errors and warning messages. We'll learn how to use the console in this section. As a preview, see the image below with the DevTools console open and a line of JavaScript (3 + 4;) written.

This image shows the DevTools console open with a line of JavaScript written (`3 + 4;`)

Tips for Using the Console


Configuration

You can configure the console's location, size, and colors! Review the instructions below, and optionally check out the Gif that summarizes these configuration options.

To set a dark or light theme:

  • Click the Settings cog at the top right corner of the DevTools window.
  • Go to the Preferences tab (this is usually the default location that settings opens to).
  • Under the Appearance section, look for Theme and set it to your preference. When you change a setting, the DevTools window will prompt you to reload.

To increase/decrease the size of the text:

  • For Windows: use crtl + shift + + to increase and crtl + shift + - to decrease text size.
  • For Mac: use cmd + shift + + to increase and cmd + shift + - to decrease text size.

To increase/decrease the size of the DevTools window:

  • Simply drag the side of the window in/out or up/down. The DevTools window acts the same as a browser window.

To move the location of the DevTools window:

  • Select the menu represented by three vertical dots in the top right corner of the window. This will be next to the settings cog. Once open, find the option for dock side and select the option that works best for you.

A gif that covers the above information in this order: set theme preferences, resize window, in/decrease text size, change DevTools location from right to left to bottom of browser

Formatting Code

When typing code into the console, we have some options to format what we write:

  • To create a new line, use shift + enter.
  • To tab over multiple spaces for indentation, use tab. To configure the console to use 2 spaces for indentation with tab, in the DevTools window, go to Settings > Preferences > scroll to the Sources section > set "Default indentation" to 2 spaces.

Autocompletion

This can be very helpful, but when you are just starting out with the DevTools console, it can be more confusing than helpful. Check out the following image. In the image, I've only typed out thi in the console. I haven't even completed what I've wanted to type, which is this, a JavaScript concept we'll learn about later in the course. However, autocomplete has already suggested an s to complete the word this and a host of other suggestions, as well as a possible answer (Window {0: ...}). Like I said earlier, this can be confusing when you are just starting out.

An image that shows the autocomplete suggestions after typing in "thi" into the console.

We'll be working with the autocomplete feature later in this section. If autocomplete is bugging you as you work through the upcoming lessons, you can turn autocomplete off by going to Settings > Preferences > Sources and unchecking the box for "Autocompletion".

Or, you can work with autocompletion turned on. Here's how to do that:

  • To accept an autocomplete suggestion, hit enter or tab
  • To navigate through the list of autocomplete suggestions, use your arrow keys or scroll with your mouse or trackpad.
  • To ignore or deny an autocomplete suggestion, complete what you are typing and use a space or punctuation, like ;, { } or ( ). We'll learn more about punctuation in JavaScript soon.

Clearing the Console

You can clear the contents of the DevTools console by clicking the icon of a circle with a slash at the top toolbar of the console. See the following image, where the icon is circled in red:

This image shows the button to clear the console circled in red. This clear-console button is an icon of a circle with a slash.

DevTools Documentation

Optionally, you can review documentation on browser DevTools, but generally everything you'll need will be covered in the lessons. To see the Chrome DevTools documentation, go to this link.

DevTools in Personal Practice and for Pairing Programming


Whether you are working alone or pairing with another student, always keep your DevTools console open when you are working through the lessons. You should do this throughout the remainder of the Intro to Programming and Intermediate JavaScript courses. Why? As you read through a lesson, you can use the console to simultaneously try out the JavaScript code you are being shown. The image below is an example of working through the upcoming lesson on JavaScript Arithmetic with the console open.

In this image, the lesson is prompting the student to practice some arithmetic, and the DevTools console is open and the student is doing just that!

General Tips for Pairing

When you are using the console to test out JavaScript, make sure to continue switch off who's driving and who's observing regularly. When trying out new JavaScript concepts, we suggest switching off more often than the 20 – 30 minutes we usually suggest. If there's a practice lesson with multiple JavaScript exercises, it's best to switch off between each exercise. Take this practice lesson for example:

This practice lesson is from the arithmetic exercises. It shows many different prompts for addition, subtraction, multiplication, etc. Find the exercises at this location: https://www.learnhowtoprogram.com/introduction-to-programming/javascript-and-web-browsers/practice-arithmetic

Here, it's best to switch who's driving and observing after each section (on addition, subtraction, multiplication, etc). Switching who's driving and observing should be an easy process to do, since everyone is engaging and on the same page.

Tips for Pairing Remotely

If you are pairing and using the DevTools while remote, we suggest that you screen share your browser window and increase the size of the text in the DevTools window so that your pair can read your console easily. The following picture is an example of this, where the browser window is full screen, and the DevTools console text has been increased so that it is easy to read:

This image shows a browser window that is full screen and opened to a LHTP lesson. The DevTools console is also open and the text size is increased so it is really easy to read.

We suggest that everyone in a pair or group have their browser window open to the relevant LearnHowToProgram.com (LHTP) lesson and their DevTools opened to the console tab. When it is time for you to observe, simply watch your pair's screen share on Discord. When it is time for you to drive, your pair(s) should watch your screen share on Discord while you type in your DevTools console.

You may find a better system that works for you as far as screen sharing the DevTools console. You could just screen share a window with the devTools, and not share the LHTP lesson. Whatever you do, make sure that your pairs can easily read your console, and remember to switch who's driving and observing regularly.

DevTools Are The Best Friends of JavaScript Developers


Our absolute best advice to you is to always work with your DevTools console open. Let's review why.

You can quickly try out JavaScript code.

Whether it's code that you are reading about in lessons or in online references, or code that you are writing in VS Code, the JavaScript console quickly allows you to try it out.

You can read the errors and warnings.

A lot of issues with your JavaScript code will show up as an error or warning in the DevTools console. We first learned about this when we learned about the DevTools console in Debugging HTML and CSS, and we'll revisit this at different points in this section. We'll cover common errors that pop up, and what they mean. There's also a lot that we won't cover. So, whenever you see something new in your JavaScript console, make sure that you:

  1. Read the error/warning. Even though most messages won't make sense to you at first, reading the message will help you practice common errors and terminology. When paired with solutions and the context of the issue, you'll quickly become better at debugging.
  2. Do a quick Google search to learn what the message means. If none of the search results make sense to you, that's okay — it's still good to practice writing search queries and reading about solutions to the error/warning you are facing.
  3. Reach out to your cohort and teacher on Discord for help. The more discussion, the better! And since everyone's working through the same material, it's likely that someone else has run into the same issue already. If you encounter a new error/warning and have found a fix for it, please share it with your cohort.
  4. Take notes. Note taking improves your processing and recall for the error/warning message, including what caused it and what solved it.

You will get to know your new best friend!

Part of becoming proficient with DevTools is using them. This includes actively watching other people use DevTools. It will take time to get a hang of it all, so be patient with yourself, and ask questions when you get stuck. Your questions could be about navigating or using the tools, or about understanding error messages that come up. Don't be shy in speaking up!

As you continue through this section, use this lesson as a reference on how to use the DevTools console. If you are having any issues, share your questions with your cohort and teacher.

Lesson 4 of 72
Last updated August 8, 2022