Differences

This shows you the differences between two versions of the page.

--- newdevs:landscape:tools:browser [2026/02/18 11:52] – created tmccanna
+++ newdevs:landscape:tools:browser [2026/02/18 15:29] (current) – smayo
@@ Line 3: / Line 3: @@
 ====== Browser DevTools Tips ======
-(need some good tips here!)
+=== Debugging printed output ===
+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:
+  - 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: {{:newdevs:landscape:tools:angular_print_location.png?400|}}
+    * 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: {{:newdevs:landscape:tools:angularjs_print_location.png?400|}}
+  - Clicking on the button that prints your thing. Evergreen should pause
+  - Toggling your browser to show printed media.
+    * In Firefox, you can do this by:
+      - Selecting the 'Inspector' tab of the devtools
+      - In the styles drawer in the middle, toggling the button with the page icon at the top right {{ :newdevs:landscape:tools:firefox_render_media_print.jpg?600 |}}
+    * In Chrome, you can do this by:
+      - finding the 'Console drawer', which you can find by pressing Escape to toggle it on/off.
+      - 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
+      - Finding the option 'Emulate CSS media type' and setting it to 'print' {{:newdevs:landscape:tools:chrome_render_media_print.jpg?600|}}
+Then you can click around with the inspector to learn about what's going wrong.
 ===== Useful extensions=====