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.
Possibly the best thing to come out of Adobe since Photoshop 4, Adobe Edge makes mobile development simple. Here’s how it works:
- Install the Adobe Edge Inspect extension for Chrome.
- Install the Adobe Edge Inspect app on any mobile devices you have (iPhone, Android, etc.).
- Connect them all to the same Wi-Fi network.
- Go through a simple pairing process.
- 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!
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.
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?”
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.
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.
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.
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.
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.
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.
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.
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]