Gợi ý gỡ lỗi bản định kiểu in?

Gần đây tôi đã làm việc trên một bản định kiểu in cho một trang web và tôi nhận ra rằng tôi đã bị mất phương pháp hiệu quả để điều chỉnh nó. Đó là một điều để có một chu kỳ tải lại để làm việc trên bố trí trên màn hình:

• thay đổi mã
• tab lệnh
• tải lại

nhưng toàn bộ quá trình trở nên khó khăn hơn nhiều khi bạn cố in:

• thay đổi mã
• tab lệnh
• tải lại
• in
• nheo mắt tại hình ảnh xem trước in
• mở PDF trong Bản xem trước để kiểm tra thêm

Có công cụ nào tôi đang bỏ lỡ ở đây không? Thanh tra của WebKit có hộp kiểm "giả vờ đây là phương tiện phân trang" không? Có phép thuật nào mà Fireorms ( rùng mình ) có thể làm được không?

Có một tùy chọn cho điều đó trong thanh tra của Chrome.

1. Mở trình kiểm tra DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. Nhấp vào biểu tượng Chuyển đổi chế độ thiết bị , nằm ở góc trên bên trái của bảng DevTools. (cửa sổ: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Nhấp vào biểu tượng Ghi đè khác ở góc trên bên phải của chế độ xem trình duyệt để mở ngăn kéo devtools.

4. Sau đó, chọn Phương tiện trong ngăn kéo mô phỏng và kiểm tra hộp kiểm phương tiện CSS .

   

Cái này cần phải dùng mẹo.

Cập nhật: Các menu đã thay đổi trong DevTools. Bây giờ có thể tìm thấy nó bằng cách nhấp vào menu "ba chấm" ở góc trên cùng bên phải> Công cụ khác> Cài đặt kết xuất> Mô phỏng phương tiện> in.

Nguồn: trang Google DevTools *

Tôi giả sử bạn muốn kiểm soát cửa sổ in càng nhiều càng tốt mà không cần sử dụng cách tiếp cận HTML sang PDF ... Sử dụng màn hình @media để gỡ lỗi - @media in cho css cuối cùng

Các trình duyệt hiện đại có thể cung cấp cho bạn một hình ảnh nhanh chóng về những gì sẽ xảy ra tại thời điểm in bằng cách sử dụng inch và pts trong một @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 */
 ...
}

Khi trình duyệt của bạn hiển thị "inch", bạn sẽ có ý tưởng tốt hơn về những gì mong đợi. Cách tiếp cận này nên tất cả nhưng kết thúc phương pháp xem trước in. Tất cả các máy in sẽ làm việc với ptvà incác đơn vị, và sử dụng kỹ thuật @media sẽ cho phép bạn nhanh chóng xem điều gì sẽ xảy ra và điều chỉnh cho phù hợp. Firebird (hoặc tương đương) sẽ hoàn toàn đẩy nhanh quá trình đó. Khi bạn đã thêm các thay đổi của mình vào @media, bạn đã có tất cả mã bạn cần cho tệp CSS được liên kết bằng media = "print"thuộc tính - chỉ cần sao chép / dán quy tắc màn hình @media vào tệp được tham chiếu.

Chúc may mắn. Web không được xây dựng để in. Đôi khi, việc tạo một giải pháp cung cấp tất cả nội dung của bạn, các kiểu bằng với những gì nhìn thấy trong trình duyệt có thể là không thể. Chẳng hạn, bố cục chất lỏng cho đối tượng chủ yếu là 1280 x 1024 không phải lúc nào cũng dễ dàng dịch sang bản in laser 8,5 x 11 đẹp và gọn gàng.

Tài liệu tham khảo W3C cho purusal: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48 , bạn có thể gỡ lỗi phong cách in trong Rendering tab.

Nhấp vào biểu tượng menu trên cùng bên phải của trình kiểm tra và Cài đặt kết xuất .

Chỉnh sửa
cho Chrome 58 , vị trí đã thay đổi thành Trình theo dõi web> Menu> Công cụ khác> Kết xuất

Trong Chrome v41, nó ở đó, nhưng ở một vị trí hơi khác.

Có một cách dễ dàng để gỡ lỗi biểu định kiểu in của bạn mà không cần chuyển đổi bất kỳ thuộc tính đa phương tiện nào trong mã HTML của bạn (tất nhiên, như đã chỉ ra, nó không giải quyết được vấn đề về chiều rộng / trang):

• Sử dụng tiện ích mở rộng Firefox + Web Developer.
• Trong menu Nhà phát triển web, chọn CSS / Hiển thị CSS theo Loại phương tiện / In
• Quay trở lại menu Nhà phát triển web, chọn Tùy chọn / Tính năng bền bỉ

Bây giờ bạn đang xem CSS in và bạn có thể tải lại trang của mình vô thời hạn. Khi bạn đã hoàn tất, bỏ chọn "Tính năng bền bỉ" và tải lại, bạn sẽ nhận lại CSS màn hình.

HTH.

UI của Chrome là khác nhau một lần nữa như của v53.

Tôi không cần phải sử dụng tính năng này thường xuyên, nhưng bất cứ khi nào tôi làm, tôi sẽ phải tìm ra nơi nhóm Chrome đã di chuyển nó kể từ lần cuối cùng tôi đốt cháy chu kỳ cố gắng theo dõi nó.

Lưu ý rằng đó là menu ... trong ngăn Công cụ Dev chứ không phải menu ... trong ngăn Trình duyệt Chrome.

Bây giờ cuộn xuống trong phần Kết xuất. Nó thường nằm dưới nếp gấp.

Theo câu trả lời của rflnogueira, cài đặt Chrome hiện tại (40.0. *) Sẽ giống như dưới đây:

Chỉ cần hiển thị biểu định kiểu in trong trình duyệt của bạn bằng cách media="screen"gỡ lỗi. Chế độ xem trước bản in sử dụng cùng một công cụ kết xuất như chế độ duyệt thông thường để bạn có thể nhận được kết quả chính xác bằng cách sử dụng.

2019 - Hướng dẫn cập nhật

1. Mở thanh tra Chrome
   • Từ máy Mac => option+ command+i
   • Từ Windows =>F12

2. Bấm vào 3 chấm nhỏ, customize and control devTools

3. Lựa chọn More Tools

4. Lựa chọn Rendering

5. Cuộn xuống phía dưới để Emulate CSS Media

6. Chọn printtừ mũi tên xuống

Nếu bạn có chức năng in viết lại nội dung của trang sang một cửa sổ mới với biểu định kiểu in được tham chiếu, bạn sẽ có ý tưởng tốt hơn nhiều về việc nó sẽ trông như thế nào trên giấy và bạn sẽ có thể gỡ lỗi với những con bọ lửa cũng vậy.

Đây là một ví dụ về cách thực hiện điều này với 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();
        });

Trong DreamWeaver có một thanh công cụ hiển thị hầu như bất kỳ tùy chọn kết xuất nào bạn muốn: màn hình, in, phương tiện cầm tay, màn hình chiếu, phương tiện truyền hình, biểu định kiểu thời gian, v.v ... Đây là những gì tôi sử dụng đặc biệt bởi vì nó: hiển thị ngay bản xem trước với 1 nhấn một nút.

Tôi sử dụng macro để gửi phím bấm và nhấp chuột liên tục. Trong Windows, AutoHotKey là một phần mềm tuyệt vời và trong OS X, bạn có thể đọc về Automator loại AHK thay thế cho OsX .

Trong Windows (thay thế Ctrl bằng Cmd trong OS X) "Ctrl-s / chuyển sang cửa sổ Fx bất cứ nơi nào trong danh sách các cửa sổ được mở / Ctrl-r" bị ràng buộc với 1 phím không sử dụng để tránh sự thất vọng từ các tác vụ không quan tâm và cuối cùng sẽ cứu cánh tay tôi từ RSI :)