How to debug a webpage

Hi All,

Before starting freeCodeCamp, I’d done a bit of coursework in R and Python, and one thing I enjoy about programming is being able to debug my code when something goes wrong. In other languages, you can insert a print statement to make your code more transparent, but when I’m working in HTML on something like the tribute page or my personal portfolio, I’ve been struggling to figure out what my code is actually doing. And if I copy code from a different page and end up with a completely different result, I’ve also struggled to figure out the source of the problem. Is there some way in CodePen or some other tool to show more of what’s going on behind the scenes when we’re using HTML, CSS, and JS?



You can use the developer tools integrated with your browser to debug HTML, CSS and JS. It generally shows up when you press F12 on any web page.

More info:
Firefox Dev Tools
Chrome Dev Tools