09.07.2026 | Holger Weischenberg

Hide HTML comments in Chrome and Firefox browser inspector

Image showing various settings options in a developer tools interface.

Issue:

Long HTML comments disturb the developer while debugging the HTML structure.

An example:

dom.html

<main role="main">
    <a id="main-content" tabindex="-1"></a>
    <div class="layout-content">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   ▪️ region--content.html.twig
   ✅ region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/classy/templates/layout/region.html.twig' -->
  <div class="region region-content">
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   ▪️ block--ef10-messages.html.twig
   ✅ block--system-messages-block.html.twig
   ▪️ block--system.html.twig
   ▪️ block.html.twig
-->

Solution:

Chrome and other Chromium-based browsers

provide an option to hide comments in the Elements panel. Open the Inspector and click on Settings. Then scroll down to the Elements section. Uncheck the “show HTML comments” option.

1. Open the browser's Developer Tools:

Press F12, or
Press Ctrl + Shift + I (Windows/Linux), or
Right-click an element and select Inspect.

2. Open the DevTools settings:

Click the Settings (⚙) icon in the DevTools toolbar.
The Settings icon is located near the upper-right corner of DevTools, immediately to the left of the three-dot menu.

3. In the Preferences tab, scroll down to the Elements section.

4. Clear the Show HTML comments checkbox. (as shown in the screenshot above)

5. Close the Settings panel.

HTML comments () are now hidden in the Elements panel, making the DOM tree easier to navigate and debug. To display comments again, re-enable the Show HTML comments option.

Firefox

Recent Firefox versions provide a similar setting in the Inspector. If the option is not available in your Firefox installation, update to the latest version.

Zurück zur DevBit-Übersicht

Weitere DevBits

13.11.2025 | Lothar Ferreira Neumann

Use ternary statements in Twig

ternary-example.html.twig

{# Checks if a URL exists and passes it to the component. Otherwise, sets it to false. Works with primitive data types. #}
{% set link = url ? { url: url } : false %}

{# Checks if the media object is not empty and passes it to the component. Otherwise, sets it to false. Suitable for complex data types like objects. #}
{% set media = media is not empty ? { media: media } : false %}

html

twig

ternary operators

13.11.2025 | Lothar Ferreira Neumann

How to place HTML elements into webforms via the Source tab

You can add headlines to a webform using the code below. To get to the source section, navigate to the form you want to alter, click on build and then on the source tab like in the screenshot.

Screenshot of the menu to add code to webform

This is just a short example on how to add a headline.

webform_headline.yml

personal_data:
  '#type': html_tag
  '#tag': h3
  '#value': 'Personal data'

It will look something like this:

yml

html

manipulating forms

backend