We will explain in the following order:
How to debug generally
How to debug in depth (HTML & CSS)
How to debug in depth (JavaScript)
1. How to debug generally
You can see generally debug from this preview tab.
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 🎉
2. How to debug in depth (HTML & CSS)
Click "Open in new tab":
You can see the result in a new tab:
Open DevTools on your browser, and you can debug the HTML, CSS from here 🎉
Note☝️
We are using Google Chrome in this example.
3. How to debug in depth (JavaScript)
Go back to the challenge page, and add a code that logs out a message like this:
console.log("Hello there");
Click "Open in new tab":
Open DevTools on your browser.
Open the Console tab.
You can see the message you previously logged out:
Note☝️
Given that you have this tab open, when you make a change to your source code, then all you need to do is reload to see the changes.
Click the link on the right:
It will take you to the source code:
You can debug on DevTools by adding break points 🎉
That's it! Good luck :)