Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Helpful browser extensions for Drupal theming

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:08
    In this chapter, we're going to cover some helpful tools for themers.
  • 0:12
    Specifically, the Web Developer toolbar and Firebug,
  • 0:16
    which are add-ons for Firefox
  • 0:18
    and the equivalent for web browsers like Chrome.
  • 0:21
    So the first one I want to show you is the add-on Web Developer toolbar,
  • 0:25
    and you can see that right here below my address bar.
  • 0:29
    It gives you an entire row of options
  • 0:32
    that are also accessible by your right-click.
  • 0:35
    So when you go into right-click, you get the Web Developer pop-up,
  • 0:38
    which gives you all the same information.

Helpful Browser Extensions for Drupal Theming


This chapter covers some really handy browser extensions in the process of theming. For Firefox, there's the Web Developer Toolbar for turning off and on JavaScript, resizing the browser window to different sizes, and inspecting elements. It also has the capability to test changes to CSS files in a format that is easy to copy and paste into the source file. We also show off the basics of the popular Firebug extension, and the equivalent functionality that is now built in to webkit-based browsers such as Safari and Chrome.

Additional resources: