SketchWave Disk Modification Demo

Did you know you can modify a webpage?!

Use Chrome Developer Tools to edit HTML, CSS, and JavaScript in the browser and see results instantly.

If you haven't already, create a folder to house any 'overrides' you wish to make in the page. Many find it convenient to put it on the desktop with a name like 'COverrides' (Chrome Overrides).

Then...

1. Open the 'Source' tab in DevTools: press F12 or Ctrl+Shift+I (Mac: Cmd+Option+I).
2. 'Source Tab' has a set of sub-tabs under it: Page, Workspace, Overrides, Content scripts and Snippets. You may need to use the >> button to see them all or expand the size of the panel.
3. Select the 'Page' sub-tab and find the page containing the content you'd like to modify. When you click the file, it will open in the adjacent panel on the right.
4. Select the 'Overrides' sub-tab (if necessary, click the '+' to select your overrides folder).
5. You have now enabled Chrome to save your changes locally, effectively overriding the original files. You can turn this feature on or off using the 'Enable Local Overrides' checkbox.
6. The page you originally loaded earlier is there for you to edit. Any changes will be designated with a '*' (you'll need to save - Ctrl-S) and a purple dot will show indicating the override status.
7. When you refresh the page, your overrides will be applied automatically.
8. If you close the DevTools or disable Local Overrides, your changes will no longer be applied.
9. Reopening the DevTools will reapply your overrides as long as 'Local Overrides' is enabled. You can delete any overrides you no longer need.
10. DWR! If you make changes to the original source code, those changes may not be reflected in your overrides! Consider this if you get unexpected results when overrides are enabled.

You can experiment with changes safely without affecting the original source files.

Try this: change the header text, tweak a color, or adjust the canvas size, then reload to see the changes! See if you can modify the SWDisk by modifying elements in the swDiskSimpleSketch.js file. Can you find it?!

This app features SWDisk, SWGrid, SWPoint, and SWColor, that utilize the p5js ecosystem. Load their reference pages to see how they work and use 'Overrides' to explore their functionality safely.

Feeling brave? Study the SWSinusoid reference page: Can you make the SWDisk breathe?! Cycle its colors?!

---

Note: This method is ideal for testing and debugging, but remember that changes made through DevTools are temporary and only affect your local view of the page. Always keep backups of your original files when experimenting with overrides. For more extensive training in the use of Chrome's DevTools, check out Austin's Live-Page Hacker tutorial.