6

I'm having trouble attaching a library using the new #attached mechanism in Drupal 8. Is there an easy way to debug and see which libraries Drupal is trying to load, and possibly, what goes wrong?

Motivation

In a form class, I'm returning a large render array. One of the elements has an #attached property:

$form['contact'] = array(
    '#type' => 'fieldset',
    '#title' => t('Contact'),
);
$form['contact']['#attached']['library'][] = 'my_module/contact';

In file my_module.libraries.yml:

contact:
  version: 1.x
  css:
    theme:
      css/contact.css: {}

I'm suspecting that contact.css is either not found, not loaded, or altogether ignored. Therefore I'd like to follow the process in which Drupal loads the library and integrates it into the page.

Improve this question
4
  • I know you're asking the general "how to debug", but I think it would be useful to see the code you're using if possible - just in case there's something about the context you're using it in that would change how you can debug it
    – Clive ♦
    Oct 2, 2015 at 18:45
  • Good point. I've added a bit of code now.
    – Hendrik
    Oct 2, 2015 at 23:29
  • Can someone add a general method of how to debug D8 library loading?
    – Felix Eve
    May 10, 2016 at 3:21
  • Look at the HTML source (right-click on the page and choose 'view source'), and see if your file is included. Note that you'll need to disable css aggregation first.
    – Jaypan
    Feb 16, 2021 at 18:27

3 Answers 3

Reset to default
6
+100

How to debug D8 library loading?
...Therefore I'd like to follow the process in which Drupal loads the library and integrates it into the page.

There some ways to attach a library (look here to see them), this make a bit hard, the task to create a debug workflow following each process.

...which libraries Drupal is trying to load, and possibly, what goes wrong?
...Can someone add a general method of how to debug D8 library loading?

Well, there are some ways to see what are attached, I know two options to 'debug'.

Option 1 (check libraries)

Use a function to inspect which library was attached in your page.

function module_page_attachments_alter(&$page) {
  $array_libraries = $page['#attached']['library']; //Use a breakpoint at this line to see libraries.
}

Attention: It is not safe to see all libraries, remember, any other module or theme can use this function too (and you don't know which is called for last), said that, use this option just to check libraries of your own module/theme if they are included, if not, you messed up (misspell, attach at wrong place), you need to check your 'attach' code.

Option 2 (check for files attached in a library)

First, like pointed by @cilefen, you must turn off CSS and js aggregation in performance config tab.

css_js_aggregation

Then you can check all CSS and js files at your browser.

For CSS is easier, they are organized in <head> tag:

css_group

All CSS files are grouped in by one <style> tag for each type of media. In this screen has three <style> group with media 'all', the first is base theme, the second is the core (admin bar stuff), and the last one is my theme. If you expand you will see all files:

CSS_expanded

For js, there two places, if you specified, you will find at <head> tag, if not they are all in end of your <body> tag.

js_files

Now,
- if you miss a file, check your library if is really defined your file;
- if not loaded (4xx, 5xx, responses to a file), check your file location;
- and make sure that you cleared the cache.

To keep on track of my libraries I just follow some rules.

  • When theming, I usually avoid add things in preprocess or other function, and attach all libraries in twig template.

Using this code: 

{{ attach_library('theme/library') }}
  • When creating a module, I just add essential code and always at end of build function and in a top level of $build var (just created a standard for me and always follow this rule).

This way is easier to find where is wrong.

Very important: Considering that you follow all rules of a .yml file and follow a schema for a library definition, sometimes its just tabs that your text edit insist to use, you indentation is wrong or you misspell something.

Improve this answer
1
  • You could add using a debugger like xdebug and breakpoints where to stop execution then dig deeper.. that's how I figured out that it wasn't a smart idea to have a module and a theme with the same name. Because in this function the module's libraries are always loaded first: api.drupal.org/api/drupal/…
    – dasj19
    Jul 13, 2019 at 2:26
2

I think you want:

$form['#attached']['library'][] = 'my_module/contact';

Improve this answer
2
  • Thanks. I think both variants actually work. I've found out now after a bit of tedious manual debugging. I guess my problem is that all that appears inside the HTML head is a number of generated style sheets with cryptic names like css_oDuBDUZU1ZGt7GdDBriGInbyQPew086-3681mzWCfWE.css. Searching through all of them, I can actually find my own code, but it took me a while to find out.
    – Hendrik
    Oct 7, 2015 at 13:56
  • 2
    Turn off CSS optimization on the performance configuration.
    – cilefen
    Oct 8, 2015 at 14:17
0

Just adding that my library did not add because my install profile was the same name as my theme. As soon as I updated the profile name, my library was applied globally.

Hopefully that saves people the time I wasted finding that out!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.