Chrome Extensions Developers Can’t Live Without

Chrome has become the developer browser of choice. With that in mind, we put together a collection of tips, tricks, extensions, and tools for Google’s browser that every web developer can use today.

Chrome Extensions Developers Can’t Live Without

There is a reason why Chrome is the default developer browser. When compared to the lagging Internet Explorer or Firefox, Chrome is accelerating ahead with every update. It’s fast, has a large developer community creating extensions, an amazing number of developer tools out of the box, and it’s based on WebKit, which dominates the mobile browsers. Here are a few of my personal favorite tools for developing with Chrome.


Six Crucial Developer Extensions

1. Adobe Edge Inspect

Possibly the best thing to come out of Adobe since Photoshop 4, Adobe Edge makes mobile development simple. Here’s how it works:

  1. Install the Adobe Edge Inspect extension for Chrome.
  2. Install the Adobe Edge Inspect app on any mobile devices you have (iPhone, Android, etc.).
  3. Connect them all to the same Wi-Fi network.
  4. Go through a simple pairing process.
  5. Visit any page in Chrome and all your connected mobile devices will go to the same page.

No more typing in long URLs on your phone. No more emailing yourself that long link. Just launch Adobe Edge Inspect and use the time you gain for more coding!

2. Live Stylesheets

Live Stylesheets lets you view and edit the raw CSS. As an added bonus it has a “Prettify” button which makes any optimized CSS human-readable. Like the built-in Google Developer tools, the changes you make show up instantly.

3. Built With

As the name implies, Built With will give you as much information as it can reasonably skim off a given website. IIS or Apache? Drupal or WordPress? Is Google Analytics installed? These questions are easily answered with one click, so you won’t have to waste any time the next time you find yourself asking “how did they build this awesome site?”

4. Screen Capture

Built by Google, this lets you take a screenshot of an entire page, which is super helpful for tall pages. Because it’s taking a shot of the page it will show it as YOU see it, so it can also screenshot logged-in pages. Like many Google apps it’s a little buggy, but better than most others out there.

5. Platform-specific plugins

There are number of platform-specific plugins ranging from a Drupal plugin to PHP Console. While the usefulness and quality of these vary, it’s certainly worth a little bit of time to find out if your development workflow could benefit from a plugin built for the language or platform you’re working with.

6. Quick Search

Okay, this one’s not strictly for developers, but it sure saves me lot of time searching for code examples. It allows you to quickly search your favorite sites directly from the URL bar using self-defined shortcuts (I use “a” to search Amazon and “w” to search our company Wiki). Go to the preferences menu and click on “Manage search engines…” to take control of your searching.

Don’t Forget The Built-In Tools

There are lots of great extensions out there, but it’s worth remembering that Chrome actually ships with a best-in-class suite of developer tools that blows every other browser out of the water. Here’s what I use on a regular basis during development.

Visual Code Inspector

The built-in “inspector” lets you view the DOM of your website, letting you see the HTML structure and CSS on your page:

Using the inspector (which can either be docked to the bottom of your window or detached and made free-floating) you can easily see which element is causing that annoying bit of extra padding and why it thinks a particular element’s font size should be 12px. You can also make changes on the fly and see your changes in real-time, meaning you don’t need to edit code, restart your dev server, and refresh the page to make UI changes. There’s a magnifying glass on the bottom which lets you point to any element on the screen and select it, or you can simply right-click on any element of your page and bring up the inspector.


Why so slow? Use the Network Tool

Trying to debug speed issues? The “network” tool shows you how long each element on your page is taking to load. Different types of elements are color coded differently (in the example below you see blue for PHP, orange for Javascript, green for CSS, and purple for images). In addition, the bar shows at a glance how much time is spent waiting for the server vs. receiving data.

In the example above, all the elements loaded in less than 1.2 seconds. Drupal (PHP) loaded in 82ms from start to finish. The slowest spots were the Javascript, CSS, and the images. The example above shows that connecting to the server and waiting for a reply on one piece of JavaScript took 346ms even though the file itself was tiny and that only took 4ms to load.

It’s not uncommon with a slow-loading page to find one or two resources that are dragging down the entire page. When Google Analytics first came out, the script was famous for loading slowly and, depending on where it was called, dragging down the entire site. By identifying these elements and focusing on them you are able to spend your time on the biggest issues instead of spending your time guessing.

Incognito to Emulate Multiple Users

Built for online banking (and often called “porn mode”), Incognito has become a web developer’s best friend. No longer are you forced to logout of your CMS or swap to another browser or profile to check permissions or take a look at public views of HTML/CSS templates. Instead, just open a new Incognito window (Command-Shift-N for Mac or Control-Shift-N for Windows) and emulate a logged-out user, or even temporarily login as a non-admin user.

It’s A Good Time To Be A Developer

We’ve come a long way since Chris Pederick first came out with his Web Developer Tools for Firefox in 2003. What used to require a browser extension is now baked right into our web browsers, and the extensions we have at our fingertips give us more and more power every year.

If you have a Chrome extension you can’t live without that’s not mentioned here, tell me about it in the comments or on Twitter.


[Image: Flickr user LadyDragonfly]

About the author

Co-founder of web and software development firm Gravity Switch, Jason consults with companies around the world and gives talks on topics such as web development, mobile development, usability, graphic design, and agile project management. In a past life he got to create the curriculum and teach in the first ever internet strategy degree program