How to debug in pug file

[webdiscus]

Is there any way to debug in pug file? For example when i require an image, i wanna debug it with console.log and i wanna see the results in terminal. But if your plugin's method is "render" or "compile", i cannot see the results in terminal.

[webdiscus]

Hello @myasarbardaklar,

rendering a pug to HTML using the compile method (defaults) happens at runtime, but the rendering by the render and html methods happens at compile time, therefore console.log() output not works.

I use the simple mixin debug:

mixin debug(data)
  pre
    code= JSON.stringify(data, JSON_PRETTY_PRINT, 2)

The output a variable in pug:

-
   const data = {
     key: 'value',
     list: [1, 2, 3]
    };

h2 Output of data:
+debug(data)

Then you can see the data variable in generated HTML:

Output of data:
{
  "key": "value",
  "list": [
    1,
    2,
    3
  ]
}

[mybardaklar]

Thank you so much. But when i add an image and when i wanna debug the result its like this:
"' + require('E:/Mine/webdiscus_pug_plugin/src/img/1033740.jpg?prop=images') + '"

[webdiscus]

Thank you so much. But when i add an image and when i wanna debug the result its like this:
"' + require('E:/Mine/webdiscus_pug_plugin/src/img/1033740.jpg?prop=images') + '"

yes, because pug-loader resolve the absolute path of source file in pug.
The "magic" (pug -> pug-loader(img file -> fullpath) -> responsive-loader --[debugging not possible]--> pug-plugin -> html) happens at compilation stage inner in webpack. The debugging inner pug-plugin is not possible, it is for user a "blackbox".

But you can use the query parameter prop to get a property of result:

- const srcSet = require('../img/astronaft.jpg?prop=srcSet');
p= srcSet