คำแนะนำสำหรับการดีบักสไตล์การพิมพ์หรือไม่

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

• เปลี่ยนรหัส
• คำสั่งแท็บ
• โหลด

แต่กระบวนการทั้งหมดนั้นจะยากลำบากกว่าเดิมเมื่อคุณพยายามพิมพ์:

• เปลี่ยนรหัส
• คำสั่งแท็บ
• โหลด
• พิมพ์
• เหล่ที่รูปภาพตัวอย่างก่อนพิมพ์
• เปิด PDF ในหน้าตัวอย่างเพื่อตรวจสอบเพิ่มเติม

มีเครื่องมือที่ฉันขาดหายไปที่นี่? ผู้ตรวจสอบของ WebKit มีช่องทำเครื่องหมาย "แกล้งเป็นสื่อเพจ" หรือไม่ มีเวทมนต์ที่ Firebug ( ตัวสั่น ) ทำอะไรได้บ้าง?

มีตัวเลือกสำหรับสิ่งนั้นในการตรวจสอบของ Chrome

1. เปิดตัวตรวจสอบ DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. คลิกที่ไอคอนโหมดสลับอุปกรณ์ซึ่งอยู่ที่มุมซ้ายบนของแผง DevTools (windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M)
3. คลิกที่ไอคอนการแทนที่เพิ่มเติมที่ มุมขวาบนของเบราว์เซอร์วิวพอร์ตเพื่อเปิดลิ้นชัก devtools

4. จากนั้นเลือกสื่อในลิ้นชักการจำลองและทำเครื่องหมายที่ช่องทำเครื่องหมายสื่อ CSS

   

สิ่งนี้ควรทำเคล็ดลับ

อัปเดต: เมนูมีการเปลี่ยนแปลงใน DevTools สามารถพบได้โดยคลิกที่เมนู "สามจุด" ที่มุมขวาบน> เครื่องมือเพิ่มเติม> การตั้งค่าการแสดงผล> สื่อจำลอง> พิมพ์

ที่มา: หน้า Google DevTools *

ฉันสมมติว่าคุณต้องการควบคุมหน้าต่างที่พิมพ์ออกมาให้มากที่สุดโดยไม่ต้องใช้วิธี HTML เป็น PDF ... ใช้หน้าจอ @media เพื่อดีบัก - @media print สำหรับ css ขั้นสุดท้าย

เบราว์เซอร์ที่ทันสมัยสามารถให้ภาพอย่างรวดเร็วสำหรับสิ่งที่จะเกิดขึ้นในเวลาที่พิมพ์โดยใช้นิ้วและจุด@media queryใน

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

เมื่อเบราว์เซอร์ของคุณแสดง "นิ้ว" คุณจะมีความคิดที่ดีขึ้นเกี่ยวกับสิ่งที่คาดหวัง วิธีนี้ควรทั้งหมด แต่จบวิธีการแสดงตัวอย่างก่อนพิมพ์ เครื่องพิมพ์ทั้งหมดจะทำงานร่วมกับptและinหน่วยและการใช้เทคนิค @media จะช่วยให้คุณเห็นสิ่งที่จะเกิดขึ้นและปรับได้อย่างรวดเร็ว Firebug (หรือเทียบเท่า) จะทำให้กระบวนการนั้นเร็วขึ้น เมื่อคุณเพิ่มการเปลี่ยนแปลงใน @media คุณจะได้รับรหัสทั้งหมดที่คุณต้องการสำหรับไฟล์ CSS ที่ลิงก์โดยใช้media = "print"แอตทริบิวต์ - เพียงแค่คัดลอก / วางกฎหน้าจอ @media ลงในไฟล์ที่อ้างอิง

โชคดี. เว็บไม่ได้ถูกสร้างขึ้นสำหรับการพิมพ์ การสร้างโซลูชันที่ให้เนื้อหาทั้งหมดของคุณมีสไตล์เท่ากับสิ่งที่เห็นในเบราว์เซอร์เป็นไปไม่ได้ตลอดเวลา ตัวอย่างเช่นเลย์เอาท์แบบของเหลวสำหรับผู้ชมส่วนใหญ่ 1280 x 1024 ไม่ได้แปลเป็นเครื่องพิมพ์เลเซอร์ขนาด 8.5 x 11 ที่ง่ายดาย

การอ้างอิง W3C สำหรับการปฏิเสธ: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48คุณสามารถดีบักสไตล์การพิมพ์ได้ในแท็บการแสดงผล

คลิกบนไอคอนเมนูขวาของการตรวจสอบและการตั้งค่าการแสดงผล

แก้ไข
สำหรับ Chrome 58ตำแหน่งเปลี่ยนเป็น Web Inspector> เมนู> เครื่องมือเพิ่มเติม> การแสดงผล

ใน Chrome v41 มี แต่อยู่ในจุดที่ต่างออกไปเล็กน้อย

มีวิธีที่ง่ายในการแก้ไขข้อบกพร่องสไตล์การพิมพ์ของคุณโดยไม่ต้องเปลี่ยนแอตทริบิวต์สื่อใด ๆ ในรหัส HTML ของคุณ (แน่นอนว่ามันไม่ได้แก้ปัญหาความกว้าง / หน้า):

• ใช้ส่วนขยาย Firefox + นักพัฒนาเว็บ
• ในเมนู Web Developer เลือก CSS / Display CSS ตาม Media Type / Print
• กลับไปที่เมนูนักพัฒนาเว็บเลือกตัวเลือก / คงคุณสมบัติ

ตอนนี้คุณกำลังดู CSS การพิมพ์และคุณสามารถโหลดหน้าเว็บซ้ำได้เรื่อย ๆ เมื่อเสร็จแล้วให้ยกเลิกการเลือก "คุณลักษณะคงอยู่" และโหลดซ้ำคุณจะได้รับหน้าจอ CSS อีกครั้ง

HTH

UI ของ Chrome นั้นแตกต่างกันอีกครั้งตั้งแต่ v53

ฉันไม่จำเป็นต้องใช้คุณลักษณะนี้บ่อย ๆ แต่เมื่อใดก็ตามที่ฉันทำฉันจะต้องใช้เวลาตลอดไปในการพิจารณาว่าทีม Chrome ย้ายไปที่ใดตั้งแต่ครั้งสุดท้ายที่ฉันเขียนวงจรที่พยายามติดตามมัน

โปรดสังเกตว่าเป็นเมนู ... ในบานหน้าต่าง Dev Tools ไม่ใช่เมนู ... ในบานหน้าต่างเบราว์เซอร์ Chrome

ตอนนี้เลื่อนลงในส่วนการแสดงผล มันมักจะอยู่ใต้รอยพับ

ติดตามคำตอบโดย rflnogueira การตั้งค่า Chrome ปัจจุบัน (40.0. *) จะมีลักษณะดังนี้:

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

2019 - คำแนะนำที่ปรับปรุงแล้ว

1. เปิดตัวตรวจสอบ Chrome
   • จากMac => option+ command+i
   • จากWindows =>F12

2. คลิกที่จุดเล็ก ๆ 3 จุด customize and control devTools

3. เลือก More Tools

4. เลือก Rendering

5. เลื่อนไปที่ด้านล่างเพื่อ Emulate CSS Media

6. เลือกprintจากลูกศรลง

หากคุณมีฟังก์ชั่นการพิมพ์ที่เขียนเนื้อหาของหน้าไปที่หน้าต่างใหม่ด้วยสไตล์ชีทการพิมพ์ของคุณที่อ้างอิงคุณจะได้รับความคิดที่ดีขึ้นว่าจะมีลักษณะเป็นอย่างไรบนกระดาษและคุณจะสามารถแก้ไขข้อบกพร่องได้ กับไลค์ของ firebug ด้วย

นี่คือตัวอย่างของวิธีการนี้สามารถทำได้ด้วย JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

ใน DreamWeaver มีแถบเครื่องมือที่แสดงตัวเลือกการเรนเดอร์ใด ๆ ที่คุณต้องการ: หน้าจอ, การพิมพ์, สื่อมือถือ, หน้าจอการฉาย, สื่อทีวี, สไตล์ชีทเวลาอื่น ๆ นี่คือสิ่งที่ฉันใช้โดยเฉพาะอย่างยิ่งเพราะมันแสดงตัวอย่างทันทีด้วย 1 กดปุ่มเพียงครั้งเดียว

ฉันใช้มาโครส่งการกดแป้นและการคลิกเมาส์ซ้ำ ๆ ใน Windows AutoHotKey เป็นซอฟต์แวร์ที่ยอดเยี่ยมและใน OS X คุณสามารถอ่านเกี่ยวกับ Automator AHK สำหรับ OsX ทางเลือกได้

ภายใต้ Windows (แทนที่ Ctrl โดย Cmd ภายใต้ OS X) "Ctrl-s / สลับไปที่หน้าต่าง Fx ไม่ว่าจะอยู่ที่ไหนในรายการของหน้าต่างที่เปิด / Ctrl-r" ซึ่งผูกไว้กับคีย์ที่ไม่ได้ใช้ 1 อันเพื่อหลีกเลี่ยงความยุ่งยาก จากRSI :)