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.
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:
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.
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.
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.
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.
Network tab is great for finding loading order and how many ‘http’ request your site is making.
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.
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.
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.
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.
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.
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.
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.
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.