This is not a simulation. In the Danger Room, the world resets on refresh — that was the point. Here, it doesn’t. Everything in this guide saves modified copies of files to your computer. Chrome loads your version instead of the original. No one else sees your changes. But they stay. Every refresh. Every time. Understand that before you proceed.
Prerequisites: Complete the Danger Room Guidelines first — specifically the HTML and JavaScript sessions. You will need to navigate the Sources panel with confidence, and you’ll want a working mental model of how the Elements panel and Console relate to each other before working with persistent overrides.
Before Chrome can save any overrides, it needs a folder on your computer to store them in. You only do this once. The same folder works for every website and every future session.
Creating Your Overrides Folder
The best locations are Documents or a folder inside your user home directory. Avoid the Desktop (it gets cluttered) and avoid cloud-synced folders like OneDrive or iCloud — permission conflicts can prevent Chrome from saving files reliably.
- Open File Explorer
- Navigate to your Documents folder
- Right-click in empty space → New → Folder
- Name it
DevTools-Overrides - Press Enter to confirm
Path: C:\Users\YourName\Documents\DevTools-Overrides
- Open Finder
- Navigate to your Documents folder
- File menu → New Folder (or ⌘+Shift+N)
- Name it
DevTools-Overrides - Press Return to confirm
Path: /Users/YourName/Documents/DevTools-Overrides
DevTools-Overrides folder inside Documents
What it should look like after step 2 — an empty folder named exactly DevTools-Overrides
You’ll need to navigate to this folder in the next section when Chrome asks you to select it. If you forget where it is: Windows — look in the address bar of File Explorer. Mac — right-click the folder → Get Info.
Open the folder and confirm you can see inside it. Chrome will create subfolders matching the websites you override — but it needs to be able to write to the location. If you get a permission error later, this is where to start troubleshooting.
This folder is permanent infrastructure for all your override work. You do not need to create a new folder for each project or each website. Everything goes into this one folder, organized automatically by Chrome into per-domain subfolders.
- One folder, all sites: Chrome automatically organizes overrides into subfolders like
localhost,www.technovicetools.cominside your DevTools-Overrides folder. You never need to sort them manually. - After your first override: open the DevTools-Overrides folder in File Explorer/Finder to see exactly what Chrome saved. The folder structure mirrors the site’s URL path.
- VS Code integration: open the DevTools-Overrides folder in VS Code as a workspace. You can edit saved override files directly in VS Code — Chrome will use your edits on the next page refresh.
- Backup strategy: if you build something valuable using overrides, copy the files out of DevTools-Overrides into your own project folder. That’s the start of a real project.
OneDrive, iCloud, Google Drive, and Dropbox sync folders can cause Chrome to throw permission errors when trying to save override files. Use a plain local folder instead.
If Chrome tries to save an override and the folder is gone, it will throw an error and stop saving. Disable Local Overrides first (uncheck the checkbox), then delete if needed.
Chrome’s folder picker does not create folders — it only selects existing ones. Make sure the DevTools-Overrides folder exists on disk before you open the picker in the next section.
Local Overrides works inside the Sources panel — the tab next to Elements and Console.
The Sources panel is where Chrome exposes the actual files a page loads: JavaScript, CSS, and HTML.
With Local Overrides active, any file you edit and save here gets stored in your
DevTools-Overrides folder and loaded in place of the original on every subsequent refresh.
Press F12 or Ctrl+Shift+I (Windows) / ⌘+Option+I (Mac). Click the Sources tab at the top of DevTools. This is a different panel from Elements — it shows code, not the visual HTML tree.
The Sources panel has a left sidebar with several tabs: Page, Overrides, Content scripts, Snippets. Click Overrides. If you don’t see it, click the » arrows to reveal hidden tabs.
A button with a + icon appears in the Overrides sidebar. Click it. Your operating system’s standard folder-picker dialog opens.
In the folder picker, navigate to Documents (or wherever you created the folder), click DevTools-Overrides to select it, then click Select Folder (Windows) or Open (Mac). Do not double-click to open it — single-click to select it, then click the button.
A bar appears at the top of the browser viewport: “DevTools requests full access to [folder name]”. Click Allow. If you miss this bar and it disappears, repeat steps 3–4 — the permission request reappears each time you select the folder.
In the Overrides sidebar, confirm you see a checked checkbox: ☑ Enable Local Overrides and the path to your folder below it. If the checkbox is unchecked, click it. Overrides do nothing when disabled.
After step 6 — the Overrides tab should show your folder path and a checked checkbox
Click Page (not Overrides) in the left sidebar. This shows the file tree of everything the current page has loaded — HTML, JavaScript files, CSS files, images.
You’ll see a folder named after the site’s domain (e.g., localhost or technovicetools.com). Expand it by clicking the triangle. Inside are all the files the page loaded. Find the JavaScript or CSS file you want to modify and click it to open it in the editor on the right.
Tip: Use Ctrl+P in the Sources panel to open a quick file finder — type part of a filename to jump directly to it.
Click inside the code and make your changes. The Sources editor works like a simple text editor with syntax highlighting. Use Ctrl+F to search within the file. Use Ctrl+G to jump to a specific line number. Changes are not applied until you save.
Press Ctrl+S (Windows) or ⌘+S (Mac). Two things happen: the file is saved to your DevTools-Overrides folder, and the change takes effect in the running page immediately (no refresh needed for most JS/CSS edits).
After saving, a small purple/violet dot appears next to the filename in the Sources file tree. This dot means “this file has an active override.” If you don’t see the dot, the override was not saved — check that the folder is selected and the checkbox is checked (Part A, step 6).
The purple dot is your confirmation — this file now loads from your overrides folder instead of the server
Press F5 or Ctrl+R. Unlike anything in the Danger Room, your modification is still there. The browser loaded your saved override file instead of the original from the server (or disk).
It still works. Local Overrides are stored on your machine and stay active as long as the “Enable Local Overrides” checkbox remains checked. They survive browser restarts, tab closes, and new sessions.
Open the DevTools-Overrides folder in File Explorer or Finder. Inside, Chrome will have created subfolders matching the site’s domain and file path. The override file is a complete copy of the original with your edits applied on top — it is a real file you can open in VS Code.
localhost) and the overridden file inside it
After your first override, this is what your DevTools-Overrides folder will contain
Key Interface Areas
The Sources panel shows all files the page loaded — JavaScript, CSS, the HTML document itself. It also contains the Overrides, Snippets, and Page sidebar tabs.
Where you connect your folder and toggle overrides on or off. The “Enable Local Overrides” checkbox is here. Uncheck it to temporarily revert to originals without deleting anything.
Shows the file tree of everything the current page loaded. Navigate here to find the specific JavaScript or CSS file you want to override. Different from Overrides tab.
Full source editor with line numbers and syntax highlighting. Supports Ctrl+F (search), Ctrl+G (go to line), and standard text editing. Press Ctrl+S to save — saving to disk is not automatic.
A small violet/purple circle next to a filename in the Page tree means that file has an active override. Your saved version in DevTools-Overrides is what the browser loads. No dot = no override = original file.
- Ctrl+P in Sources: opens a quick file picker. Type the filename to jump to it instantly — much faster than expanding folders.
- CSS overrides too: the same workflow applies to CSS files. Find the stylesheet in the Page tree, edit it, save it. Every reload uses your CSS.
- VS Code ↔ Chrome loop: open the override file in VS Code, edit it, save from VS Code, then refresh Chrome. Both editors read the same file.
- CDN files can’t be overridden: files loaded from
cdn.jsdelivr.net,cdnjs.cloudflare.com, or other external domains are not shown in the Page tree — only same-domain files are overridable. - Hard refresh: if your override isn’t showing, try Ctrl+Shift+R (hard refresh, bypasses browser cache).
The Overrides tab is for setup (connecting the folder). The Page tab is for finding files to edit. Beginners often look for files in the wrong tab. Setup = Overrides. File editing = Page.
Edits in the Sources editor are not saved automatically. If you close DevTools or refresh before pressing Ctrl+S, your changes are lost. The purple dot appearing confirms the save was successful.
The page may be caching the original file. Try a hard refresh: Ctrl+Shift+R. If that doesn’t work, check that the purple dot is present on the correct file.
An override for localhost does not affect technovicetools.com. Chrome keeps separate override sets per domain. You cannot override a file on one domain using another domain’s folder.
Local Overrides Training Missions
disk-demo.js in the file tree. Do not edit it yet — just find it.disk-demo.js in the Sources editor. Find the line let diskColor = '#ff6b6b';. Change the hex color to any color of your choice. Press Ctrl+S. Confirm the purple dot appears. Refresh the page. Is your color still there?disk-demo.js to permanently add the pulsing sin wave effect. Add the variables at the top and rewrite the draw() function using the code from the Danger Room JavaScript session. Save, refresh three times — the pulse should survive every refresh. Then find the saved file in your DevTools-Overrides folder and open it in VS Code.Snippets are the lighter-weight persistent option. They’re small JavaScript programs stored inside Chrome’s DevTools. You run them manually with one click — they don’t auto-apply on reload. No folder setup required. No permission grant. They live inside Chrome until you delete them, surviving tab closes and browser restarts.
Quick Start
In the Sources panel left sidebar, click Snippets. If you don’t see it, click the » arrows. The Snippets tab shows a list of any snippets you’ve already created (empty on first use).
A text field appears at the top of the snippet list. Type a name with no spaces (e.g., PulseEffect, RainbowDisk, FreezeAnimation). Press Enter to confirm the name. The name appears in the list and the editor opens on the right.
The editor on the right is where your snippet lives. Paste any JavaScript you want to save. The snippet is saved automatically as you type — no Ctrl+S needed. Close DevTools and come back tomorrow; the snippet is still there.
To run a snippet: right-click its name in the list and choose Run. Or, with the snippet editor open, press Ctrl+Enter. The snippet executes in the context of the current page — exactly as if you had pasted the code into the Console and pressed Enter.
A saved snippet — right-click its name to run it on any page
When to Use Which
| Feature | Snippets | Local Overrides |
|---|---|---|
| Folder setup required | ✗ No folder needed | ✓ Folder + permission |
| Runs automatically on reload | ✗ Manual — you click Run | ✓ Every page load |
| Survives tab close | ✓ Yes (stored in Chrome) | ✓ Yes (stored on disk) |
| Works on any page | ✓ Yes — run it anywhere | ✗ Per domain, per file |
| You can edit the saved file in VS Code | ✗ Stored in Chrome only | ✓ Plain file on disk |
| Best for | Reusable console commands, experiments you run on demand | Permanent changes to a specific page or app |
In practice: use Snippets to develop and test code, then move proven code into a Local Override when you want it to stick automatically.
Key Interface Areas
All saved snippets appear here as a list. Click any snippet name to open it in the editor. Right-click for the context menu (Run, Rename, Remove).
A small “Run snippet” button appears at the bottom-right of the editor when a snippet is open. Click it, or press Ctrl+Enter. Output and errors appear in the Console.
Press Ctrl+O while in the Sources panel to open a quick file searcher. Type a snippet name to jump to it immediately without clicking through the sidebar.
- Build a personal toolkit: create snippets for each effect from the Danger Room sessions — PulseEffect, RainbowDisk, FreezeAnimation, ResetDisk. Your own console command library.
- Snippets are auto-saved: as you type in the Snippets editor, Chrome saves automatically. No Ctrl+S needed. Closing DevTools does not lose your work.
- Check the Console after running: snippet output and errors appear in the Console tab, not in the Snippets editor. Keep the Console visible while working.
- Rename carefully: right-click → Rename. Snippets with confusing names accumulate quickly. Name them descriptively from the start.
If your snippet references diskSize and you run it on a page that doesn’t have a diskSize variable, it will throw a ReferenceError. Always run a snippet on the right page.
Snippets are stored inside Chrome’s browser profile data. If you reset Chrome, reinstall it, or switch to a new computer, your snippets are gone. Copy any valuable snippets to a text file outside Chrome.
This is the key limitation. If you need code to run automatically on every page load, use Local Overrides. Snippets require you to click Run every time, every session.
Snippets Training Missions
TestSnippet. In the editor, type console.log('Field mission active! Snippet running on: ' + document.title); Run it. Check the Console tab. What output appeared?PulseEffect containing the full sin wave pulse override from the Danger Room JavaScript session. Navigate to Austin’s tutorial, open Snippets, and run it. The disk should start pulsing. Now refresh the page — what happens? What does that tell you about snippets?disk-demo.js. Reload the page. Which version runs automatically? Which requires your action? Explain the difference in a sentence.Overrides accumulate. After a few sessions you may have a dozen active overrides across several pages. Knowing how to disable, delete, and restore them cleanly is as important as knowing how to create them. A mutant who can activate a power but cannot control it is a liability, not an asset.
Controlling Active Overrides
In the Sources → Page sidebar, look for the small purple dot next to any filename. Every file with a dot is being overridden. Files without a dot load from their original location.
Alternatively, look in the Sources → Overrides sidebar — it lists all active override files under your folder name.
In the Sources → Page file tree, right-click the file with the purple dot. The context menu includes Delete override. Click it. The purple dot disappears, and on the next refresh, Chrome loads the original file again. The file in your DevTools-Overrides folder is also deleted.
In the Sources → Overrides sidebar, uncheck the “Enable Local Overrides” checkbox. All overrides are immediately suspended. Files load from their originals. Nothing is deleted — your override files are still in the folder. Re-check the box to re-enable everything at once.
Use this to compare the original page vs. your modified version quickly.
To start completely fresh: uncheck the “Enable Local Overrides” checkbox first, then open your DevTools-Overrides folder in File Explorer/Finder and delete its contents. (Do not delete the folder itself — just what’s inside it.) Re-enable overrides and select the now-empty folder again.
Right-click the purple-dotted file to remove its override and restore the original
Key Interface Areas
Present on any file in the Page tree that has an active override. The single most important visual signal in this entire workflow. No dot = original. Purple dot = your file.
The master on/off switch for all overrides. Uncheck to see the original page. Re-check to restore all overrides instantly. Nothing is deleted when you uncheck it.
Right-clicking a file in the Sources → Page tree reveals options including Delete override (removes just this file), Save for overrides (creates an override for a file that doesn’t have one yet), and Open in containing folder (jumps to the file in File Explorer/Finder).
Your DevTools-Overrides folder is a standard folder you can open in any file manager or code editor. Chrome mirrors the site’s URL path inside it: DevTools-Overrides/localhost/disk-demo.js. These are plain text files.
- VS Code as an override editor: open the DevTools-Overrides folder as a VS Code workspace. Edit override files in VS Code (better syntax support), save, refresh Chrome — your changes appear.
- Compare original vs. override: uncheck the enable checkbox, note the page behavior, then re-check and compare. This is the fastest way to see what your override actually changes.
- “Save for overrides”: in the right-click menu of any file in the Page tree, this option creates an override copy of the file in your folder without any changes — a clean starting point. Edit from there.
- Graduation path: when an override becomes code you want to keep properly, copy it out of the overrides folder into your own project directory. Delete the override. You’ve graduated it to a real file.
The right-click → Delete override command removes both the override from Chrome and deletes the corresponding file from your DevTools-Overrides folder. If you want to keep the code, copy it first.
Overrides are tied to the Chrome profile that activated them. Guest mode, Incognito, and different user profiles each have separate DevTools state. An override you set up in your main profile will not be active if you open Chrome as a Guest.
Overriding a framework’s core file (like Bootstrap’s CSS or jQuery) can break a page in confusing ways. Start with files you wrote yourself or can read completely.
Management Missions
DevTools-Overrides folder in File Explorer or Finder. Navigate into the domain subfolder. Find the overridden file. What is its full path from the DevTools-Overrides root?Specific Field Missions
The sections above are your field manual. The missions below are specific structured exercises with clear objectives, targets, and success criteria — like the scavenger hunts in TNT Adventures. Each one is designed to be completed with only this guide and a browser.