Useful Tips

Automatic Reloading

Whether you're using CodeSandbox or the local installation method, they both come with an automatic reload feature. When you're working locally, we use the command npm run dev (inside the Euterpe folder), which starts a local development server that serves your web app, while making your web app refresh on its own whenever you change your code. This means you can see your updates right away without having to manually refresh your browser. The same happens with CodeSandbox, but it handles the 'npm run dev' part in the background, so your changes are still shown to you automatically.

However, there's a limitation to this automatic refresh. It only works for code changes in files inside the src directory. If your changes are in the public directory or other places, the automatic updates won't apply and you'll have to do a hard refresh.

Hard Refresh

However even if your changes are in the src folder, sometimes regular refresh (Ctrl+R) doesn't work, especially when those changes are on the agent files (web-workers).

To get around this, you should use Ctrl+Shift+R instead. Think of it as a full refresh – it tells your browser to ignore the cached data and fetch the latest content. It ensures that you see the most recent version of your web page after making changes.

Browser Inspection, Console, and Breakpoints

One very useful feature of a browser is the Inspection. When you right-click on a web page and choose "Inspect" or press F12 or Ctrl+Shift+I, you open the Developer Tools, which allows you to see what happens behind the scenes and debug your code.

In the "Console" tab within Developer Tools, you can use there is an interactive console which allows you to communicate with your web page. You can log messages, catch errors, and work with variables.

Lastly, you can "Breakpoints." The way these work is that you can navigate to your source files from within the Developer Tools, and click on the left side of a line to apply a breakpoint. When your code reaches a breakpoint, it pauses its execution. This pause allows you to examine the code's state, check variables, and pinpoint issues.