Exploring Native Inspectors

Over the years workflows change and adapt to the new tools available. My current workflow has me spending most of my time inside my chosen browsers inspector, Chrome.

Browsers today have lots of fancy new features in them which most people don’t have the time to look for, so here are some the gems I have working in my workflow.

Chrome Inspector

I love Chrome Inspector. You can get the inspector by pressing right click, then inspect element. The Chrome Inspector is made up of a few different windows. The following are the ones I use the most:

1. Elements

Elements is what I use most the time. This shows me the code and CSS for each element and lets me style up elements really fast. By clicking the line number you are taken to an already edited CSS file, which you can copy or simply save over your old CSS file. This is great for quick editing of elements without having to find it in your CSS file.

I generally plan out the ‘ids’ and ‘class’ I will need and upload a blank style sheet, then use chrome’s inspector to fill in all the blanks. You can also create new rules which will be included in an inspector specific browser sheet which you can copy and paste onto yours.

Editing 'elements' within chrome native inspectors
Editing ‘elements’ within chrome native inspectors

 

I like this style editor because it has suggested CSS styles in a large drop down list so even if I forget the CSS property’s exact name, I can quickly get the right rule.

Style editor - native inspectors
Style editor – native inspectors

 

Another cool feature from Elements tab is you can drag ‘divs’. I have not found another inspector that lets you drag ‘divs’ in your build. This option allows you to see how elements will look in different locations in the framework and gives you a lot of freedom.

2. Resources

The Resource tab lets you see everything loaded by the website including scripts, stylesheets and images. This helps you find errors in scripts as well as 404 errors.

3 .Network

Network tab is great for finding loading order and how many ‘http’ request your site is making.

4 .Source

Source lets you edit your ‘v’ files and JS files on the fly. This is also where you are taken to when you click on a line number in the elements tab.

5. Console

Lastly I use console to find errors in script and diagnose problems. This is really useful when using custom made JS and PHP because you can quickly and easily find out what errors.

Chrome also has a very comprehensive responsive design viewer; however it is hidden under the settings and while it has more features than the Firefox version, it’s very clunky and you have to constantly go back and forth from the Elements tab and settings.

Chrome settings icon - native inspectors
Chrome settings icon – native inspectors
Chrome settings -native inspectors
Chrome settings -native inspectors

 

Firefox inspector

While I don’t usually use the Firefox browser, a few people in our office use Firefox so I decided to go through how you can use it in workflow as well.

Firefox has come a long way with its inspector. Now looking a lot like Chrome’s inspector but with a stylish black/grey finish. Firefox sports an inspector, style editor, console, debugger and profiler.

 

 

Using native inspectors - Firefox
Using native inspectors – Firefox

The Firefox inspector is very much like the chrome inspector and has most the same features. Some are flipped; the search is on the top and the element breakdown. The Style section is also very similar to Chrome.

You can add CSS rules but unlike Chrome it doesn’t suggest rules.

Adding CSS rules with Firefox - native inspectors
Adding CSS rules with Firefox – native inspectors
Firefox style editor - native inspectors
Firefox style editor – native inspectors

 

 

Clicking the line number will take you to the Style editor just like in Chrome but the CSS won’t be changed in the style editor view, which can be quite frustrating if you are used to it being edited.

In Firefox the Style editor has a nice ‘save’ option next to the CSS so if you do edit it, you can quietly save over your local CSS file for upload.

A handy feature, however, is it warns you if you are about to lose your changes. Great feature if you have spent 10 minutes styling up an element only to find you didn’t copy the CSS from Chrome.

Native inspectors with Firefox
Native inspectors with Firefox

 

The console is ok and has the addition of CSS errors and warnings but you may need to turn off CSS warnings because even on the default home of Firefox, there is 6 warnings and google.com has over 25 CSS warnings making it hard to find an actually problem.

The hidden gems in the Firebox’s inspector are in the top right hand corner. They are: 3D view, JavaScript scratchpad and Responsive design mode. The cube is 3D mode and the square with the dotted lines inside it is Responsive Design Mode or RDM.

Firefox additional options - native inspectors
Firefox additional options – native inspectors

 

I don’t often use the scratch pad but I love Responsive Design mode, I wish Chrome had something as easy to use and not just the website in side.

Responsive Design mode allows you to simply and easily resize a website to the desired size and also adds an elegant interface to tell you the px width and height as well as giving you a rotate option. This allows you to enjoy a full size inspector view while you debug your responsive site.

Responsive design mode with Firefox - native inspectors
Responsive design mode with Firefox – native inspectors

 

Learning about your inspector is an invaluable asset and is better than learning about 3rd party plugins because they are native to the browser. I think both of these inspectors are fantastic for fast and effective development but Firefox could have some simple tweaks to make it better for workflow. No matter which browser you use I think live editing in CSS is the future and I hope more people embrace this technique so browser inspectors start getting better and better.