How to add the twig debug extension
Turn on Twig debugging by:

Copy sites/example.settings.local.php and rename to sites/default/settings.local.php

Go to sites/default/settings.php and uncomment the code below the comment relating to "Local development override configuration" and save the file.

if (file_exists(__DIR__ . '/settings.local.php')) {
  include __DIR__ . '/settings.local.php';
}


Open sites/development.services.yml in a text editor and add the following to the bottom of the file and then save the file

  parameters:
    twig.config:
      debug: true
      auto_reload: true
      cache: false


Note: use two spaces for each indent. Twig can be fussy with this.

The debugging will be visible as html comments in the source code. Use Chrome or other developer tools to inspect.

If you want to inspect the data structure of variables in a speciifc template, install Devel module and enable Devel and Devel Kint and then add this in your template:

# to dump everything
{{ kint() }}


# to dump a variable
{{ kint(page) }}


# to dump lower down in the data structure
{{ kint(page.content) }}