otsukare Thoughts after a day of work

WebCompat.com Just got Modern Cathode Ray Tube Screenshots

When reporting bugs for Web Compatibility, it is useful to see what the person is reporting. Often an image helps right away to identify what is wrong in the page. "Something is wrong in the page" can be sometimes difficult to understand.

Mike Taylor last week just released a feature we wanted for a long time: uploading a screenshot of the issue.

A Visible Issue

Let's go through an example. This site clearly exhibits an issue in the banner the size of the blue top button and the menu which is gone from the main viewport.

Two renderings in different engines

When reporting the issue about this site on webcompat.com, we want to upload a screenshot to show it.

Screenshot DOM Nodes

We could upload a full screenshot or just the part which shows the issue. There is a very practical feature in Firefox Developer Tools: Screenshot Node.

Go to the inspector select the DOM node where the issue is visible and call the contextual menu. In the list of features, you will discover: Screenshot Node.

Page and Inspector side by side

Once done, you will get in the usual browser download folder, the screenshot which has just been taken.

Issue Screenshot

Upload The Screenshot

We can now head to WebCompat.com to report the issue.

Webcompat form

At the bottom of the form there is a "Attach a screenshot image". Once done, our report is fully complete with the screenshot of the node.

And if you are interested by the bug it is probably a flexbox bug using the old syntax.

Otsukare!