Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

My favorite tips and tricks -- part 2: Chrome

Parent Feed: 
OpenSourcery

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!

    Dreditor

    This isn't exactly a "Chrome" thing, but all you Drupalistas and Drupaleros need to know about it! Check it out NOW!

    Thanks for reading. Next week I think I'll move on to Git.

    • Author: 
    jessehs
    RSS Tags: 
    Drupal Planet
    Google Chrome
    Tips and Tricks
    Tools of the Trade
    Original Post: 
    http://www.opensourcery.com/blog/jessehs/my-favorite-tips-and-tricks-part-2-chrome

    About Drupal Sun

    Drupal Sun is an Evolving Web project. It allows you to:

    • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
    • Facet based on tags, author, or feed
    • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
    • View the entire article text inline, or in the context of the site where it was created

    See the blog post at Evolving Web

    Evolving Web