How to debug D8 library loading? 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' =&gt; 'fieldset',
    '#title' =&gt; 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.
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(&amp;$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.



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

For CSS is easier, they are organized in &lt;head&gt; tag:



All CSS files are grouped in by one &lt;style&gt; tag for each type of media. In this screen has three &lt;style&gt; 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:



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



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.