Tools - Development


Can I use… is an invaluable resource that we all (hopefully) use on a regular basis, but what if you have an existing codebase that you want to evaluate for browser support? You could go through it manually, but that could be a lot of work. Thankfully, someone has put together an app and a Node.js module that can crawl your CSS and list what will break in what browser.

Go beyond console.log with the Firefox Debugger

Promo art for the Firefox Debugger Playground: a styled insect with the words "go beyond console.log" below it.

console.log is no debugger. It’s great for figuring out what your JavaScript app is up to, but it’s limited to spitting out a minimal amount of information. If your code is complex, you’ll need a proper debugger. That’s why we’ve added a new section to the Firefox Devtools Playground that’s all about debugging. We’ve built four basic lessons that use the Firefox Debugger to examine and repair a simple JavaScript to-do app.

Favicon Generator

Need a quick way to generate the necessary icons for your site, from the lowly favicon.ico to high resolution icons? I found this really helpful:

No hard decision

With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes

You spent hours on design, colors, graphics… How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.

Compelling design, a platform at a time

Each platform comes with its own design requirements. You can’t just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.

Instant feedback

How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.

Saying Goodbye to Firebug

The Firebug logo: a stylized beetle with an orange, flaming carapace.

Firebug has been a phenomenal success. Over its 12-year lifespan, the open source tool developed a near cult following among web developers. When it came out in 2005, Firebug was the first tool to let programmers inspect, edit, and debug code right in the Firefox browser. It also let you monitor CSS, HTML, and JavaScript live in any web page, which was a huge step forward.

Firebug caught people’s attention — and more than a million loyal fans still use it today.

So it’s sad that Firebug is now reaching end-of-life in the Firefox browser, with the release of Firefox Quantum (version 57) next month. The good news is that all the capabilities of Firebug are now present in current Firefox Developer Tools.

The story of Firefox and Firebug is synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered in the Web 2.0 era. Today, the work pioneered by the Firebug community over the last 12 years lives on in Firefox Developer Tools.