Update 04-Debugging section #79

RRosio · 2025-10-30T05:55:21Z

🔍 Preview: https://jupytercon2025-developingextensions--79.org.readthedocs.build/
Note: This Pull Request preview is provided by ReadTheDocs. Our production website, however, is currently deployed with GitHub Pages.

mfisher87

Looking amazing! 🤩

mfisher87 · 2025-10-30T20:33:07Z

04-materials/04-debugging.md

-
 :::{tip} Outcome
 By the end of this module, you'll be able to debug JupyterLab extensions using
 multiple tools and techniques.


The way this is phrased, it seems to me more like a learning objective than an outcome. For outcomes, I think we should phrase in terms of actions participants will take. E.g. they will use multiple tools and techniques to fix bugs in a JupyterLab extension.

mfisher87 · 2025-10-30T20:34:38Z

04-materials/04-debugging.md

+
+Knowing the kind of error you are dealing with is already a solid step forward.
+
+- **Build-time errors vs Runtime errors**


What do you think of restructuring this to headers, e.g.?

#### By when they occur ... ##### Build-time errors Build-time errors happen when you're compiling your TypeScript code or building your extension. These are often syntax errors, type mismatches or missing/unused imports that don't allow you to run your code until they are fixed. Build-time errors appear in your terminal during `jlpm build`. ##### Runtime errors Runtime errors happened when your extension logic is executing, maybe a failed network request, or an undefined property that you've tried accessing. Runtime errors show up in the browser console or `jupyter lab` terminal logs after your extension is loaded. #### By where they occur With a full stack extension, which includes a server component, it is important to understand which side, server-side or client-side, is causing the error ##### Python server errors ... ##### JavaScript frontend errors ...

04-materials/04-debugging.md

mfisher87 · 2025-10-30T20:38:19Z

04-materials/04-debugging.md

+  When JavaScript throws an error, it gives you a stack trace, a trail showing the path the code took before it crashed. It may seem overwhelming at first, but starting from the top and looking for recognizable file names can help. While the stack trace might show you multiple function calls usually only one or two of those are in _your_ code. The others are likely in other libraries like JupyterLab itself. Finding your line in the code, you can find out where things have gone wrong.
+
+- Minified vs source-mapped traces
+  Also important, if you see names like `bundle.js:4323`, that's minified code. In development mode with source maps enabled, you'll see actual files names like `Panel.tsx:53`, a much more helpful identifier. Extensions created with the `extension-template` should have source maps enabled already.


I think we should define source maps (glossary?) the first time we use it.

04-materials/04-debugging.md

mfisher87 · 2025-10-30T20:48:39Z

04-materials/03-debugging.md

+- the HTTT status code (200 is OK/good, 404 means not found, and 500 means server error)
+  This can be especially useful when debugging issues where data you were expecting is not showing up, or getting an unexpected response from an API call, as getting a 200 response does not always mean you are getting the response you anticipated.
+
+### ⏸️ The Sources Tab: Let's Pause


Nice title 🤩

mfisher87 · 2025-10-30T20:49:23Z

04-materials/03-debugging.md

 - Keep development environment consistent
+  Is the extension installed and enabled? Did your latest changes build successfully?
+
+### 🛡️ Prevention is better


💯 💯 💯

04-materials/04-debugging.md

mfisher87 · 2025-10-30T20:55:05Z

04-materials/03-debugging.md

+        // BUG #2: Wrong method name - using 'as any' bypasses TypeScript checking
+        // This will cause a runtime "is not a function" error when clicked
+        // Should be load_image(), not refresh()
+        (widget as any).refresh();


Nice idea to show turning off typescript checks can make your life harder! Love this. A good lesson to "avoid any at any cost" ;)

Co-authored-by: Matt Fisher <[email protected]>

…ocab terms Co-authored-by: Matt Fisher <[email protected]>

RRosio · 2025-10-31T01:39:25Z

~~pre-commit.ci autofix~~

woops, I missed the merge conflict issue

RRosio · 2025-10-31T01:58:35Z

Thanks for your thorough review @mfisher87, I tried to address your comments as best as I could.. please feel free to let me know of any other changes you'd recommend!

mfisher87 · 2025-10-31T03:30:40Z

woops, I missed the merge conflict issue

Sorry about that, I should have waited a bit longer :X

mfisher87

This is looking really great! I'm not sure what to do about the broken term references offhand. I can try playing with it tomorrow. I think it'd be great to get this merged whenever you feel ready!

03-vocabulary.md

mfisher87 · 2025-10-31T03:34:38Z

04-materials/03-debugging.md

+|------------|---------------|-----------------|
+| **Build-time** | Terminal (`jlpm build`) | During compilation |
+| **Runtime (Frontend)** | Browser console | After extension loads |
+| **Runtime (Backend)** | `jupyter lab` terminal logs | After extension loads |


Love this matrix 🤩

04-materials/03-debugging.md

mfisher87 · 2025-10-31T03:40:29Z

04-materials/03-debugging.md

-
-### Elements/Inspector Tab
+
+   Sometimes, the best tool is {term}`print debugging <Print debugging>`, which is like a print statement for the browser console, using a simple `console.log()`. Walking through your changes and adding a logging statement to verify/inspect data, or ensure your code reaches certain logic can be quick and effective.


I'm not sure why this term reference isn't working. It looks right to me!

Thanks for catching this Matt! It turns out I added these terms after the closing ::: of the glossary block 😅

Ahhhh. That makese sense now :)

04-materials/03-debugging.md

Co-authored-by: Matt Fisher <[email protected]>

RRosio · 2025-10-31T04:05:56Z

With these final updates I think this is okay to merge! Thanks again for the reviews @mfisher87!

RRosio added 4 commits October 29, 2025 22:54

add conversational text to outline

e6d7707

add more formatting

1cab0f3

add debugging exercise instructions

1011655

fix markdown table rendering

c19cfe0

RRosio marked this pull request as ready for review October 30, 2025 19:46

RRosio requested review from jasongrout, ktaletsk and mfisher87 October 30, 2025 19:47

mfisher87 reviewed Oct 30, 2025

View reviewed changes

mfisher87 mentioned this pull request Oct 30, 2025

Update number of show and tell & debugging modules #80

Closed

RRosio and others added 11 commits October 30, 2025 16:53

Update 04-materials/04-debugging.md

53ee585

Co-authored-by: Matt Fisher <[email protected]>

Update 04-materials/04-debugging.md

1284568

Co-authored-by: Matt Fisher <[email protected]>

Update 04-materials/04-debugging.md

b4c6fef

Co-authored-by: Matt Fisher <[email protected]>

Update 04-materials/04-debugging.md

b17be71

Co-authored-by: Matt Fisher <[email protected]>

Update 04-materials/04-debugging.md

1d0aa87

Co-authored-by: Matt Fisher <[email protected]>

update outcome for debugging section

2ced6ce

update heading and layout for error types section, add examples

af58719

Co-authored-by: Matt Fisher <[email protected]>

add source maps term to vocabulary definitions list

d9b2088

adding print debugging to vocabulary list

808b3fc

Co-authored-by: Matt Fisher <[email protected]>

fix vocab term links, add linter, formatter, prettier and eslint to v…

4cd16d6

…ocab terms Co-authored-by: Matt Fisher <[email protected]>

add python debugging link

f7bd5f4

RRosio added 3 commits October 30, 2025 18:43

Merge remote-tracking branch 'origin' into debug-updates

c1a9238

formatting fixes

26eafd5

fix heading

3b11ba2

mfisher87 mentioned this pull request Oct 31, 2025

Switch numbers of debugging and show&tell modules #88

Merged

mfisher87 approved these changes Oct 31, 2025

View reviewed changes

Update 03-vocabulary.md

fc2ba75

Co-authored-by: Matt Fisher <[email protected]>

RRosio and others added 5 commits October 30, 2025 20:51

Update 04-materials/03-debugging.md

aac10df

Co-authored-by: Matt Fisher <[email protected]>

Update 04-materials/03-debugging.md

776efea

Co-authored-by: Matt Fisher <[email protected]>

Update 03-vocabulary.md

2d600b8

Co-authored-by: Matt Fisher <[email protected]>

fix glossary syntax to enclose all terms

b825259

remove bullet list syntax

67494fb

Co-authored-by: Matt Fisher <[email protected]>

RRosio merged commit ec6f011 into main Oct 31, 2025
2 checks passed

RRosio deleted the debug-updates branch October 31, 2025 04:06


		Knowing the kind of error you are dealing with is already a solid step forward.

		- Build-time errors vs Runtime errors


		### Elements/Inspector Tab

		Sometimes, the best tool is {term}`print debugging <Print debugging>`, which is like a print statement for the browser console, using a simple `console.log()`. Walking through your changes and adding a logging statement to verify/inspect data, or ensure your code reaches certain logic can be quick and effective.

Update 04-Debugging section #79

Update 04-Debugging section #79

Conversation

RRosio commented Oct 30, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mfisher87 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RRosio commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RRosio commented Oct 31, 2025

Uh oh!

mfisher87 commented Oct 31, 2025

Uh oh!

mfisher87 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

RRosio commented Oct 31, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

RRosio commented Oct 30, 2025 •

edited by github-actions bot

Loading

RRosio commented Oct 31, 2025 •

edited

Loading