We will explain in the following order:

  1. How to debug generally
  2. How to debug in depth (HTML & CSS)
  3. How to debug in depth (JavaScript)

1. How to debug generally

You can see generally debug from this preview tab.

image - 2024-08-20T101019.562.png

For example, If you add a code like this to your css file:

h1 { color: yellow;}

You can immediately see the change in the Preview tab without reloading 🎉

image - 2024-08-20T101029.869.png

2. How to debug in depth (HTML & CSS)

Click "Open in new tab":

image - 2024-08-20T101044.937.png

You can see the result in a new tab:

image - 2024-08-20T101100.740.png

Open DevTools on your browser, and you can debug the HTML, CSS from here 🎉

image - 2024-08-20T101216.388.png

Note☝️

​We are using Google Chrome in this example.

​

3. How to debug in depth (JavaScript)