Web developer tools for Drupal 7

Web developer tools for Drupal 7

To create a simple website on Drupal 7, an administrative interface and a simple text editor will be enough, but when it comes to more serious projects, you cannot do without additional Drupal web developer tools and powerful code editors.

Tools used in Drupal web development can be divided into two types:

Drupal back-end development tools

In this chapter, we make an overview of the Devel module and learn to use it, as well as to configure Drupal coding standards. We will also make an overview of the modules and plugins that facilitate Drupal website development.


Devel is a module that significantly facilitates Drupal website development. The Devel module enables you to:

  • output information about variables in different formats
  • output the list of SQL queries performed during page generation
  • output information about the time spent on generating pages and memory usage
  • generate content
  • clean the cache
  • run PHP code from the admin panel
  • output information about all entities used on the site
  • output information from hook_menu about the current page;
  • show phpinfo ()
  • output information stored in the $ _SESSION variable of the current user
  • output information about all registered theming hooks, their preprocess and the function process
  • control variables created using variable_set ()
  • work with XHProf profiler

Debugging functions in Devel:

  • dpm ($var) - outputs information about a variable in the form of a system message using Krumo
  • dvm ($var) - outputs information about a variable in the form of a system message using var_dump ($ var)
  • dpr ($ var, $return = false) - outputs information about a variable on top of the page, using print_r ($ var, $ return)
  • dvr ($ var, $return = false) - outputs information about a variable using on top of the page var_dump ($ var, $ return)
  • kpr ($ var, $return = false) - outputs information about a variable on top of the page using Krumo
  • dargs() - displays information about the current function arguments on top of the page using Krumo
  • ddebug_backtrace() - outputs the function callback stack on top of the page using Krumo
  • db_queryd ($query, $args = array ()) - db_queryd () function - is a debug version of db_query () which, after running the $ query, displays it on top of the page.

Example of the dpm() function use:

dpm() function in Devel

Drupal For Firebug

Drupal developers can also facilitate their work by installing the Drupal For Firebug module. If you install this module and a plugin for Firefox, you can use the Devel capabilities in your Firebug. In my opinion, it is a very useful extension.

To display information about the variable in the Firebug, you should use the firep($var, $your_message) function.


Drupal For FirebugDrupal For Firebug

Drupal For Firebug

Sometimes developers who read someone’s else code feel as if they are in the jungle - to prevent this, you should always adhere to coding standards. It’s good that PhpStorm added the support for coding standards. The path to open the coding standard configuration is as follows: File->Settings->Code Style-> then choose the language for which you need to make settings. For Php, the settings window looks like this:

Support for coding standards in PHP

To format code according to coding standards, you need to choose the “Reformate code” menu item in the Code tab or use the keyboard shortcut CTRL+ALT+L. As a result, you will get a window like this:

Support for coding standards in PHP

After all these manipulations, this horror:

Support for coding standards in PHP

will become a human-readable code:

Support for coding standards in PHP

Code formatting can be done both for entire files and for selected file parts.


To test your modules for adherence to coding standards, you can use the Coder module. Coder checks the module files for compliance with coding standards and points to places where they are not adhered to.

For example, Coder comments to my theme:

Code module in Drupal

Coder shows the type of errors and where exactly there are found so you can quickly bring the code of your modules and themes into line with the coding standards and won’t be mocked at by users and your own colleagues.


Drush is a very useful utility for a Drupal web developer. Drush allows you to manage your site from the terminal. In order to install Drush, you need to install the pear library first. To do this, enter this command in the terminal window:

sudo apt-get install php-pear

Install Drush:

sudo pear channel-discover

sudo pear install drush/drush

Then check the installation:

sudo drush status

Here are the most useful Drush commands:

  • drush cc all - clearing all your site’s caches
  • drush dl module - drush dl module - command for loading the modules;
  • drush en module - command for enabling the modules
  • drush dis module - command for disabling the modules
  • drush sql-dump> /dump.sql - makes backup of the database
  • drush sql-cli < /dump.sql - restores dump on the website;
  • drush vget var_name - gets the variable value
  • drush vset var_name - sets the variable value.

Drupal Project Lookup

An extension for Chrome, Drupal Project Lookup, lets you quickly move to the Drupal project page from the address bar. To search for projects on, you need to enter dpl + project name in the browser address bar.

Drupal front-end development tools

Currently, there are many plugins and extensions for browsers used in Drupal front-end development. They significantly facilitate the work of front-end developers and mark-up designers.

First, let’s look at such browser extension as PerfectPixel. This extension lets you put an image overlay on your site. With PerfectPixel, there’s no need to blindly pick margins and paddings.

Another useful extension is Eye Dropper. This extension allows you to get the code of any web page element, as well as pick the color and get it hex code, and the code in the RGB and HSL palette.

Eye Dropper

Front-end developers and mark-up designers often have to check how their website looks on monitors of various resolutions. For a quick check on standard or special resolution, it is a good idea to use the Viewport Resizer extension.

Next on the list is a browser extension Page Ruler. It works like a real ruler that lets you measure the distance between the elements, their size.

To check the support of CSS options by browsers, you can use the Caniuse service.

Services for theming the form elements, creating animations and gradients:

  • Button Generator is a powerful tool that lets you create beautiful and stylish web buttons.
  • CSS Matic lets you generate gradients, borders.
  • CSS Animate lets you create CSS animation.

I hope this overview of modules and plugins for Drupal front-end and back-end development has been helpful to you. Facilitate your work with smart tools, follow Drupal coding standards and enjoy great results!

14 votes, Rating: 5

Read also


In Drupal web development, there are a number of things that can be done to ensure the superior user experience and...


Imagine all website issues solved in a blink of an eye - you can just sit in a comfortable chair, have a cup of coffee and enjoy reading nice news. Yes, it’s possible. It’s not magic...or maybe...


Any developer worth his salt will tell you that the success of a website will depend a lot on the software tools used to develop it. Not all tools used in...


Mobile application development is a relatively new area of Drupal development services, but it is advancing rapidly,...


Drupal module development offers us a lot of opportunities, and today I would like to tell you about a...

Subscribe to our blog updates