Visual Inspector 2.0 — Make changes to live website without coding and export as CSS
What’s in-browser design?
If you are pixel-obsessed perfectionist product designer who get stuck in explaining on pixel perfect design changes on live website — you would often find yourself struggling with browser’s native dev tools to make temporary changes in the webpage and communicate it to other stakeholders.
But Visual inspector is your rescue from painful in-browser designing giving designer a delightful way to edit text & design properties without digging in codes.
Visual Inspector is designers’ alternative to native dev tools for in-browser design. — The Next Web
We launched Visual Inspector few week ago and it has been used by over 25,000 designers have edited over half million web pages (690,000 ) in 73 countries.
If you haven’t tried Visual Inspector before, Checkout what’s all the fuss about.
Or, Have a look at this 1-min video on why it went viral in design community:
For those, who tried Visual Inspector — thank you so much all the love❤ !!
With that there’s been so many new feature requests — toggling elements, saving changes locally, on-cloud sync, collaboration and what not. And as promised, we have accommodated most of the update in our recent release.
Here’s a quick update on what changed last-night:
1. Save your changes to the website automatically
Imagine all your awesome ideas that you had on the recently gone website. Now instead of downloading the changes as PNG, you can save the changes locally.
All the changes are saved automatically, so you don’t have to put extra effort.
2. Load changes from the previous session or start fresh
You can open Visual Inspector on the previously editing website to visualize all previously saved changes and start right from where you left.
Once you have made the changes, you can show it to all stakeholders.
(Just between you and me, pretty soon you’ll be able to save these changes on cloud and send it to stakeholders remotely for real-time collaboration.)
If you don’t like the changes, you can clear the off in single click.
3. Apply changes to all matching elements in the page
4. Export changes as CSS
You can save all the design changes as CSS to be shared with your designers friend.
They’ll love you for it… :)
Even more helpful, if you are lone warrior doing design/development, both.
5. As well as all the text changes
Text changes are available as well, of course.
6. Edit Margin/Padding of the element
Now you can also edit margin and padding of the element from the blue box modal of the selected element.
What’s next?
We are working on a mission to make world free of design issues.
We believe this can be achieved by making it easier for designers to edit design changes and letting them collaborate it with stakeholders.
This includes enabling comments in the web page to highlight changes and share it with other stakeholders. These stakeholders will be able to review and approve these changes. Other changes include:
- Adding comment in the page element
- Share the changes via a link
- A dashboard to manage all the changes
- Save multiple versions for the same page
- Support for multiple views — Desktop, Wide Desktop, mobile, tablet etc.
Join exclusive beta club by letting us know what do you think about Visual Inspector — https://canvasflipsurvey.typeform.com/to/yfgwsO
That’s all folks!!
If you are looking to try Visual Inspector, here’s the direct download link — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en
And, the official website — https://www.canvasflip.com/visual-inspector/
Don’t miss an update — Follow us on Twitter (@CanvasFlip).
Hit me up on manish@canvasflip.com and let me know how did you like the changes. Not to say, keep spreading the love ❤…!!
