AD
Episode
245
Interview
Web News

Debugging HTML, CSS, and JavaScript

Recorded:
April 21, 2023
Released:
April 26, 2023
Episode Number:
245

Squashing bugs in your code can be as easy as finding a missing semicolon, but sometimes it can be a grueling process filled with torn out hair and console logs. In this episode, Matt and Mike discuss the various ways that you can debug your code using methods that span HTML, CSS, and JavaScript. For HTML, the DOM inspector, markup validation, and accessibility checkers can ensure you have a clean structure for the rest of your code to work from. Then in the layout department, CSS debugging methods can include things like using the Computed tab in your dev tools, obvious visual markers (ie red borders on targeted elements), and various Chrome extensions. And finally, JavaScript - the part of your website that is most likely already acquainted with debugging includes methods like using alerts, breakpoints, asking AI to correct errors, and much more.

Listen

Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

Topics

HTML Debugging

  • DOM inspector
  • Markup validation
  • Accessibility checkers

CSS Debugging

  • Obvious visual markers (ie red borders)
  • Dev tools
    - styles (properties listed with what they're applied to)
    - computed tab for adjusting margin and padding
    - z-index troubleshooting via the overflow menu > more tools > layers
  • Chrome extensions
    - Pesticide
  • Developer browsers
    - Firefox Developer Edition
    - Polypane

JavaScript Debugging

  • Alerts
  • Console.log
    - console.table
  • Debugger
  • Break points
  • VS code debugger (launch.json files)
  • Postman/VSCode thunderclient for API testing/debugging
  • ChatGPT, BingAI, and other chat bots
  • Manually breaking functions
  • SentryIO, ReplayIO, and LogRocket

10% Off Web Development Courses

Learn web development skills with interactive courses (free & paid) by Scrimba.

Using our link, get 10% off all Scrimba plans - click here!

Note: We receive a monetary kickback if you sign up using our link.