In a previous video about using the browser developer tools, I focus on how to use the JavaScript console to experiment with and test your JavaScript code.

In the following videos, I provide a quick overview of the main features in the Safari and Chrome developer tools, to get you oriented with the tools so you know what’s available and how you might use them. Each panel of the developer tools within a browser, like the JavaScript console, or the Elements panel, deserves an entire video, so for now, use these videos to get a sense of what’s there, and check back later for future videos on the details of the individual panels.

As a web developer, you should be familiar with the developer tools in all the modern browsers (Chrome, Safari, Opera, Firefox and Edge), although you will probably pick a favorite to use for the majority of your testing and debugging. These videos are a great way to learn what each of the browsers offers for development so when you dive in yourself, you’ll know what to expect. I’ll be doing more videos about more of the features in the various browsers, so keep an eye out!

Using the Chrome Console

Using the Safari Console

Related posts about the Developer Console

Using the browser console: How to open the console in each browser (IE, Firefox, Chrome, Safari).

Using the browser console to experiment with and test your JavaScript code: How to use the JavaScript console.

Pin It on Pinterest

Share This

Give your Brain a Treat!

Don't miss out on brain-friendly updates, new WickedlySmart Projects, early access to books and general cool stuff! Just give us your email and we'll send you something about once a week. Don't worry, we'll never sell your name and you can remove yourself at any time.

Check your email to confirm your subscription.