My favorite tips and tricks -- part 2: Chrome

Author:

Parent Feed:

For awhile now, Chrome has been my browser of choice for web development. It's fast, elegant and customizable. Over the years, there have been some great tricks and customizations that save time, make things easier, and even more pretty.

Chrome Custom Search

Chrome has the ability to set up a custom "search engine" so that by typing a few letters in the address bar, you can perform a search at the address that you configure. Set this up by clicking the wrench in the upper right, choosing "Settings" and then clicking the "manage search engines" button. I've got several of these set up:

"mod" (short for module) allows me to search through all modules on drupal.org. The actual configuration in Chrome is "http://drupal.org/project/%s", where %s stands for the module name.

"api" searches the drupal 7 api site: "http://api.drupal.org/api/search/7/%s"

"api6" searches the drupal 6 api: "http://api.drupal.org/api/search/6/%s"

"fapi6" Drupal 6 Form API reference. The %s part of this adds a link id to the end of the url: "http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.ht..."

"apic" searches drupalcontrib.org for (D7) contrib modules' functions: "http://drupalcontrib.org/apis/%s"

Chrome CSS customizations

Call me shallow, but I like cool colors on my laptop. I use the Molokai color scheme in my vim editor. I just like the way it looks. And since I'm inspecting things all the time using Chrome's Element Inspector, might as well make that look cool, too, right? Check this out! Very chic.

While we're at it, move those pesky checkboxes next to each css attribute/value pair over to the left, like Firebug does. Add this to Chrome's Custom.css file (I'm actually not sure whether this has been fixed in Chrome proper -- I added it over a year and a half ago):

.styles-section .properties .enabled-button {
position: absolute !important;
left: 5px;
margin: 2px 0 0 0 !important;
}

Lorem ipsum toolbar button

Anonymous browsing

Use the Browse anonymously window to test the site as an anonymous user. A lot of times, I use Firefox, Safari or Opera as well as Chrome to test out a site from multiple users' perspectives. Each browser stores its own cookies, so I can be logged in as 4 different users at the same time. This is handy when running through workflow processes that require multiple user roles, like moderation of comments or posts. But if you just want to check something out as an anonymous user really quick, it's as easy as Shift-Command-N to pop open an anonymous window. Or right-click a link and choose "Open link in incognito window". Bam! Anonymous!