Browser DevTools Tips

Something weird about printing? Understandable, entire operating systems have been created because printing is hard. You can see exactly what Evergreen plans to print by:

1. Inserting a breakpoint right before Evergreen attempts to print.
   • In Angular, that's in Open-ILS/src/eg2/src/app/share/print/print.component.ts, here:
   • In AngularJS, it could be one of a few places with window.print(), but it's most likely in Open-ILS/web/js/ui/default/staff/services/print.js here:
2. Clicking on the button that prints your thing. Evergreen should pause
3. Toggling your browser to show printed media.
   • In Firefox, you can do this by:
     1. Selecting the 'Inspector' tab of the devtools
     2. In the styles drawer in the middle, toggling the button with the page icon at the top right
   • In Chrome, you can do this by:
     1. finding the 'Console drawer', which you can find by pressing Escape to toggle it on/off.
     2. At the top left of the 'Console drawer' you'll find a button with three vertically stacked dots. Click it and select 'Rendering' from the list
     3. Finding the option 'Emulate CSS media type' and setting it to 'print'

Then you can click around with the inspector to learn about what's going wrong.

This adds a new tab to the browser dev tools panel that allows an instant accessibility scan of the page you are on.