How to console.log in pug?

Question

How can I console.log the data coming from the backend in pug?

For instance, this is my backend in expressjs:

    res.render("streams/show", {
        stream: cleanStream
    });

in show.pug, I want to inspect the data from steam:

- var species = stream.species;
- var fields = [];
- for (var key in species) fields.push(key)
- console.log(fields)

I can't see anything on my Developer Tool on my Chrome.

Any ideas?

Answer 1

Your current method of accessing the data within the template will log information on the backend in the terminal where Express is running, not the frontend in Chrome Developer Tools.

In order to access the external information inside the template, you need to nest it inside a script tag and use JSON.stringify in combination with unescaped Pug string interpolation to render it in the HTML as below.

script
     | var species = !{JSON.stringify(stream.species)};
     | var fields = [];
     | for (var key in species) fields.push(key)
     | console.log(fields)