Devtools have changed everything. There was a time when web development involved designing and building your web pages in a web design application—or in your code editor of choice—and switching back and forth between that and a browser to test and debug your work. Fortunately, those days are behind us.
Devtools are a suite of features available in certain browsers that allow developers to perform a range of debugging activities on their web pages and web applications without ever having to switch back to their development environment. These days, some degree of devtool functionality comes as a built-in feature in most of the popular browsers, and that, of course, includes Google’s Chrome and Mozilla’s Firefox.
While Chrome was the first of the major browsers to add developer tools, the usefulness and popularity of these tools ensured that the other major browsers soon followed suit. And, with the relatively recent release of Firefox Developers Edition, there is certainly competition in this space. Indeed, the market is at a place now where the choice between Chrome and Firefox for web development almost comes down to a matter of preference, since both are highly capable and feature-rich in the developer tools department.
Using Devtools to Improve Your Web Development
If you are unfamiliar with devtools, you may be wondering why they are considered to be such a revolution in web development. These tools allow a developer to perform many functions they would previously have required special software for. They also allow a developer to make non-permanent changes to the underlying code of a web page, meaning they can trial changes in the browser before heading back to their development environment to make those changes properly. Not every browser’s devtool features are the same, but here are some of the most notable and common ones.
Console
The console feature of a browser allows you to see things that are being reported, either as part of a debugging effort, or errors generated by some aspect of the page or application being tested. Developers often put debugging messages into their code to test things like loading time, or to output hidden data to see why something is not working, the browser’s console function makes it easy to see these messages.
Inspect Element
Inspect element is a devtools feature that allows a web developer to select a specific element of a web page and view its underlying structure, including code, attributes, linked elements such as style, and more. This feature is useful for isolating the cause of a problem that could theoretically be caused by HTML, CSS, or Javascript.
Source Code
In a way, source code could be seen as the original devtool, since it has been a feature of most browsers since long before the term “devtools” was coined. This feature allows you to quickly view the source code of a page, particularly useful when debugging issues with pages that are generated dynamically on the server-side.
Resource Profiling
Slow load times are the bane of web developers everywhere. Resource profiling enables you to see what resources your page or web application is using. This can be used to identify things like excessive network bandwidth, CPU load, and memory usage.
Other Features of Devtools
Of course, these are not the only devtool features you will find in Firefox, Chrome, or any other browsers for that matter. From 3D page inspectors to auditing functionality, there is plenty to assist you in streamlining your web development workflow.
Choosing the Browser
These days, the choice of development browser is not as significant as it once was. Thanks to the advent of standards-compliant web design, all of the major browsers render pages fundamentally the same. This is in stark contrast to the early days of web browsers, where the same page could look dramatically different depending on the browsers it was being viewed in.
These days, Chrome is the most commonly used browser with over 60% market share. In days gone by, this would have made Chrome by the far the best choice for development, since getting your code to work in Chrome would mean it works on the vast majority of systems. Given the rigid standards-compliance by both Chrome and Mozilla, however, you do not need to worry about that.
Instead, you can focus on what the browsers offer you as a developer. Chrome has a long history of including developer tools as part of its standard package. You can also add plugins that increase the browser’s functionality. Firefox also supports plugins and has recently released a “developers version” of the browser specifically for web developer use.
Firefox Developer Version Vs. Chromium: Devtools compared
So, given that you no longer have to worry about whether your page will look the same in Firefox or Chrome, how do you decide which browser to go with when it comes to devtools?
One of the first—and easiest—factors to consider is the performance of the browser. Chrome was once renowned for its lightweight footprints and lightning-fast load times. Unfortunately, as is often the case with widely adopted programs, it has become a little bloated and slow since those days. In contrast, Firefox is now boasting some snappy load times and light memory usage.
There are also privacy issues to consider, as Chrome is inextricably tied to Google, whereas Firefox is not affiliated with any large corporate entities, and has user-privacy quite central to its core principles.
Regarding the developer tools themselves, both browsers are as capable as each other, but there are some differences that may sway your opinion. For instance, Firefox Developers Edition comes with everything ready to go “out of the box”. Chrome, on the other hand, includes a lot of features out of the gate but relies on additional plugins to bring the feature set on par with Firefox.
Another factor to consider here is that, while appearances are subjective, many developers—even a web developer who primarily use Chrome—prefer the aesthetic of Firefox’s developer tools.
Developing for the Web
Developing for the web has certainly become more refined over the past few decades. From web standards ensuring that different browsers are consistent in the way they render pages to accessibility-driven design ensuring web pages “degrade gracefully” so that the content can be accessed on as many devices as possible.
An interesting space to watch out for is the environment surrounding net neutrality—the principle that internet service providers shouldn’t favour or block web traffic. The company behind Firefox, Mozilla, is a strong advocate of net neutrality, a mentality that shines through in their stance on the privacy of their users. In contrast, Chrome’s parent company, Google, is both an internet service provider and a media provider, and have every reason to push in the other direction.
Conclusions
Ultimately, the choice of browser for a web developer could easily come down to a matter of personal preference, since both Chrome and Firefox are very capable. At this point in time, Firefox Developer’s Edition would seem to have a slight edge over Chromium all things considered. But that could quite easily shift again in the near future. One of the best things to happen to web browsers was competition, and it would be surprising if the competition that Mozilla is now bringing doesn’t lead to Google upping its game in the months and years to come.
Recommended article: Is it Always Best to Reduce Code Lines?