✨ Pretty Printing HTML in console.logs.

[rahulakrishna]

Use pre tag to properly format HTML
🚨 Add index as key to map inside console-panel/index.tsx. This is to get rid of the error message in the console. Since we don't have any identifier for each log. React anyway defaults to using index as key when not explicitly given a key.

Often times when working with tests I have to do console.log(component.debug() which outputs a prettified html code onto the console. Majestic however shows the whole component in a single line which can be hard to debug.

Before:

After:

[Raathigesh]

Hey, Thaks for the PR.

Could you please share how does the prettier make things better? A real example of before and after would be nice.

And if it makes things better, we should try to consume it via npm rather than linking it via CDN :) Is there a particular reason for linking it via CDN?

[rahulakrishna]

HI, I have updated the PR description with before and after images.

The package I'm using is code-prettify from Google. Their instructions only show how to set-up using a CDN. I found an attempt here (react-code-prettify) at making it consumable via npm package. But react-code-prettify seems to be pretty limited (with the last commit coming at 2017 and no support for HTML) right now.

[rahulakrishna]

Changed the after screenshot changing log fonts to monospace

[Raathigesh]

Hi again,

Thanks for posing the images. It looks like it would be useful to have the console log pretty-printed if we are console logging Html. However, I would still like to go with an npm based solution.

We could try the standalone prettier version if you are interested. https://prettier.io/docs/en/browser.html#commonjs

[rahulakrishna]

Hey @Raathigesh , Good that you insisted! Apparently we don't need an external library to format HTML code. Wrapping it in <pre> works well enough. Gonna revert some of my changes

[rahulakrishna]

@Raathigesh I am also looking into leveraging react-inspector to render DOM Elements. Do you want that in this PR or a separate PR?

[rahulakrishna]

Hey, Can we merge this?

[Raathigesh]

Thanks for the Update. Let's make the react-inspector change in a separate PR. Just a quick question. How does the pre-change look for non-code values?

[rahulakrishna]

Everything else looks fine. The existing logic passes every type other than string to the ObjectInspector. So only strings are wrapped in pre.

[rahulakrishna]

I assume this PR resolves #163 If I understand that correctly

[Raathigesh]

Ah Right. Looks good to me.

@allcontributors please add @rahulakrishna for code and idea

[allcontributors]

@Raathigesh

I've put up a pull request to add @rahulakrishna! 🎉

[Raathigesh]

Thank you for your PR. I will push a release by this week.

[CurtisHumphrey]

@rahulakrishna did you start the PR to use react-inspector as a visualizer for DOM output?

[rahulakrishna]

Haven't gotten around to it yet.