Like most people I’m a creature of habit, and I’ve always preferred to use firefox for web development. It’s understandable, considering it was released before Chrome (firefox first released 2002 – compared to Chrome in 2008), and it was a much better alternative to Internet Explorer at the time. Yeh, I’m somewhat of a veteran of the HTML game. This article notes down some of the reasons why I think it’s still relevant today, despite the mainstream of developers using Google’s Chrome browser.
Disclaimer: I’m not trying to bash the chrome browser here. I do use it from time to time and it’s just as good as firefox in many respects. My in-browser development just happens to be within firefox, mostly.
I say tomato, you say tomato, but when you look at it in plain text it’s just the same thing. Huh.
Screenshots are easy
In your address bar, you have an ellipsis menu with the option to take a screenshot of what your seeing. You can drag a clickable area you want to capture, choose just the full viewport, or the whole document. After that it gives you the option to either download the file, or copy the image to your clipboard. I’ve found this to be super useful in my every day tasks, when I’m highlighting display issues with a website or some other reason. There’s also a capture screenshot button within responsive design mode, if you’re working on specific screensizes.
CSS Grid tools
If you’re developing with the css grid, the web developer tools for firefox are the best available to help you. If an element is styled with display:grid You’ll get a grid icon next to your class. Clicking this will add an overlay to your grid element, showing you were all the gridlines and gutters are. I’m still learning about css grids at this stage, so something visual showing me what’s going on with the layout, and where I can move things around, is really helpful. Note that you may need firefox developer edition to take full advantage of it’s tools.
Javascript hints in code inspector
When looking at inspector view you’ll find that any elements with a javascript event will have an'event‘ label next to it. Clicking it will open up a tooltip, showing you what events are assigned to an element, as well as what’s bubbling up the DOM and so on. This is also a handy reference, when you want to check what events are assigned to the whole page, by checking the html element. This same label will also show as 'grid' for when you have a grid element (clicking it will show the overlay described above), or 'scroll' to tell you when an element has a scrollable overflow. There is also on for when elements have the display: flex property assigned. There are probably more, but I’m not sure what you’d call them.
Responsive design mode
As I’ve already mentioned, there’s a screenshot button in responsive design mode to allow you to take quick screenshots. There’s also an emulation button, which mimics touch interactions. However I think this is also a chrome feature now.
One thing I have found a little annoying with Chrome’s responsive mode, is that you need to open the dev tools first and then click the responsive icon. The other issue with this is, it will save this state, so if you go on another site, and use dev tools again it will show the last responsive view you used. Not always useful if you’re not always wanting to use it.
I’m aware there’s a keyboard command to open responsive design mode in chrome/firefox (ctrl+shift+m) but I’ve a terrible memory when it comes to keyboard shortcuts. I use the responsive design mode in firefox for web development all the time.
The black sheep of the dev team
I work within a team of developers, front and back end. They have their own preferences when it comes to workflow, code editor and so on. One of our processes in our testing is of course browser testing. As I use firefox, it helps the team identify issues more readily. Nowadays browsers are more or less the same in terms of rendering, but occasionally an issue crops up which is browser specific. Having a firefox dev is obviously handy if we find a bug that’s related to this browser. If I’m mainly using firefox for web development, I can help out those unfamiliar with it to squash those bugs.
Accessibility inspector tools
There’s an accessibility tab in dev tools for firefox. I know there’s one in chrome, which will generate a comprehensive report for many things including accessibility. The firefox version is a bit more basic, but the full node scan of a page is quite quick when compared to the chrome version. It will also allow you to click and inspect specific elements on your page for accessibility. In terms of visual aids, firefox seems to allow a bit more interactivity with the page for identifying issues.
Web page caching
I’ve found firefox to be a little more forgiving when it comes to caching content. I’ve lost count of the number of times I’ve had clients say they can’t see any changes in their chrome browser. I think chrome handles caching a bit differently, but it usually involves a hard refresh a few times to fix the issue. However, in defense of chrome, I’ve found that firefox weirdly caches the settings of htaccess files for some reason. The only way to clear this cache on a particular website is to manually do it via the settings page.
It’s not a Google product
Firefox seems a bit more sensitive to user privacy, for example it has tools to block facebook tracking etc (about:protections). It’s no surprise that Tor is based on firefox and, at time of writing, is the number one browser for anonymous web browsing. Obviously Google likes to track your stuff, it’s part of their business model. So if you’re adverse to that and feel that your privacy is important, firefox take a more impartial approach to your data.