Using Chrome’s Element Inspector in Print Preview Mode?

by

Note: This answer covers several versions of Chrome, scroll to see v52, v48, v46, v43 and v42 each with their updated changes.

Chrome v52+:

  • Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions).
  • Check the Emulate print media checkbox at the Rendering tab and select the Print media type.

Chrome v52+

Chrome v48+ (Thanks Alex for noticing):

  • Open the Developer Tools (CTRLSHIFTI or F12)
  • Click the Toggle device mode button in the left top corner (CTRLSHIFTM).
  • Make sure the console is shown by clicking Show console in menu at (1) (ESC key toggles the console if Developer Toolbar has focus).
  • Check Emulate print media at the rendering tab which can be opened by selecting Rendering in menu at (2).

Chrome v48+

Chrome v46+:

  • Open the Developer Tools (CTRLSHIFTI or F12)
  • Click the Toggle device mode button in the left top corner (1).
  • Make sure the console is shown by clicking the menu button (2) > Show console (3) or pressing the ESC key to toggle the console (only works when Developer Toolbar has the focus).
  • Open the Emulation (4) > Media (5) tabs, check CSS media and select print (3).

Chrome v46+ support

Chrome v43+:

  • The drawer icon at step 2 has changed.

Emulate print media query on Chrome v43

Chrome v42:

  • Open the Developer Tools (CTRLSHIFTI or F12)
  • Click the Toggle device mode button in the left top corner (1).
  • Make sure the drawer is shown by clicking the Show drawer button (2) or pressing the ESC key to toggle the drawer.
  • Under Emulation > Media check CSS media and select print (3).

Emulate print media query on Chrome v42

More Related Contents:

  1. Disabling Chrome cache for website development
  2. “CAUTION: provisional headers are shown” in Chrome debugger
  3. Is there a way to get the XPath in Google Chrome?
  4. How do you inspect the web inspector in Chrome?
  5. What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
  6. What’s the difference between “Normal Reload”, “Hard Reload”, and “Empty Cache and Hard Reload” in Chrome?
  7. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  8. Chrome stalls when making multiple requests to same resource?
  9. Automatically open Chrome developer tools when new tab/new window is opened
  10. Chrome DevTools Devices does not detect device when plugged in
  11. How to reposition Chrome Developer Tools
  12. Bizarre Error in Chrome Developer Console – Failed to load resource: net::ERR_CACHE_MISS
  13. Making HTTP Requests using Chrome Developer tools
  14. Chrome: Source of Post Data?
  15. How to search all loaded scripts in Chrome Developer Tools?
  16. “Inspect” a hover element?
  17. Remote Debugging for Chrome iOS (and Safari)
  18. Chrome not showing OPTIONS requests in Network tab
  19. Chrome Dev Tools – “Size” vs “Content”
  20. Multiple URLs copy in Sources/Network tab
  21. Understanding Chrome network log “Stalled” state
  22. Chrome 84 Inspect element, find results not highlighted in yellow like before
  23. Chrome developer tools workspace mappings
  24. Chrome Dev Tools: How to trace network for a link that opens a new tab?
  25. How to block a URL in Chrome’s developer tools network monitor
  26. Chrome Console SameSite Cookie Attribute Warning
  27. Chrome remote debugging doesn’t work with IP
  28. ChromeWebDriver – unknown error: Chrome failed to start: crashed
  29. getUserMedia() not supported in chrome
  30. CORS issue doesn’t occur when using POSTMAN

Leave a Comment