In the beginning...
First thing first. I am not the most prolific coder out there. And code is not my strong area. I am more of a designer. And yes ! I am very lazy too ( evil smirk ).I have been using Chrome DevTools for long but to be honest the interface is not very friendly to the average developer. The UI looks outdated when compared to Firefox Developer Edition.Sure, it has lots of features and that’s fortunately or unfortunately its strength and weakness at the same time. In short, its an overkill for most tasks. While an experienced developer may find the feature(s) that suited his needs ( if he digs around the unwieldy mess of codes features , that is ) an average developer/designer will get lost in the myriad features it has.
Rolling on to Firefox....
The next in line was Firefox Developer Edition. Actually I liked the UI and it was visually pleasing to work around. Yet it also suffered from the same “ overload syndrome ”
..to the Visual Inspector
I am more of a designer than a coder.Coding is hard for me. And on top of that I am a very lazy man. Making changes to the website design ( I use WordPress CMS as my tool of choice ) as per the requirements from my client is a time-consuming work. And for a poor developer like me time is a scarce resource.And an impatient and lazy person like me who is hard-pressed for time , I need a simple yet effective solution that would free up my time, my efforts and maybe save my sanity. That’s when I chanced upon Visual Inspector Chrome extension by CanvasFlip.
The first thing I did after installing it was to change the copy of a serious looking website to a funny message. I could not help but let out an evil mischievous grin !
After digging around some more I found some real world use case for this little but effective tool.
With Visual Inspector tool I can click on the ‘Typography’ tab and instantly check which fonts that particular website is using along with the size, alignment , line-height,letter-spacing for each font used in the page in a visually pleasing and uncluttered view. You can click around in the ‘Colors’ tab and see the entire color palette of that page and the corresponding hex values associated with the colors . But the best thing I like about the extension is the CSS Output tab. This, I think , is he most uesful feature for designers. You can make live changes to the webpage CSS and export them. And there is this super user-friendly inspect tab using which you can easily export in JPG or PNG format.[
I like the way Visual Inspector allows me to apply transformations and resize objects.As I said in the beginning we can change the copy on the fly make necessary changes to the color palette and I think this will be very handy in quickly mocking up a website demo for demonstrating to clients.
And for those teams who work remotely , it is an excellent collaborative tool where they can annotate and share the changes . Real time visualization and communication between teams are also possible. You can also integrate many existing productivity and collaborative tools.