Sort Out your Browser Woes
Website design has changed over the past two decades. Where a developer once wrestled with Dreamweaver and flat files, the industry's matured into distinct disciplines.
And for a good front-end designer, the Web browsers are themselves now invaluable for development & testing. Browser Wars may be over, but the gangsters remain.
Google Chrome, Mozilla Firefox & Opera all offer Web designers cutting-edge debug tools. Apple's Safari & Microsoft's Internet Explorer, whilst both good, still lag behind the pace of developing Web standards. And with standards changing faster than ever, the pressure to differentiate with built-in developer tools has never been greater.
Each browser comes with sophisticated developer tools to edit CSS, HTML and JavaScript. Even Internet Explorer is a lot better these days, and working hard to catch up with the development pace of its competitors. But of the lot, Firefox & Chrome push out new tools the fastest and it's no co-incidence they're the ones to beat when it comes to developer tools.
Firefox probably started the whole developer-tools movement with its open-source approach to plug-in functionality. The Firebug plug-in remains a critical tool in any Web designer's toolbox. But Firefox's internal tools are now arguably catching up with Firebug.
Although it's possible to get plug-ins that will replicate nearly all this functionality on any one browser, it's fair to say that Chrome's built-in developer tools are best for JavaScript development, whilst Firefox shines for designers.
Both Chrome & Firefox offer excellent Consoles for tracking errors and injecting JavaScript commands. Web Inspectors on both browsers allow developers to view source & check CSS rules applying to any element within the DOM. It's neck-and-neck here: Firefox does a slightly better job of analyzing fonts and network traffic, whilst Chrome's better at front-end JavaScript activity. In particular, Chrome's Timeline of browser events & Audits panel are particularly useful for tracking-down those page-load bottlenecks.
The new Responsive design mode in Firefox lets a Website designer change viewports without resizing the browser window. You can also rotate the viewport & simulate touch events from mobile devices. Add the color-dropper to grab colours from a page and a 3D mode that visually illustrates the DOM hierarchy, and Firefox takes the biscuit for front-end responsive Web designers.
So which browser to use? We say BOTH! It's great to have these free-to-use, rapidly developing IDE's replicating real-world user environments precisely on your desktop. And with Web standards updates coming thick and fast, it's a great time to be a website designer.