Advertisement
Tools & Tips

Debugging With the Firefox DevTools

by

Over the past year I have given a presentation about using the browser for debugging client-side bugs. Throughout the presentation I would focus on using Chrome, as it's my primary browser and I just don't have the time to use multiple browsers while presenting.

Now, I do suggest to others that they try out other browsers, as it can be very helpful. So here's a screencast where I'll show you a few sample applications, with some bugs, and how you can use the Firefox DevTools to debug them and compare and contrast the different tools.

Conclusion

Now, I've only showed you what I've been using personally within the DevTools, but you can do a heck of a lot more with them, checkout the documentation. Lately, I've been thinking of moving over to Firefox as my main browser as I'm really enjoying the Firefox DevTools.

Thanks for watching!

Related Posts
  • Computer Skills
    Alfred
    Alfred DebuggingAlfred400
    No matter how hard I try, I still have problems with scripts that I write. No matter the approach taken, mistakes in typing, logic, or both will cause programs to not behave the way expected. Debugging is the art of finding and removing these mistakes. In Alfred, debugging is even harder due to the scripts being executed in a sub-process. You need the skills this tutorial will teach.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    Interviews
    Interview With Peter CooperPeter cooper wide retina preview
    Catch up with software developer, Peter Cooper, just in time for O'Reilly's Fluent Conference.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Understanding and Using ArraysMetadata
    In the first part of this series, we covered what WordPress meta data is, how it can be retrieved, and the various data types (such as objects or arrays) in which it can be returned. Now it's time to learn about the different types of arrays. When you write an array manually you know what its structure is an what the name of each index is. But when you are building arrays by querying a database, you are going to need to do some detective work to determine the structure of the data returned and the names of the indexes.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    Firefox OS
    Preparing for Firefox OSFirefox preview retina
    Firefox OS is an entire mobile operating system built around open web technologies! The OS has been built from the ground up to allow HTML5 and Javascript to unleash the full potential of the device hardware. Read on to learn more about Firefox OS and how you can start porting your existing web apps to the platform today!Read More…