Visual Inspector — Web designers’ rescue from digging in codes

Free Chrome extension for design community to inspect/edit live websites

[Edit: Already used Visual Inspector? Vote for your favorite feature in Visual Inspector — https://twitter.com/CanvasFlip/status/908965701041324033]

We believe that every craftsman deserve best tools to make world a better place.

That’s why we built “ Visual Inspector for designers”, an alternative of browser’s native dev tools, so that designers don’t have to dig into code and focus on things that matter more — designing UIs, running user interviews, researches, friends & family.

It’s been about 2-weeks since we made Visual Inspector available in public beta and there’s has been over 16,000 downloads, over 200,000 websites inspected/edited and overwhelming love from design community.

Wow, Visual Inspector is my new favorite Chrome extension

How did we get the idea?

It was simple — every time a web project went live, our design team had to dig-into complex code to communicate what changes are they referring to.

Yes, those advance in-browser “Dev tools” used to be good but those are NOT built for you — and everything differs. Terminologies differ, approach to use case and accessibility differs and you take time to get adjusted to the new environment which was NOT built keeping you in mind.

We had this exact same problem in our team — how do we enable our designers to make quick changes in the websites?

Our designers were not comfortable with “devtools” in Chrome/safari but they loved making design changes in Sketch (of course!!)— text stylings, gradients, quick fix on positionings, you name it.

Quite recently we had built a design/dev collaboration tool — SPECS within CanvasFlip and then it flashed — if designer could do the editing on the live pages in same way, it could solve the problem.

So we built a sketch-like panel in the web! Sounds strange?

Sharing a secret with you…

Yes, we built a Chrome extension with panel of a design tool (We call it Visual Inspector) and started using it internally. We had no intention of making it publicly available.

It was during our customer demos when, some of the teams noticed it and started asking for it. And, we saw over 1500% week on week increase in use of Visual Inspector.

Pretty soon, we shared it with few other teams — Freshdesk, @Magicbricks to name a few. And, the response was overwhelming. Most of these teams stopped using native “dev tools” completely.

We decided to make a public version of the Visual Inspector which tooks 56 hours of user interviews, 38 hours of design & over 140 hours of development effort to understand what does our users expect from such a tool and then bring it to the product.

Launching public beta

Around 2 weeks ago, we made our Chrome extension public and it has been downloaded by 16,000 users, over 1,73,000 sites inspected/edited and featured by most of the popular tech & design forums — TNW, Coliss, Reddit.

But we were super excited on how it made lives easier for other web-designers around the globe:

+ hundreds of other tweets everyday.

“Why?” — you ask.

Because Visual inspector makes it possible for designers to show his ideas without struggling with codes or asking favor from their nerdy tech colleagues.

And it does that with the ease you have never experienced before ( Have a sneak peek below:)

Quick 60-second introduction of Visual Inspector

What does it do — today!

As of now, Visual Inspector is available in public beta and allows you to:

  • Inspect and Change all design properties like position, font, opacity, colours, gradient, typography

Edit website text inline.

  • Measure distance between web-elements
Measure distance between web-elements
  • Export assets from the page

Future of Visual Inspector

Ever since we shared Visual Inspector with design community, there’s been so many suggestions on how can it make web designer’s life better.

We make daily, weekly and monthly updates to the plugin based on the severity of the updates — Fixes goes live on daily basis, small changes over the weekend and finally, every month a new feature/design is made live.

While evaluating as per our limited resources (We are a very small team) we have prioritized certain feedback for next version:

  • Saving design changes in local system or on-cloud: Obviously, this was most expected update we have in hand. Most teams want to save the changes locally or over cloud to collaborate it with other stakeholders.
  • Download CSS for changes: This was planned for first release but we kept it on hold to keep the tool simple. This should be among first to go-live in Visual Inspector ( Thanks a lot @Noel for point it out for us.. :)
  • Export Sketch editable versions of websites: Imagine, if you could save one of your old websites and you don’t have the Sketch files. Instead of re-creating Sketch files from scratch, you can now convert the web-pages directly into editable Sketch files. Yes! It’s possible. Stay tuned for more updates.
  • Anything else? If you are among 16,000 web designers who use Visual Inspector daily, let us know you what would like us to build next in Visual Inspector.

How to get Visual Inspector

Looking to try Visual Inspector? Here’s download link —

https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

Official website link — https://canvasflip.com/visual-inspector/

We have decided to keep CanvasFlip “free forever” for design community as a small payback for all the love and support we have got from our awesome users.

Let’s make world a better place by designing better experience for your users.

Get Visual Inspector — Free Chrome plugin for designers to Inspect/Design live web pages

[P.S. It takes lots of effort to build and maintain free stuff for design community . One of the ways you can help Visual Inspector is to grow organically by sharing it with your friends on Twitter. If you see value in using Visual Inspector, would you like to — Spread the love? ]