โดยปกติเราจะไม่สามารถมองเห็น @media print ได้ถึงแม้จะทำการ Inspect ดูโค้ดก็ตาม เพราะปกตินั้น Browser จะแสดงเฉพาะ CSS Style ของฝั่ง media screen เท่านั้น แต่รู้หรือไม่ว่า Browser Chrome และ EDGE สามารถที่จะทำการ Debug css media print ได้วิธีการจะเป็นอย่างไรไปดูกัน
วิธีดีบั๊ก css media print โดยใช้ Chrome/EDGE
เราจะให้เครื่องมือที่เรียกว่า DevTools ที่ติดมาพร้อมกับ Browser ของ Chrome และ EDGE อยู่แล้ว และรูปด้านล่างคือหน้าเว็บตัวอย่างของเราก็ทำการเปิดใช้งาน Debug media print css ดูขึ้นตอนวิธีการทำด้านล่างได้เลย
1. ไปยังหน้าเว็บที่ต้องการ จากนั้นคลิกขวา และเลือก Inspect
2. เมื่อมีแถบเครื่องมือแบบด้านล่างขึ้นมา ให้กดปุ่ม cmd+shift+p (ใน Mac) หรือ ctrl+shift+p (ใน Window)
3. พิมพ์ค้นหา Show rendering จากนั้นคลิกเลือก
4. จะมีแถบเครื่องมือแสดงขึ้นมาอีกแถบให้ Scroll down ลงมาจนเจอคำว่า "Emulate CSS media type" เปลียนตรงนี้เป็น "print"
5. เมื่อคุณดูที่หน้า HTML ที่คุณเปิดอยู่ ตอนนี้คุณก็จะมองเห็น Style css media print ที่คุณทำไว้แล้ว
ใน DevTool Style ก็มี @media print แสดงขึ้นมาด้วย คุณสามารถทดลองแก้ไข Style ผ่าน Tool ตรงนี้ได้เลย (แล้วอย่าลืม Copy ไปใส่ในไฟล์ css ของคุณด้วยละ)
