Front-End Dev Disruption

Earlier this year I mentioned to Philip that if it wasn’t for Firefox’s extension, Firebug, I wouldn’t be able to build a website. And then of course, being Philip, he wanted to know what the difference was between Firebug and any other inspector. Like Chrome’s web inspector. Or Safari’s. And as it happened, I honestly didn’t have a solid answer other than I’m used to FireBug. And this felt inadequate, so I decided to disrupt my process and try the others out and do a little side by side comparison of my own. And, of course, as with all things, it turns out they’re not created equal

When building websites, front end developers depend on a lot of tools. One of those would be the inspector. Ideally, this tool allows us to optimize and debug as we go. Every web browser is different and will render and display your site differently. For instance a form input field might look the way design intended in Chrome but it looks different in Firefox. Frustrating. But a part of life. When that happens, you breath deeply and inspect the offending element and start debugging the why. You really don’t know how browsers will treat your, ahem, beautiful code and the web inspector comes in super handy when browsers don’t play as you’d like. So, even if you have a preference, as site launch time approaches, you’ll find yourself using all of them. 

So. Let’s break down the list of options followed by my thoughts on each:

• Firefox (I decided to use both Firefox’s inspector and FireBug)
• Safari
• Chrome
• Microsoft Edge and Internet Explorer (The inspector in these two are very similar.)

Firefox – Firebug

What I like

• Few options to get lost in.
• The HTML is super easy to edit.
• Sub navigations under each item are easily accessible.
• When looking at an element’s background image, you can open that image in a new tab by just right clicking.
• Editing an element’s style. You select the element you want to edit, find it in its styles, click on it and start editing. You can easily add, delete or edit. The tab and enter/return keys work fast and how they should. Hit tab to tab around, if you’re editing a property, hit tab and it goes to the value, hit tab again jumps to line underneath to add more. Enter/Return does the same thing. Very predictable, intuitive and easy.

What I don’t Like

• It’s slower than some of the others
• Takes up a lot of memory when in use
• It’s an extension and not built into the browser.
• Not a lot of options when doing serious debugging
• The one I hate the most, If an element does not have any styles to it, you can’t edit it. This is just crazy.
• Global styles are always first even if the element you are on has styles of it’s own.

Firefox – Inspector

What I like

• The UI is friendly. Icons and colors are used.
• Easy to navigate around.
• The arrow inspector.
• When you highlight an element it gives quick information on that element. The width, height, the Id and Classes. if it’s a H1 tag or div or section. I say this because Firebug doesn’t do this. WTH man?
• You can give any element styles. Any.
• Tab and enter when editing rules are fast and easy.
• Click on a style rule, hit enter/return and your editing it.
• Very cool responsive mode.

What I don’t like

• Not a fan of the grid lines it gives when you’re inspecting elements.
• Don’t like the treatment to the background images of elements. Can’t view them unless you copy the image url and paste it in a new tab.
• Although the responsive mode is the best out of all, it’s difficult to find. Mixed in with a few other icons.

Safari Inspector

What I like

• Safari has a pretty neat toolbar in its arsenal. It gives you a quick look at number of resources like size of all resources, time it took for the page to load, and errors and warnings.
• When editing a rule with properties that have parentheses, tab will place you inside them. I thought this was great and none of the other inspectors did this.
• It has pretty much everything the other inspectors have so imagine all those again here

What I don’t like

• It’s slow.
• It’s Cluttered.
• The styles and rules are clunky and confusing.
• There are too many options.
• Enter/Return don’t work like the tab key does when editing styles. Not a big one.
• The inspector select tool is the only one out of all browser inspectors that is not an arrow and positioned on the opposite side. This bothered me. Not saying that this is bad thing, I just didn’t like it.

Chrome inspector

What I like

• Very Clean. Definitely the cleanest looking one.
• Simple navigation. No Clutter
• Editing Style rules are easy and fast.
• When selecting an item it stays selected and gives you a great little breadcrumb on where that element is located.
• Has a mobile icon for device mode. Wish I could switch this with Firefox’s.

What I don’t like

• I don’t know. I couldn’t find anything I didn’t like with this one. Just that I’m not used to it. Which is frustrating because I didn’t want to like it.

IE and Edge

I put these two together since they’re practically the same.

What I like

• The UI for these is also very clean. Right up there with Chrome.
• Minimal Icons
• Simple Navigation
• Microsoft has improved this tool a lot. Much faster than it was before. Feels smooth.
• You can test previous versions of IE in IE. This is super handy when debugging for IE.

What I don’t like

• Editing style rules are a pain. Tab and Enter/Return don’t work like the others do. This is big problem for me since it’s the main reason why I use inspectors as I build.

So where did I land after all this? Well – I’m still using Firebug but only because I still develop with FireFox. So – habit. Which, you know, are hard to break. But I am slowly moving towards Chrome. Out of all of them, in spite of my initial hopes, Chrome’s Inspector really is the best. If I had to rank

1. Chrome – Cleanest and fastest.
2. FireBug – It’s like the car you can’t sell.
3. Edge and IE – Improving and it’s required for testing.
4. Firefox – Device Mode is simply the best.
5. Safari – Just needs to get faster and removing some things.

I have to use all them for browser debugging so this exercise has really helped me get familiar with them. And my front-end debugging is faster and smoother now too. Sometimes habit keeps us using something when a little exploration and discomfort might get us to a better something. It’s all about the stretch. Try it!