Original URL: https://www.theregister.com/2014/08/14/browser_tools_bake_off/

What's in your toolbox? Why the browser wars are so last decade

The new reality of picking a web winner

By Scott Gilbertson

Posted in Software, 14th August 2014 08:02 GMT

Feature Desktop browsers have reached a point where there isn't a huge amount of daylight between them. Google Chrome, Mozilla Firefox and Opera are all on a pretty even playing field when it comes to features and speed.

Safari and Internet Explorer lag a little bit when it comes to the bleeding edge of web standards because they update less frequently, but both are capable.

That doesn’t mean we can all go home and put our feet up, as Microsoft tried on IE development back in the early 2000s.

The pressure to differentiate is more intense than ever for Microsoft, Google, Firefox, Apple and Opera Software.

From January 12, 2016, pre IE9 versions of Explorer won't be getting any more security fixes of technical updates from Microsoft.

Firefox responsiveFirefox responsive

Missing in Chrome - a responsive design mode in Firefox lets you change viewport size without resizing your browser windows (click to enlarge)

That leaves millions of users and developers in the Windows camp looking for a new browser over the next few years. Whether they pick IE11 or something a little less Microsofty is the interesting quesetion

Add to that, new web users coming online and the increasing blurring of lines between the desktop and mobile world: IE 11 is the first version of Microsoft’s browser to share the same engine on desktop as Windows mobile. Mozilla has Firefox OS.

If the gaps between the browsers are becoming narrower for the user, then the next place to turn is web developers who built the apps and sites and to a great extend influence how the web looks and how it’s consumed by their browser choices.

The way to reach them is through ever more sophisticated tools.

It used to be that the only developer tool in web browsers was View Source. Now all the browsers mentioned above ship with at least some basic developer tools enabled. Yes, even IE has some pretty good developer tools. And those will getting even better as Microsoft attempts to transition users to the latest and greatest versions of IE.

Firefox networkFirefox network

The Firefox network shows information about each element loaded by the page (click to enlarge)

That said, there's still quite a difference between what's available. IE is still playing catch-up while others make it possible to build entire websites without leaving the browser, including everything from text editors to memory profilers.

So, which browser is the best for web developers?

The answer to that question will depend on what you're doing - writing CSS? HTML? Building sophisticated apps with JavaScript? Some browsers have better tools for responsive web design, others offer better JavaScript profiling tools.

There are, however, a couple of browsers we can leave behind right off the bat. Safari and IE both have passable developer tools, but neither pushes out major new tools anywhere near as fast as Firefox and Chrome.

If you're looking new tools designed to simplify your web development workflow, you're better off with a different browser. Even if you're happy with the current state of the dev tools in these browsers, I encourage you to read on if only so you can know what you're missing.

Then there is Opera. Opera used to offer some very capable and unique features in its dev tools, but in the move to adopt Blink over its own, homegrown rendering engine most of these tools were (hopefully temporarily) removed. At the moment the developer tools in Opera are almost exactly the same as what you'll find in Chrome. Everything that follows about Chrome also applies to Opera.

That leaves Firefox and Chrome

These two have been one-upping each other in developer tools for some time now, creating an unprecedented cornucopia of riches for web developers. The Firefox add-on Firebug deserves credit for getting this dev tools arms race going, but Firefox's native tools are now every bit as powerful as what you'll find in Firebug.

Chrome auditsChrome audits

Chrome's audit feature lets you find ways to speed up a page (click to enlarge)

Among the tools you'll find in both are the "web inspector", which allows you to view sources and see the corresponding CSS rules for any element in the DOM. For the most part, Firefox and Chrome are about the same here although Firefox offers a breakdown of the web fonts used on the page and currently the stable version of Chrome does not (pre-release versions of Chrome have added this). On the other side Chrome offers a separate tab for all the JavaScript event listeners on the page. If you're working with JavaScript a lot Chrome has the edge here.

The next tool both share is the Console, which shows any JavaScript, CSS or other errors on the page and allows you to type in raw JavaScript commands. Chrome and Firefox are pretty evenly matched here, though Firefox's console is a little easier on the eyes thanks to some extra padding around elements and colour coding. Both make the Console available within any other panel as well.

The two are pretty close on the Network panel as well, which shows information about each element that the page loads. Chrome has two nice features not found in the current version of Firefox - a button to toggle the cache for the page and a button to preserve the log so you can see how repeat loads change with caching.

Chrome timelineChrome timeline

Timeline in Chrome records every event processed by the browser (click to enlarge)

Chrome has two big elements Firefox lacks - a timeline view that records every event the browser processes and an Audits panel that will let you know ways you could speed up a given page. The Timeline panel is an invaluable tool for speeding up JavaScript based apps and gives Chrome the edge if you're a JavaScript developer.

Firefox on the other hand has a couple things lacking in Chrome, including a very nice built-in "responsive design mode" that allows you to change the viewport size without resizing your browser window. You can also rotate the viewport, simulate touch events and take screenshots at various viewport sizes.

Firefox also offers a nice color dropper to quickly grab any color on the page and a button for taking full-page screenshots. There's even a handy 3D mode that displays the DOM as if it were layers of a cake.

In short, if you're a web designer working on responsive sites, Firefox is your best bet.

While comparing the default tools means Chrome/Opera are better for JavaScript developers and Firefox is better for designers, all the missing features of each can be found in third-party plugins. Want a responsive design mode in Chrome? It's coming, but in the mean time you can use a JavaScript bookmarklet like Viewport Resizer. There's really no way to get the 3D view, but there are plenty of screenshot apps in the Chrome Web Store.

On the other hand if you need better JavaScript tools in Firefox you can install Firebug. Firebug itself can also have add-ons, adding another layer of possibilities. For example you can make up for Firefox's lack of audit tools by using the YSlow add-on.

So bottom-line time: who is best out of Firefox and Chrome? Afraid I’ll have to play it even Steven here as, personally, I think the answer is both.

When I'm working on making a site responsive or other visual tasks I use Firefox. If I need to debug JavaScript or profile a web app for speed I turn to Chrome. The best news for web developers is that both are adding new tools at a startling pace.

Given the current pace of development and the pressures at play, then your current favorite doesn't have what you want just wait six weeks. ®