twig

<h1>{{ 'Hello world'|t }}</h1>
<div class="mt-3 alert alert-warning">
    <p>{% trans %}Do you know how translation works?{% endtrans %}</p>
</div>

Using translate function with parameters:

{{ 'Last checked: @time ago'|t({'@time': time}) }}

{{ "Text to translate"|t({}, {'context' : 'Context name'}) }}

and

{{ dump() }}
{{ dump(variable_name) }}

List available variables (at top level):

{{ dump(_context|keys) }}

If you have Devel module, you can get an accordion display of the variables available to twig with:

{{ devel_dump() }}

Debugging with console.log
We can add the following to a twig template and view the logs in the browser:

Create file custom_base\src\TwigExtension\ActiveThemeUrlExtension.php: