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.

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 :)


回答が見つかりましたか?