Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding the Devel module

From: Responsive Design with Drupal

Video: Understanding the Devel module

If you've been developing or designing in Drupal 7 for any length of time, then you may have come across a module called Devel. If not, you may have asked yourself if there was any way to see exactly what variables Drupal 7 outputs and how to best work with those values. To make theming easier for us, let's take a look at where to find the Devel Module and some of the best ways to use this module for our own needs. The Devel Module is located at drupal.org/project/devel, and is another staple for any Drupal developer needing a way for debugging their own Drupal sites.

Understanding the Devel module

If you've been developing or designing in Drupal 7 for any length of time, then you may have come across a module called Devel. If not, you may have asked yourself if there was any way to see exactly what variables Drupal 7 outputs and how to best work with those values. To make theming easier for us, let's take a look at where to find the Devel Module and some of the best ways to use this module for our own needs. The Devel Module is located at drupal.org/project/devel, and is another staple for any Drupal developer needing a way for debugging their own Drupal sites.

As part of the import of our fixed, adaptive, and responsive Drupal sites, I've taken care of the installation and enabling of this modules for you. So that we can take a look at the configuration of our site, you are going to need to first log in to the Drupal Instance we set up. Go ahead and tab back over to our site or go ahead and bring it up in the browser at drupal.fixed:8082/user and then go ahead and log in with the admin credentials. In this case, all lowercase, the word admin, the same for the Password, and then click on the Login button.

With the admin toolbar present, go ahead and navigate to Configuration > Development > Devel Settings. The Devel Module has numerous configuration settings that assist the Drupal designer or developer with a lot of information that you may not ever see otherwise. Such items as Query logs, page timers, memory usage, and page arrays. Let's see an example of that now. If I go ahead and click on the Display query log and then click on Save configuration, I see some options have been saved, but where is the information that I'm expecting to be seen? Let's scroll down at the bottom of the page, and I'll show you exactly where it's that.

We can see that 34 queries have been executed in 15.33 ms. And obviously, the number of queries in time doesn't have concern, what would be is if any of these queries were highlighted, that would indicate that there was something wrong with the database calls being made by Drupal. If I continue scrolling down, I do not see any highlighted areas. That's a good thing for us. Let me go ahead and turn this off for now and then click on the Save configuration button and quickly scroll down to make sure the information is no longer being displayed.

In most cases I use the Devel Module not from this interface, but actually from within templates, and Drupal functions when theming, the ability to see page, node, region, blocks, and even view variables that I can use to override or assist me with modifying the Drupal Instance output, makes the Devel Module something that I always make sure to install and configure within a Drupal Instance. In order to get a better idea how we would use this with theming, let's go ahead and tab over to our favorite Editor and then browse to the Drupal/drupal.fixed/sites folder, and inside of there we want to open the all/themes/responsive folder, which is the theme that we're currently using.

And in here you are seeing some different files that you may or may not have seen before. One is this template.php. This template.php has code that does a lot of overriding or hooks into or pre-processing or processing of the Drupal API and the output that it is displaying for us. We have the ability to, as a Drupal themer, manipulate all these variables. If I go ahead and expand the Includes folder and take a look at, for instance, the process_include and then look for the specific function called responsive_process_region, I can see a function here that's been commented out.

This is the KPR function, and this is a function that's built into the Devel Module. So even though I'm currently not having anything enabled from the admin interface, I do have ability to still use Devel to output information to the page. Let's see what happens when I uncomment this, save it, and then tab back over to our browser and go to the homepage. I'm now seeing some areas with some different content. Since we're dealing with the regions inside of Drupal, I can see that these are actually printing out page bottom, toolbar, branding, slider.

If I tab back to over to our Editor, comment this out and save it and then scroll down a little bit to the responsive_process_page function, and then uncomment the KPR function here, and then save it and then tab back over to our browser and refresh, I'm now seeing even more information available to us. If I actually expand this array, I can see that there is are tons of variables that if I wasn't using this function, I may not know it existed or that I actually had the ability to use these or manipulate these when it comes to Responsive Design.

So that we don't display this information on every page, let's tab back to over to our editor, comment out that function again, save the page, and then refresh it in the browser. Now we're back to where we were before. While there are many features that the Devel Module provides us, the ability to output Drupal variables is the most useful. Now that we've walked through how to configure and use the Devel Module for our theming needs, it's time to move on to discussing what responsive and adaptive design is and the workflow involved in Drupal 7 Responsive Design.

Show transcript

This video is part of

Image for Responsive Design with Drupal
Responsive Design with Drupal

35 video lessons · 7048 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 3m 19s
    1. Welcome
      51s
    2. Using the exercise files
      1m 25s
    3. Exploring the finished project
      1m 3s
  2. 16m 30s
    1. Installing Acquia Dev Desktop
      3m 37s
    2. Importing a Drupal website
      4m 7s
    3. Restoring database snapshots with the Backup and Migrate module
      3m 13s
    4. Understanding the Devel module
      5m 33s
  3. 5m 48s
    1. What is responsive design?
      3m 32s
    2. Understanding adaptive design
      2m 16s
  4. 15m 33s
    1. Discovering fixed-width layouts
      3m 47s
    2. Understanding breakpoints
      3m 33s
    3. Using Adapt.js with Drupal
      8m 13s
  5. 27m 21s
    1. Discovering fluid layouts
      3m 43s
    2. Exploring fluid widths
      8m 34s
    3. Working with fluid margins and padding
      7m 41s
    4. Making text fluid
      7m 23s
  6. 16m 37s
    1. Discovering fluid images
      3m 5s
    2. Exploring fluid image techniques
      5m 6s
    3. Working with fluid media techniques
      8m 26s
  7. 21m 36s
    1. Introduction to media queries
      3m 2s
    2. Writing our first media query
      6m 10s
    3. Creating a style sheet for each breakpoint
      3m 53s
    4. Understanding media query best practices
      8m 31s
  8. 8m 14s
    1. Introduction to responsive menus
      2m 32s
    2. Creating a responsive menu
      3m 5s
    3. Integrating responsive menus into Drupal
      2m 37s
  9. 14m 52s
    1. Introduction to responsive tables
      1m 25s
    2. Creating responsive tables
      7m 30s
    3. Integrating responsive tables into Drupal
      5m 57s
  10. 21m 6s
    1. Introduction to responsive forms
      3m 9s
    2. Creating responsive forms
      8m 30s
    3. Integrating responsive forms into Drupal
      9m 27s
  11. 6m 38s
    1. Adding min-width and max-width support with Respond.js
      2m 35s
    2. Exploring context-aware image sizing
      4m 3s
  12. 1m 11s
    1. Next steps
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Responsive Design with Drupal.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.