Enable global scope objects debugging

[ghost]

@kptdobe commented on Jul 11, 2018, 9:54 AM UTC:

While developing the htl markup, I am not sure of the content of the global scope (it for now) objects. Would be cool to have a debugging feature, maybe something like README.html.it.json that would render the object in my browser.
A console log would be enough though in a first step.

Workaround: add a breakpoint in the generated html.js (inside return runtime.run(function* () {)

This issue was moved by tripodsan from adobe/project-helix#257.

[ghost]

@tripodsan commented on Jul 11, 2018, 9:57 AM UTC:

I think the it should go. it is a leftover from the jst templates.
I think we should only have the toplevel objects described here: #237

[ghost]

@trieloff commented on Jul 11, 2018, 10:03 AM UTC:

@tripodsan can you summon your bot to move this to pipeline?

In any case, I think this kind of "itrospection" would be useful

[ghost]

@kptdobe commented on Jul 11, 2018, 10:04 AM UTC:

ok, just renamed, still valid for global scope objects.

[ghost]

@trieloff commented on Jul 11, 2018, 10:08 AM UTC:

Here is how it could be done:

• in the HTML pipeline, add a new step right before the main function.

• this step checks for a debug request parameter and checks that it's running inside petridish

• and then returns {debug: {payload}}

• add a second step to the pipeline as the second to last one

• it checks for the existence of debug in the payload

• and then discards the response object to create a new one: content-type would be JSON, body would be the content of the debug object

[kptdobe]

After building 4 sites, I think this is a must have: I always needed to add a json renderer to know what's in the it object but also make sure the parts my pre.js files are computing are correct.
A console.log at the end of the pre.js file is a workaround but hard to read...

[trieloff]

We should try printing this to the developer console: https://developers.google.com/web/tools/chrome-devtools/console/console-reference#group

[kptdobe]

This would mean:

• have a "debug" flag
• if debug, inject an HTML snippet at the end of the rendering pipeline (after HTL output) that does a console.group and then a console.log of the payload...

[trieloff]

Depending on how "dirty" is acceptable, it could literally be simply attaching <script>console.log(…)</script> at the end of any HTML file requested with ?debug=true

[kptdobe]

that's exactly what I am trying at the moment ;)

[kptdobe]

Just realized that this would not work with a different rendering than HTML... in the JSON case, you also need to know what is the payload that you are going to transform to HTML.

[kptdobe]

Now that we can easily add breakpoints in the pre.js file and use the debugger, this becomes less critical but still really convenient to "quickly" preview the payload.

[kptdobe]

Usage: add debug=true request parameter and open the browser developer console.

http://localhost:3000/index.html?debug=true will output the corresponding payload in the console.