**New Developers Working Group**

====== Browser DevTools Tips ======

=== 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=====

==== axe DevTools - Web Accessibility Testing  ====

This adds a new tab to the browser dev tools panel that allows an instant accessibility scan of the page you are on. {{:newdevs:landscape:tools:pasted:20260218-115019.png}}