Google Chrome’s
popularity is rising, but while web designers are
likely to be among the earliest adopters of new web
technology, they’re not likely to make a dramatic
change to their workflow and toolset by switching
browsers completely until they’re confident all the
features they need are available.
Since Chrome’s extension support launched, the
browser has become a much more viable tool for web
design and development. Whether it can replace
Firefox() or not depends on your personal
preferences and needs, but you won’t know until you
try. That’s why we’ve spoken with experienced web
design professionals about Chrome() to compile this
list of extensions that will help you make the
transition.
We’ve included some of
the designers’ favorites below, along with their
comments on what makes these extensions useful. Do
you have some other helpful extensions in mind?
Share them with us in the comments.
This extension was far
and away the most frequently recommended during our
talks with experienced web designers. POSTSCRIPT5
owner
Grace Smith explained it this way: “Firebug Lite
allows you to inspect the HTML, CSS and Javascript
code live in any page, You’re also able to edit the
code and test the new changes immediately.”
Firebug was originally a
Firefox extension, and the Chrome version came
later. “While not as advanced as its Firefox
counterpart, it’s perfectly suited for doing basic
inspection of elements,” said Smith.
Speed Tracer records how
much time your web app spends on various tasks and
tries to figure out where the bottlenecks in
performance are. You can use that information to
speed up the user experience. The extension can tell
you how much time the browser is spending
interpreting JavaScript, for example.
The downside to Speed
Tracer is that it’s a little complicated and
unwieldy to use. For example, you have to run the
browser with the command line flag
“–enable-extension-timeline-api.” On that subject,
Web Developer Toolbar creator
Chris Pederick said, “It’s a little overwhelming
at first and I’m still learning how to use it, but
with performance continuing to be an important
factor in developing sites it’s a great tool.”
You can use this
extension to select any area of the visible screen —
either a custom space or the entire web page — to
export to an image file.You can also share the
screenshot to Pixlr imm.i
or modify it in Pixlr’s editor. It’s a good tool for
analyzing your own work or admiring the work of
others.
The features are neat,
but the main draw is speed. Design Informer editor
Jad Limcaco called it “very useful, especially
when you need to screenshot something very quickly.”
With EyeDropper, you can
identify any color on a website you’re viewing. It
comes with a color picker tool that will tell you
the pixel’s HTML color code and RGB levels. Once
you’ve picked a color you’ll also see where it
belongs on the included color wheel.
Grace Smith describes
this one as “a simple color picker which allows you
to select any area on a web page to see what color
is being used.” The boon for your workflow: “It can
certainly save some of those regular trips to
Photoshop!”
Picnik could be
described as an alternative to Pixlr Grabber since
it helps you capture images from a website and edit
them on the fly, but it’s different enough that it
merits a separate mention. Picnik doesn’t just make
an image from a defined space on the web page; it
lets you isolate and edit any existing image on the
page. The editing tools are easy to use, but they’re
obviously not as powerful as something like
Photoshop.
C3M Digital President
Chris Olbekson advocated Picnik to us. “I used
Picnic for Chrome to capture and edit images in the
browser,” he said. “I also use it for taking screen
shots of web pages I am designing to keep track of
revisions for my clients.”
Picnik was recently
acquired by Google.
Web Developer Toolbar
was originally a popular Firefox extension, but it’s
available for Chrome now, too. It does a myriad of
things with CSS, HTML, forms, and images. You just
click a button in the top-right corner of the
browser to view all the options. Consider it a jack
of all trades extension; you can view CSS or disable
CSS styles, resize things and more.
Chris Pederick created
Web Developer Toolbar for Firefox, and he’s working
on the Chrome version now. “It’s still in the early
stages of development, but it’s a good start to move
some of the features from the Firefox version of the
plugin over to Chrome,” he admitted. “I’m working on
the next release right now in fact which will
include the ‘Edit CSS’ functionality.”
Use this extension to
create random, dummy text on the fly so you can fill
out your designs and get a sense for the aesthetics
when no copy has been written for the site yet. It
just takes a couple clicks, and it’s not complicated
at all. Grace Smith called the Lorem Ipsum Generator
“a web designer’s favorite filler.” She also said
that “it’s uncomplicated, minimalist and isn’t
memory hungry.”
Pendule
is a pop-up control panel loaded with tasks helpful
to designers. Like the Web Developer Toolbar, it can
serve as a catch-all extension for web designers.
Jad Limcaco called this one “a very powerful tool”
that “lets you do a myriad of things.” A few of its
notable features: a pixel ruler, an eye dropper, a
color picker, and several script validators. You can
also use it to reload or disable CSS, view
JavaScript and hide images.
