Debug CSS @media print วิธีดีบั๊ก print preview

โดยปกติเราจะไม่สามารถมองเห็น @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 ของคุณด้วยละ)

เป็นยังไงกันบ้างคะสำหรับบทความ Debug CSS @media print วิธีดีบั๊ก print preview ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

ดูเพลิน Admin - 04 ม.ค. 66
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

ดูเพลิน Admin - 19 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4