Skip to content

Do the Chrome Debugger Mini Workshop #63

@alizada-dev

Description

@alizada-dev

Link to the coursework

https://developer.chrome.com/docs/devtools/javascript/

Learning Objectives

  • Learn about the debugging tools built into Chrome

Why are we doing this?

Remember the toolkit we spoke about back in Structuring & Testing Data:

Specifications, like user stories, acceptance criteria, and Given/When/Then
Help us understand what to write and check we've written the right thing.

Tests, like unit tests and assertions
Help us break down our problems and check our solutions work even when we change things.

Asking questions
Help us formally reason through our problems and identify gaps in our mental models.

Playing computer
Helps us reason about code with a mental model.

Audits, like Lighthouse
Help us identify performance and quality improvements we can make to our code.

In that task we introduced the VSCode debugger and saw how we can include it in our workflow. Now we're going to look at the debugger inside Chrome.

As a reminder, some of the key reasons we use debuggers are:

  • See what's happening inside functions
  • Check if variables have expected values
  • Pause execution and step through slowly
  • Find exactly where mistakes happen

Complete this tutorial (it's a 7 minute video plus tasks) to explore the Chrome Debugger.

Maximum time in hours

.5

How to get help

AI can help you here. Code along with AI so it has the context and ask it when you get stuck. Use this starting prompt:

Act as a friendly, supportive, knowledgeable programming mentor. I am learning the debugger in Chrome Devtools. I'm doing this tutorial https://developer.chrome.com/docs/devtools/javascript/

Talk me through the tutorial step by step. Wait for me to confirm I've completed the step before going on to the next step. When I get stuck, answer my questions in CEFR B2 English meant for an adult professional speaking in a second language. Do not rephrase the tutorial text, just explain it when I ask you. Say okee dokee if you understand, and begin with step 1. 

Submission & Review

There is nothing to submit for this exercise.

Metadata

Metadata

Assignees

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions