Do the Chrome Debugger Mini Workshop

Open
#2 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
55/100
Issue type
Documentation
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript
Domain
documentation

Research direction

Start with the linked Chrome DevTools JavaScript tutorial and follow its seven-minute video and tasks. Complete the debugging exercises, including learning about Chrome’s built-in debugging tools; there is no submission or repository file to update.

Written by the indexing model from the issue text.

Description

🏕 Priority Mandatory 📅 Sprint 3 Core Module-Data-Groups Submit:None 🦔 Size Tiny
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.

Dominant language
JavaScript
Stars
1
Forks
327
Avg merge
3h 25m
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeYourFuture/Module-Data-Groups

All issues in CodeYourFuture/Module-Data-Groups

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.