How to stop twig debug from breaking HTML when inside tags? Originally this was in a views field rewrite but i have since moved it to 

views-view-fields--[view name]--[machine ID].html.twig


And behaviour seems to be the same: 

 &lt;a href="{{ fields.path.content}}" class="menu-item"&gt;{{fields.title.content}}&lt;span data-background-image="{{ fields.field_image.content}}"&gt;&lt;/span&gt;&lt;/a&gt;


This renders fine when twig debug is set to false in development.services.yml
When twig debug is turned on, the markup becomes badly broken. 

I.e. 

&lt;span data-background-image="

    &lt;!-- THEME DEBUG --&gt;
    &lt;!-- THEME HOOK: 'views_view_field' --&gt;
    &lt;!-- BEGIN OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' --&gt;


    &lt;!-- THEME DEBUG --&gt;
    &lt;!-- THEME HOOK: 'image_url_formatter' --&gt;
    &lt;!-- BEGIN OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' --&gt;
    http://mysite.local/sites/default/files/styles/menus_image/public/menus/image.png?itok=1ZnZSCkX
    &lt;!-- END OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' --&gt;


    &lt;!-- END OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' --&gt;

    "&gt;&lt;/span&gt;


HTML does not support &lt;!-- --&gt; inside tags, which seems to be the core issue. 
Is there a workaround to this, or it's just a limitation of Twig debug?
You can apply |render|striptags|trim twig filters:

&lt;a href="{{ fields.path.content|render|striptags|trim }}" class="menu-item"&gt;{{ fields.title.content }}&lt;span data-background-image="{{ fields.field_image.content|render|striptags|trim }}"&gt;&lt;/span&gt;&lt;/a&gt;



  If you want to save (not delete) for example div or img tags you can also write:
  
  {{ fields.field_image.content|render|striptags('&lt;div&gt;, &lt;img&gt;')|trim }}


Seen here https://www.drupal.org/node/2672656#comment-11821896