See number 5 in the above example.) Add-ons, Shmadd-ons (Example: a menu item labeled Responsive Design Mode rather than an icon of a smartphone tucked into a corner of the dev pane.
Additionally, they’re labeled instead of just using icons, so you can find things easier. Maybe it’s just me, but I find myself forgetting where some of Chrome’s options are, and Firefox lays them out in a much more user-friendly way. One of the major selling points of the Firefox Developer Edition to me is how easily accessible all the tools are when compared to Chrome. In terms of personal preference, I like the Firefox one better, but I work in dark-themed IDEs, too. In Firefox, once you enter the Tools or Inspector mode, you get a similar pane to what you see in Chrome. In Chrome, there’s menu access, too, but it’s a single option with everything within the dev pane itself. Now, let’s compare accessing those features to the dev edition of Firefox:Īs you can see from this picture, Firefox lays out its menu much better. Other stuff I have had to leave out that’s tucked in different menus.Viewport/Device emulation and debugging.
Firefox developer edition tutorial full#
Somewhere in those new panes are pretty much everything you need for full a full dev workflow. If you’re used to using Chrome’s developer tools, you’re probably used either to going into the menu and selecting More Tools -> Developer Tools or to right-clicking on something and selecting Inspect Element and seeing the window split into multiple panes. It has many of the same features as the Model S, but they have to be tacked on separately (as browser add-ons in this case). They work similarly in theory, but the practical application is vastly different.Ĭontinuing the strange, electric car analogy, Google Chrome would be kind of like the Tesla Model X–the mass-market version of the Tesla line. While both versions run quickly and efficiently are set on the same foundation, the best analogy that I can think of is the dev edition is like driving a Tesla Model S while the consumer edition is similar to a fully loaded Toyota Prius. Left: base Firefox right: developer editionīut there really is. When you see a side-by-side shot of the dev vs consumer versions, there’s not a lot of difference on the surface. When you first boot up Firefox Developer Edition, there’s not really anything special.
Firefox developer edition tutorial install#
So once you’ve found it, download it and install it. So you have to scroll all the way down to the footer until you find the Beta, Nightly, Developer Edition link. That’s not a bad thing, especially with the improvements they’ve made lately (I find it actually outperforms Chrome for my daily tasks lately since the Quantum update), but that’s not why you’re here.
When you head to the Firefox homepage, you’re obviously directed to download good, old, everyday, consumer Firefox. One of the biggest hurdles to using the the dev edition of Firefox is actually getting to it. You can dig down into the file system of websites, play in the JavaScript console like someone else’s site is your own private sandbox, and test out styling and tools in real time.īut what if I told you that Firefox Developer Edition can do that, too… and more? A Hidden Gem One of the big draws to Chrome are the fantastic dev tools that come with it through the inspector. In case it wasn’t clear from the name, Mozilla is specifically targeting web developers and designers with Firefox Developer Edition. And with Firefox Developer Edition, Mozilla ain’t having none of it. Gone are the days where Mozilla Firefox is the first and only download with Safari, Internet Explorer, or Microsoft Edge. Over the past few years, Mozilla has been working hard to get back to the ubiquity and market share it held before Google Chrome became pretty much everyone’s go-to browser.