ฉันกำลังพัฒนาเว็บไซต์และจำเป็นต้องทำงานในมุมมองการพิมพ์ โดยทั่วไปเมื่อฉันมีปัญหาการจัดวางฉันใช้ตัวตรวจสอบองค์ประกอบของ Chrome อย่างไรก็ตามสิ่งนี้ไม่มีอยู่ในโหมดดูตัวอย่างก่อนพิมพ์

มีปลั๊กอินของ Chrome หรือวิธีอื่นในการเปลี่ยนสื่อการรับชมของคุณภายในโครเมี่ยมเองเพื่อดูหน้าเว็บที่เครื่องพิมพ์จะทำอย่างไร ฉันคิดว่ามันไม่ได้เป็นโซลูชันเฉพาะของ Chrome แต่นั่นเป็นเบราว์เซอร์หลักของฉันดังนั้นจึงเป็นการดีที่มีโซลูชันในเบราว์เซอร์

ตอนนี้ฉันมุ่งเน้นไปที่สื่อตัวอย่างก่อนพิมพ์ แต่มันจะเหมาะที่จะเปลี่ยนเป็นสื่อประเภทใดก็ได้ที่รองรับ (เช่นทั้งหมด / อักษรเบรลล์ / นูน / มือถือ / พิมพ์ / การฉาย / หน้าจอ / คำพูด / tty / โทรทัศน์).

หมายเหตุ: คำตอบนี้ครอบคลุม Chrome หลายเวอร์ชันเลื่อนเพื่อดูv52 , v48 , v46 , v43และv42แต่ละรายการพร้อมการเปลี่ยนแปลงที่อัปเดตแล้ว

Chrome v52 +:

• เปิดเครื่องมือสำหรับนักพัฒนา (Windows: F12หรือCtrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• คลิกปุ่มกำหนดเองและควบคุมเมนูDevTools hamburger แล้วเลือกเครื่องมือเพิ่มเติม> การตั้งค่าการแสดงผล (หรือการแสดงผลในเวอร์ชันที่ใหม่กว่า)
• ตรวจสอบการเลียนแบบสื่อสิ่งพิมพ์ช่องทำเครื่องหมายที่แสดงผลแท็บและเลือกพิมพ์ประเภทสื่อ

Chrome v48 + (ขอบคุณ Alex สำหรับการสังเกต):

• เปิดเครื่องมือสำหรับนักพัฒนา ( CTRLSHIFTIหรือF12)
• คลิกปุ่มโหมดสลับอุปกรณ์ที่มุมบนซ้าย ( CTRLSHIFTM)
• ตรวจสอบให้แน่ใจว่ามีการแสดงคอนโซลโดยคลิกแสดงคอนโซลในเมนูที่ (1) ( ESCปุ่มสลับคอนโซลหากแถบเครื่องมือนักพัฒนาซอฟต์แวร์มีโฟกัส)
• เลือกเลียนแบบสื่อสิ่งพิมพ์ที่แท็บการแสดงผลซึ่งสามารถเปิดได้โดยเลือกเมนูการแสดงผลที่ (2)

Chrome v46 +:

• เปิดเครื่องมือสำหรับนักพัฒนา ( CTRLSHIFTIหรือF12)
• คลิกปุ่มโหมดสลับอุปกรณ์ที่มุมบนซ้าย (1)
• ตรวจสอบให้แน่ใจว่ามีการแสดงคอนโซลโดยคลิกปุ่มเมนู (2)> แสดงคอนโซล (3) หรือกดปุ่มESCเพื่อสลับคอนโซล (ใช้ได้เฉพาะเมื่อ Developer Toolbar มีโฟกัสอยู่)
• เปิดแท็บEmulation (4)> Media (5)ตรวจสอบCSS mediaและเลือกprint (3)

Chrome v43 +:

• ไอคอน drawer ที่ขั้นตอน 2 มีการเปลี่ยนแปลง

Chrome v42:

• เปิดเครื่องมือสำหรับนักพัฒนา ( CTRLSHIFTIหรือF12)
• คลิกปุ่มโหมดสลับอุปกรณ์ที่มุมบนซ้าย (1)
• ตรวจสอบให้แน่ใจว่าแสดงลิ้นชักโดยคลิกปุ่มแสดงลิ้นชัก (2) หรือกดปุ่มESCเพื่อสลับลิ้นชัก
• ภายใต้การจำลอง> สื่อตรวจสอบสื่อ CSSแล้วเลือกพิมพ์ (3)

เปลี่ยนเป็น Chrome 32 35+

(ใน Chrome 35+ แท็บ "การจำลอง" มีอยู่โดยค่าเริ่มต้นนอกจากนี้คอนโซลพร้อมใช้งานจากแท็บหลักใด ๆ )

1. ใน DevTools ไปที่ settings-> Overrides
2. เปิดใช้งาน "แสดงมุมมองการจำลองในคอนโซลลิ้นชัก"
3. ปิดการตั้งค่าไปที่แท็บ 'องค์ประกอบ'
4. กดEscเพื่อนำขึ้นคอนโซล
5. เลือกแท็บ "จำลอง" คลิก "หน้าจอ"
6. เลื่อนลงไปที่ "CSS Media" เลือก "print"

ตัวเลือกนี้ยังไม่มี (ยัง?) ในแท็บคอนโซล

ตั้งแต่ Chrome 32 คุณมีCSS mediaตัวเลือกในScreenส่วนของEmulationแท็บdrawer

เพียงเปิดใช้งานเลือกprintเป็นประเภทสื่อเป้าหมายและ - ดู - หน้าของคุณจะแสดง [เกือบ] วิธีที่จะพิมพ์

ใช้Escสำหรับดึงลิ้นชักขึ้นมาหากมองไม่เห็น

ในฐานะที่เป็นของ Chrome 48 (และอาจเป็นรุ่นก่อนหน้า) ฟังก์ชั่นดูเหมือนจะย้ายอีกครั้ง:

ไม่กี่ขั้นตอนแรกไม่เปลี่ยนแปลง:

1. กดF12เพื่อเปิดเครื่องมือนักพัฒนา

2. กดESCเพื่อเปิดคอนโซล

ตามคำตอบก่อนหน้านี้การตั้งค่าสามารถพบได้ในแท็บ "การจำลอง" ดังที่แสดงในภาพด้านล่างตอนนี้มันถูกย้ายไปที่แท็บ "การแสดงผล" ซึ่งสามารถนำขึ้นมาได้โดยคลิกที่จุดสามจุดทางด้านซ้ายของแท็บ "คอนโซล"

โปรดดูบทความนี้

จากนั้นไปที่แท็บ "การแทนที่"

ตั้งแต่ Chrome 48+ คุณสามารถเข้าถึงตัวอย่างก่อนพิมพ์ได้ตามขั้นตอนต่อไปนี้:

1. เปิดเครื่องมือ dev - Ctrl/Cmd+ Shift+ Iหรือคลิกขวาที่หน้าและเลือก 'ตรวจสอบ'

2. กดEscเพื่อเปิดลิ้นชักเพิ่มเติม

3. หาก 'การแสดงผล' ไม่ปรากฏขึ้นให้คลิกเคบับ 3 จุดแล้วเลือก 'การแสดงผล'

4. ทำเครื่องหมายที่ช่องทำเครื่องหมาย 'จำลองสื่อสิ่งพิมพ์'

จากนั้น Chrome จะแสดงหน้าพิมพ์ของคุณและคุณสามารถตรวจสอบองค์ประกอบและแก้ไขปัญหาเช่นเดียวกับที่คุณทำกับเวอร์ชันเบราว์เซอร์

หากคุณกำลังดีบัก CSS โดยใช้พิมพ์เป็น PDF ใน Google Chrome และสีพื้นหลังองค์ประกอบ CSS ของคุณไม่แสดงให้ตรวจสอบให้แน่ใจว่าได้ทำเครื่องหมายที่ช่องทำเครื่องหมาย 'กราฟิกพื้นหลัง' ฉันใช้เวลาเกือบ 30 นาทีในการดีบัก CSS และสงสัยว่าสิ่งใดที่ทำให้พื้นหลัง CSS ของฉันถูกเพิกเฉย

ใน Chrome v51 บน Mac ฉันพบการตั้งค่าการแสดงผลโดยคลิกที่มุมขวาบนเลือกเครื่องมือเพิ่มเติม> การตั้งค่าการแสดงผลและตรวจสอบปุ่มเลียนแบบสื่อในตัวเลือกที่อยู่ด้านล่างของหน้าต่าง

ขอบคุณทุกโปสเตอร์อื่น ๆ ที่นำฉันมานี้และให้เครดิตกับผู้ที่ให้คำตอบโดยไม่มีภาพ

Chrome v67 (mac):

1. กดค้างไว้Cmd+opt+jเพื่อเปิดเครื่องมือ dev
2. คลิกที่...ด้านขวามือแล้วเลือก: เครื่องมือเพิ่มเติม >> การแสดงผล
3. เมื่อหน้าต่างการแสดงผลปรากฏขึ้นที่ด้านล่างของหน้าจอ Emulate CSS Media และเลือก: "Screen" จากดรอปดาวน์
4. ไปที่ "ไฟล์ >> พิมพ์" และคุณจะเห็นมุมมองที่คุณต้องการพิมพ์

รูปภาพของคำอธิบายด้านบนสำหรับ Chrome v67 บนเครื่อง mac:

ตำแหน่งที่จะหาแท็บการแสดงผล: คลิกที่...ด้านขวาและเลือก: เครื่องมือเพิ่มเติม >> การแสดงผล

วิธีรับมุมมอง "หน้าจอ" เพื่อพิมพ์: เมื่อหน้าต่างการแสดงผลปรากฏขึ้นที่ด้านล่างของหน้าจอ Emulate CSS Media section และเลือก: "Screen" จากดรอปดาวน์

หวังว่ามันจะช่วย

ด้วยทางลัดที่มีวิธีที่เร็วที่สุดคือ

1. เปิดเครื่องมือนักพัฒนา

   • Windows: F12หรือCtrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. เปิดเมนูคำสั่ง

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

3. พิมพ์printและเลือกจำลองชนิดสื่อสิ่งพิมพ์ CSSจากเมนูบริบท

   

เมื่อมองไปที่คำตอบที่ยอดเยี่ยมและยอดเยี่ยมที่สุดในขณะนี้โดย lmeursฉันคิดว่าวิธีนี้อาจยังคงมีเสถียรภาพตลอดเวลา

Chrome v50:

วิธีที่ 1:

1. เมนู> เครื่องมือเพิ่มเติม> การตั้งค่าการแสดงผล (ดูภาพ)
2. ลง: แท็บการแสดงผล> จำลองสื่อ "พิมพ์"

วิธีที่ 2:

1. เปิดคอนโซล [esc]
2. เมนูคอนโซล> การแสดงผล