[META] twig debug can break parts of site

I'm wondering whether we could fix all those issues by somehow just add twig theme suggestions when we actually render HTML.

Not sure how this would be possible, but trying can't hurt :)

I had this issue come up with the Views TimelineJS module this week. The module's Views plugin outputs a JSON object containing the timeline's data to drupalSettings. When Twig debugging is enabled it outputs the debugging info for the data fields into that JSON object, breaking parts of the timeline. A link to that issue is listed here under the "Referenced By" section above.

Ignore my response please. (Wish I could delete this comment...)

@jwilson3 The issue you added was already 2nd in the list.

Whoops! Thanks for catching that and the cleanup

Chiming in here and adding another case where this causes problems: #3363487: newline on glossify-link.html.twig causes extra space.
I also had this in a custom theme when checking whether a field is empty (which it was, but not when the debug code inserts newlines).

This does not only cause problems in non-HTML output as the RSS output might imply.

All of my problems got fixed by the following patch and I think it does more good than bad, so I think it could be included in core.

Current firefox and chromium add newlines to comments in developer tools anyway, so this does not really cause any disadvantage for developers, I think, and it really fixes problems on a lot of places (in my case).

Applies against Drupal 10.1

--- /core/themes/engines/twig/twig.engine.org   2024-05-08 16:37:50.990994524 +0000
+++ /core/themes/engines/twig/twig.engine   2024-05-08 16:38:47.900186459 +0000
@@ -63,8 +63,8 @@
     throw $e;
   }
   if ($twig_service->isDebug()) {
-    $output['debug_prefix'] .= "\n\n<!-- THEME DEBUG -->";
-    $output['debug_prefix'] .= "\n<!-- THEME HOOK: '" . Html::escape($variables['theme_hook_original']) . "' -->";
+    $output['debug_prefix'] .= "<!-- THEME DEBUG -->";
+    $output['debug_prefix'] .= "<!-- THEME HOOK: '" . Html::escape($variables['theme_hook_original']) . "' -->";
     // If there are theme suggestions, reverse the array so more specific
     // suggestions are shown first.
     if (!empty($variables['theme_hook_suggestions'])) {
@@ -106,17 +106,17 @@
         $prefix = ($template == $current_template) ? 'x' : '*';
         $suggestion = $prefix . ' ' . $template;
       }
-      $output['debug_info'] .= "\n<!-- FILE NAME SUGGESTIONS:\n   " . Html::escape(implode("\n   ", $suggestions)) . "\n-->";
+      $output['debug_info'] .= "<!-- FILE NAME SUGGESTIONS:\n   " . Html::escape(implode("\n   ", $suggestions)) . "-->";

       if (!empty($invalid_suggestions)) {
-        $output['debug_info'] .= "\n<!-- INVALID FILE NAME SUGGESTIONS:";
-        $output['debug_info'] .= "\n   See https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/function/hook_theme_suggestions_alter";
-        $output['debug_info'] .= "\n   " . Html::escape(implode("\n   ", $invalid_suggestions));
-        $output['debug_info'] .= "\n-->";
+        $output['debug_info'] .= "<!-- INVALID FILE NAME SUGGESTIONS:";
+        $output['debug_info'] .= "   See https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/function/hook_theme_suggestions_alter";
+        $output['debug_info'] .= "   " . Html::escape(implode("\n   ", $invalid_suggestions));
+        $output['debug_info'] .= "-->";
       }
     }
-    $output['debug_info']   .= "\n<!-- BEGIN OUTPUT from '" . Html::escape($template_file) . "' -->\n";
-    $output['debug_suffix'] .= "\n<!-- END OUTPUT from '" . Html::escape($template_file) . "' -->\n\n";
+    $output['debug_info']   .= "<!-- BEGIN OUTPUT from '" . Html::escape($template_file) . "' -->";
+    $output['debug_suffix'] .= "<!-- END OUTPUT from '" . Html::escape($template_file) . "' -->";
   }
   // This output has already been rendered and is therefore considered safe.
   return Markup::create(implode('', $output));

I suggest adding #3563677: Twig debug can influence rendering visually due to whitespace between tags as a child to this issue. It implements a fix similar to the one suggested in #23, implements a new test, and updates existing tests.

I could not find a clear duplicate issue, but please update the issue if you do.