How to use DevTools to debug your code.
DevTools has a huge range of sections to it, which may seem overwhelming to start with. It is way more than just being able to see how your site looks on different devices.
- You can inspect your HTML and CSS with it easily. Selecting an HTML element and then looking at the CSS section to see what CSS is being applied, where it is coming from and what might be causing conflicts that are messing with your layout.
- You can see if links in your HTML are not working as they should.
- You can see if/which your CSS or JavaScript files are being loaded.
- You can use the DevTools JavaScript debugger to step through your JavaScript code and look at how the program is running and what it is doing that you don't expect.
- You can look at session data and cookie storage (useful for final milestones)
- And so much more...
Putting in the time to experiment and practise using this tool is 100% worth it, as it will save you so much time and an employer will expect you to know how to use it.Here are a couple of useful videos to demonstrate how to use DevTools to get you started with using the tool yourself:
- DevTools and CSS: https://www.youtube.com/watch?v=Z3HGJsNLQ1E
- Debugging JavaScript with DevTools: https://www.youtube.com/watch?v=AX7uybwukkk