View page breaks when emulating printing via DevTools

Question

I'm attempting to perform some styling to handle page breaks when printing, to ensure my content does not get cut in half.

I know the styles requried to perform this (page-break-inside etc) but attempting to verify they work is a rather laborious task, especially when i can't query the DOM whilst its showing me the preview.

In Chrome (or any other browser for that matter) is it possible to put the page into print mode and have it render where the page breaks will be placed?

Currently i can use Dev tools to enable the print media queries, but the only way to see where the page breaks will take place is to actually bring up the print preview. However when thats up i can't interact with the DOM to see why elements do or don't get cut in half by the break.

When it all works this isn't really an issue but as we all know things tend to behave oddly more often than not!

Thanks

Answer 1

by adding columns to your body

body {
  columns: 250px
}

you can see breaks in the elements on the columns as the content reflows into the columns on changing the window width. Preventing content from breaking columns would also prevent it from breaking across pages.

Although not a simulation of where the pages will break, it would allow you to have access to the DOM in order to help figure out how to prevent certain elements from breaking on pages.

Copepen Demo: https://codepen.io/martine-dowden/pen/GRaqYbW