JavaScript Developer Tools: An extra note in Debug JavaScript (Step 7) for the changes to work without setting up a workspace

[frostBite1418]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

In the assignment Debug JavaScript, step 7 shows how pressing ctrl + s saves the JavaScript file with the edits you made in Google Chrome to reflect the changes dynamically. However, when you press ctrl + s, it doesn't really save the JS file. Turns out, you need to set up a workspace before making the edits

**Figure 1: Error in get-started.js file because *workspace* need to be set up**

A work around for this is to make a local folder in your laptop and adding it in the overrides panel. This way changes are saved in your laptop and edits are reflected in the website. The work around instruction are as follows (feel free to edit as needed):

What you can do here is the following:

1. Go to Sources
2. (Press ">>" to expand if Overrides is not visible and) click Overrides
3. Add an empty folder from your laptop by pressing on "Selecting folder for overrides" (any folder, doesn't matter where)
4. Above the folder, you'll see "Enable Local Overrides". Make sure it's checked
5. Go to Sources and Page and make the edits in the JavaScript File
6. Ctrl + S to save changes
7. (Crucial step): reload the page
8. Changes should now reflect in the website

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-javascript-developer-tools

(Optional) Discord Name

frostBite1194

(Optional) Additional Comments

No response

[ManonLef]

We could indeed add a small note to our lesson (since we can't edit the Chrome docs) about step 7 being a bit misleading but I think setting up workspaces is overkill at this point in the curriculum since we should focus on the debug steps which will be for code we run locally with for example live view.

[frostBite1418]

That's right. I also took consideration of the main focus of the lesson. The suggestion I made is actually a work around for workspace (no need setting it up!) so that it would work locally in their laptops

[ZackHoang]

I'll take this on!

[mao-sz]

Looks like at some point Chrome devtools no longer implements local saving but this tutorial contains stale info? Workspaces shouldn't be needed at all and IIRC the same "not actually saved to file system" warning would still come up, but the code would still save in that local version in the browser (i.e. until close/reload). But it seems that specific feature isn't working anymore.

The local overrides note is a possible temporary solution. You should still file a bug with Chrome (bottom of their page). A quick scan of their open issues and it doesn't look like this behaviour has been raised (with this tutorial or just in general).

I wonder if a better long-term solution would be to find an equivalent simple Chrome devtools debugging tutorial to replace it, as I'm wary of any assignment having a bunch of "by the way" notes attached.

[ZackHoang]

@mao-sz I'm wondering if this article from javascript.info will be suffice to replace the current official guide from Google. What do you think?