Skip to content

Commit 576135e

Browse files
kettanaitokettanaito
committed
04/04: add problem and solution texts
1 parent c459cb9 commit 576135e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+828
-4
lines changed

‎exercises/04.debugging/03.solution.breakpoints/src/main-menu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function MenuItemsList(props: { items: Array<MenuItem> }) {
3838
<ul className="ml-4">
3939
{props.items.map((item) => {
4040
const isActive = matchPath(
41-
{ path: item.url, end: false },
41+
{ path: item.url, end: true },
4242
location.pathname,
4343
)
4444

‎exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export function TicTacToe() {
88
<Button aria-label="top right" className="border-r-0 border-t-0" />
99
<Button aria-label="left middle" className="border-l-0" />
1010
<Button aria-label="middle" />
11-
<Button aria-label="bottom left" className="border-r-0" />
1211
<Button aria-label="right middle" className="border-b-0 border-l-0" />
12+
<Button aria-label="bottom left" className="border-r-0" />
1313
<Button aria-label="bottom middle" className="border-b-0" />
1414
<Button aria-label="bottom right" className="border-b-0 border-r-0" />
1515
</div>

‎exercises/04.debugging/04.problem.debug-console/.vscode/launch.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node-terminal",
6+
"name": "Run Vitest Browser",
7+
"request": "launch",
8+
"command": "npm test -- --inspect-brk --browser --no-file-parallelism",
9+
"env": {
10+
"DEBUG": "true"
11+
}
12+
},
13+
{
14+
"type": "chrome",
15+
"request": "attach",
16+
"name": "Attach to Vitest Browser",
17+
"port": 9229
18+
}
19+
],
20+
"compounds": [
21+
{
22+
"name": "Debug Vitest Browser",
23+
"configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
24+
"stopAll": true
25+
}
26+
]
27+
}

‎exercises/04.debugging/04.problem.debug-console/README.mdx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Debug console
2+
3+
Breakpoints allow you to stop your code's execution at any point in time. This is extremely handy to observe what's going on in your code or tests. But there's a way to get even more value out of them.
4+
5+
Sometimes simply looking at the state of your code may not be enough to understand the unexpected behavior. This is where being able to _evaluate_ things at a certain breakpoint can be a huge timesaver.
6+
7+
In this exercise, you will learn how to do just that, using the built-in "Debug console" in Visual Studio Code.
8+
9+
## Debug console
10+
11+
Debug console is a special kind of console that comes with modern IDEs. Its purpose is to give you an interface to access and run things during your debugging sessions.
12+
13+
Debug console behaves similarly to the browser's Console, giving you a sandbox to run expressions and see their result in real time. It's time you got your hands on it!
14+
15+
## Your task
16+
17+
👨‍💼 In this exercise, you will expand on the last debugging session (the one about `<MenuMenu />`) and actually verify that the `matchPath()` logic was to blame for the bug.
18+
19+
1. Start the tests in debug mode.
20+
1. Put the conditional breakpoint right where it was the last time—on the `return` line of rendering each menu item in the `<MenuItemList />` component.
21+
1. Once that's done and you have the test reach that breakpoint, open the "Debug console" (<kbd>Shift+Command+Y</kbd> in Visual Studio Code). _You can now interact with it!_.
22+
23+
> Debug console will open automatically when you start a new debugging session.
24+
25+
The console has access to all the variables at your breakpoint's scope. For example, try typing `item` and press Enter:
26+
27+
![A Visual Studio Code window with the debug console open. The value of the item variable is printed in the debug console to inspect.](/assets/04-04-debug-console-example.png)
28+
29+
That is the value of the `item` variable at this breakpoint!
30+
31+
> 🦉 The objects you log out in Debug console are **interactve**. Try expanding some of the `item` properties to see that for yourself.
32+
33+
With that in mind, run the `matchPath()` function in the Debug console with _exact values_, providing `/dashboard` as the path you want to check, leaving `location.pathname` reference as-is. Compare the printed result of matching the path with the `end: false` and `end: true` option set.

‎exercises/04.debugging/04.problem.debug-console/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>

‎exercises/04.debugging/04.problem.debug-console/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"type": "module",
3+
"name": "exercises_04.debugging_04.problem.debug-console",
4+
"scripts": {
5+
"dev": "vite",
6+
"test": "vitest"
7+
},
8+
"dependencies": {
9+
"react": "^19.0.0",
10+
"react-dom": "^19.0.0"
11+
},
12+
"devDependencies": {
13+
"@types/node": "^22.10.6",
14+
"@types/react": "^19.0.6",
15+
"@types/react-dom": "^19.0.3",
16+
"@vitejs/plugin-react": "^4.3.4",
17+
"@vitest/browser": "^3.0.4",
18+
"autoprefixer": "^10.4.20",
19+
"playwright": "^1.49.1",
20+
"postcss": "^8.4.49",
21+
"tailwindcss": "^3.4.17",
22+
"vite": "^6.0.7",
23+
"vitest": "^3.0.4"
24+
}
25+
}

‎exercises/04.debugging/04.problem.debug-console/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎exercises/04.debugging/04.problem.debug-console/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎exercises/04.debugging/04.problem.debug-console/src/app.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TicTacToe } from './tic-tac-toe.js'
2+
3+
export function App() {
4+
return <TicTacToe />
5+
}

‎exercises/04.debugging/04.problem.debug-console/src/index.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
2+
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
6+
7+
html {
8+
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9+
10+
font-family:
11+
'DM Sans',
12+
system-ui,
13+
-apple-system,
14+
BlinkMacSystemFont,
15+
'Segoe UI',
16+
Roboto,
17+
Oxygen,
18+
Ubuntu,
19+
Cantarell,
20+
'Open Sans',
21+
'Helvetica Neue',
22+
sans-serif;
23+
font-style: normal;
24+
font-optical-sizing: auto;
25+
}

0 commit comments

Comments
 (0)