Google launches VisBug, a Chrome extension for point-and-click web design

At the Chrome Dev Summit that’s taking place today in San Francisco, Google announced a new developer tool called VisBug that simplifies the task of editing a web page using a simple point-and-click interface.

VisBug is currently available as a Chrome extension that can be installed from the main Chrome Web Store.

Google engineers likened it to Firebug, the now-defunct Firefox add-on that was ported to Chrome, and eventually inspired Chrome’s built-in Developer Tools panel.

VisBug is just like Firebug, but instead of letting developers tinker with a website’s source code, it lets every-day users move around a website’s elements using a point-and-click and drag-and-drop interface.

“We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself,” said Google today.

“Now […] we have another extension, Project Visbug, which allows you to design — right in the browser.”

ZDNet took VisBug for a test spin before this article’s publication.

After you install it, you have to press ALT+SHIFT+D to start it. The extension is only useful for editing already-made websites or templates. It cannot build a web page from scratch.

VisBug’s main interface is a toolbar that appears on the left side of a screen. You can use this toolbar’s controls to move page elements around, edit text, create sticky page elements, change a text’s colors, change an image’s hue, brightness, and saturation, and a few other things.

The extension is rather raw for the moment, still lacking many useful controls. For example, we edited a random site template but it wasn’t immediately clear to us how we could save the new site’s source code to a different file, so we can replace the current site with our new arrangement.

Sure, we could have pressed CTRL+U to view the page’s source code and copy the code from there, but VisBug should probably offer options to save the new HTML code to a separate file via a simple button.

Google engineers have been quite candid about VisBug’s limitations, in the extension’s GitHub README file, saying it’s not a full-on web design tool, but a “compliment” to existing tools.

It’s currently unclear where Google plans to take this project in the future.

In our assessment, VisBug’s features could be embedded inside Chrome’s Developer Tools, but as a tool to refine a website’s current design. For example, a web developer could use VisBug to make small visual tweaks using its drag-and-drop GUI instead of tweaking CSS settings in the current and very unfriendly Chrome Developer Tools interface.

More browser coverage:

READ MORE HERE