search

Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.18k stars 680 forks source link

Add a rendering inspector #1671

Open LukasKlement opened 2 years ago

LukasKlement commented 2 years ago

Due to the limited flexbox support, the HTML rendered by WeasyPrint often does not correspond with what browsers render. Is there a way to have a browser-like inspector on WeasyPrint rendered documents?

I have not found any other way than trial-and-error to circumvent these flexbox limitations, which is extremely time-consuming.

liZe commented 2 years ago

Hi!

Having a rendering inspector would be awesome, but it’s quite complicated 😁.

The best solution right now is:

castedo commented 1 year ago

What would be useful in this inspector for you, and how do you imagine it in your dreams?

Looking quickly at the WeasyPrint code, I can imagine having a json dump of computed styles from .css.StyleFor.set_computed_styles would be useful. In order to limit the amount of data, this dump could only be done for HTML elements with a certain HTML attribute (perhaps inspect=1 or something like that).

Maybe having another logger, similar to PROCESS_LOGGER, would be convenient because this json dump could be configured to go into a standalone log file. Users can then do further processing on the json of this standalone log file if they want prettier output.

I'm predicting that it would be useful to be able to compare the above output to the "Computed" tab of a web browser inspector for the HTML element of interest. Then one can quickly determine whether WeasyPrint and a web browser think the style should be the same (and just differ in how they draw the style) or whether for some reason the style cascade has resulted in diff computed style between WeasyPrint and a web browser.