Tôi đang làm việc để phát triển một trang web và cần phải làm việc trên chế độ xem in. Thông thường, khi tôi gặp sự cố về bố cục, tôi sử dụng Trình kiểm tra phần tử của Chrome. Tuy nhiên điều này không tồn tại trong chế độ xem trước in.

Có plugin Chrome hoặc một số cách khác để thay đổi phương tiện xem của bạn trong chính chrome, để xem một trang như một máy in không? Tôi cho rằng nó không phải là một giải pháp cụ thể của Chrome, nhưng đó là trình duyệt chính của tôi vì vậy thật tuyệt khi có một giải pháp trên trình duyệt.

Ngay bây giờ tôi chỉ tập trung vào phương tiện xem trước bản in, nhưng sẽ rất lý tưởng khi có thể thay đổi thành bất kỳ loại phương tiện được hỗ trợ nào (ví dụ: tất cả / chữ nổi / dập nổi / cầm tay / in / chiếu / màn hình / lời nói / tty / TV).

Lưu ý: Câu trả lời này bao gồm một số phiên bản của Chrome, di chuyển để xem v52 , v48 , v46 , v43 và v42 mỗi với những thay đổi cập nhật của họ.

Chrome v52 +:

• Mở Công cụ dành cho nhà phát triển (Windows: F12hoặc Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Nhấp vào Customize và DevTools kiểm soát nút bánh hamburger menu và chọn Công cụ khác> Rendering thiết lập (hoặc Rendering trong các phiên bản mới hơn).
• Kiểm tra các phương tiện in Emulate hộp kiểm tại Rendering tab và chọn Print loại phương tiện truyền thông.

Chrome v48 + (Cảm ơn Alex vì đã chú ý):

• Mở Công cụ dành cho nhà phát triển ( CTRLSHIFTIhoặc F12)
• Nhấp vào nút Chuyển đổi chế độ thiết bị ở góc trên cùng bên trái ( CTRLSHIFTM).
• Đảm bảo bảng điều khiển được hiển thị bằng cách nhấp vào Hiển thị bảng điều khiển trong menu tại (1) ( ESCphím bật tắt bảng điều khiển nếu Thanh công cụ dành cho nhà phát triển có tiêu điểm).
• Kiểm tra phương tiện truyền thông in Emulate ở tab render mà có thể được mở bằng cách chọn Rendering trong menu ở (2).

Chrome v46 +:

• Mở Công cụ dành cho nhà phát triển ( CTRLSHIFTIhoặc F12)
• Nhấp vào nút Chuyển đổi chế độ thiết bị ở góc trên cùng bên trái (1).
• Đảm bảo bảng điều khiển được hiển thị bằng cách nhấp vào nút menu (2)> Hiển thị bảng điều khiển (3) hoặc nhấn ESCphím để chuyển đổi bảng điều khiển (chỉ hoạt động khi Thanh công cụ dành cho nhà phát triển có tiêu điểm).
• Mở tab Thi đua (4)> Phương tiện (5) , kiểm tra phương tiện CSS và chọn in (3).

Chrome v43 +:

• Biểu tượng ngăn kéo ở bước 2 đã thay đổi.

Chrome v42:

• Mở Công cụ dành cho nhà phát triển ( CTRLSHIFTIhoặc F12)
• Nhấp vào nút Chuyển đổi chế độ thiết bị ở góc trên cùng bên trái (1).
• Đảm bảo ngăn kéo được hiển thị bằng cách nhấp vào nút Hiển thị ngăn kéo (2) hoặc nhấn ESCphím để chuyển ngăn kéo.
• Trong phần Thi đua> Phương tiện kiểm tra phương tiện CSS và chọn in (3).

Đã thay đổi trong Chrome 32 35+

(Trong Chrome 35+, tab "Thi đua" được hiển thị theo mặc định. Ngoài ra, bảng điều khiển có sẵn từ bất kỳ tab chính nào.)

1. Trong DevTools, đi tới cài đặt-> Ghi đè
2. bật "Hiển thị chế độ xem Thi đua trong ngăn kéo bàn điều khiển"
3. Đóng cài đặt, chuyển đến tab 'Thành phần'
4. Nhấn Escđể đưa lên bàn điều khiển
5. Chọn tab "Thi đua", nhấp vào "Màn hình"
6. Cuộn xuống "CSS Media", chọn "in"

Tùy chọn này không có sẵn (chưa?) Trong tab giao diện điều khiển.

Vì Chrome 32, bạn có CSS mediatùy chọn trong Screenphần của Emulationtab ngăn kéo .

Chỉ cần kích hoạt nó, chọn printlàm loại phương tiện đích và - kìa - trang của bạn được hiển thị [gần như] theo cách nó sẽ được in.

Sử dụng Escđể mang lên ngăn kéo nếu nó không nhìn thấy.

Kể từ Chrome 48 (và có lẽ một vài phiên bản trước đó), chức năng dường như đã di chuyển một lần nữa:

Một vài bước đầu không thay đổi:

1. Nhấn F12để hiển thị các công cụ dành cho nhà phát triển

2. Nhấn ESCđể mở bàn điều khiển

Theo các câu trả lời trước đó, cài đặt có thể được tìm thấy trong tab "Thi đua". Như được hiển thị trong các hình ảnh bên dưới, giờ đây nó đã được chuyển sang tab "Kết xuất", có thể được đưa lên bằng cách nhấp vào ba dấu chấm ở bên trái của tab "Bảng điều khiển".

Xin vui lòng xem bài viết này

Sau đó, chọn tab "ghi đè"

Kể từ Chrome 48+, bạn có thể truy cập bản xem trước in qua các bước sau:

1. Mở công cụ dev - Ctrl/Cmd+ Shift+ Ihoặc nhấp chuột phải vào trang và chọn 'Kiểm tra'.

2. Nhấn Escđể mở ngăn kéo bổ sung.

3. Nếu 'Kết xuất' chưa được hiển thị, hãy nhấp vào 3 chấm kebab và chọn 'kết xuất'.

4. Chọn hộp kiểm 'Giả lập phương tiện in'.

Từ đó Chrome sẽ hiển thị cho bạn phiên bản in của trang của bạn và bạn có thể kiểm tra phần tử và khắc phục sự cố giống như phiên bản trình duyệt.

Nếu bạn đang gỡ lỗi CSS bằng Print As PDF trong Google Chrome và màu nền của phần tử CSS của bạn không hiển thị, thì hãy đảm bảo hộp kiểm 'Đồ họa nền' được đánh dấu. Tôi đã dành gần 30 phút để gỡ lỗi CSS của mình và tự hỏi điều gì khiến nền CSS của tôi bị bỏ qua.

Trong Chrome v51 trên máy Mac, tôi đã tìm thấy cài đặt kết xuất bằng cách nhấp vào góc trên bên phải, chọn Công cụ khác> Cài đặt kết xuất và kiểm tra nút Phương tiện mô phỏng trong các tùy chọn được cung cấp ở dưới cùng của cửa sổ.

Cảm ơn tất cả các áp phích khác đã dẫn tôi đến điều này, và ghi nhận cho những người cung cấp câu trả lời mà không có hình ảnh.

Chrome v67 (mac):

1. Nhấn và giữ Cmd+opt+jđể mở công cụ dev
2. nhấp ...vào phía bên phải và chọn: Thêm công cụ >> Kết xuất
3. Khi cửa sổ Kết xuất hiển thị ở dưới cùng của màn hình, hãy mô phỏng phần CSS Media và chọn: "Màn hình" từ danh sách thả xuống.
4. Chuyển đến "Tệp >> In" và bạn sẽ thấy chế độ xem bạn muốn in.

Hình ảnh mô tả ở trên cho Chrome v67 trên máy mac:

Nơi tìm tab Kết xuất: Nhấp vào ...bên phải và chọn: Thêm công cụ >> Kết xuất

Cách nhận chế độ xem "màn hình" để in: Khi cửa sổ Kết xuất hiển thị ở dưới cùng của màn hình, hãy mô phỏng phần CSS Media và chọn: "Màn hình" từ danh sách thả xuống.

Hy vọng nó giúp.

Với các phím tắt có sẵn, cách nhanh nhất là

1. Mở Công cụ dành cho nhà phát triển

   • Windows: F12hoặc Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Mở Menu Lệnh

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

3. Nhập printvà chọn Mô phỏng loại phương tiện in CSS từ menu ngữ cảnh

   

Nhìn vào câu trả lời xuất sắc và hiện đang được đánh giá cao nhất của lmeurs , tôi nghĩ giải pháp này cũng có thể duy trì ổn định theo thời gian.

Chrome v50:

Cách 1:

1. Menu> Công cụ khác> Cài đặt kết xuất (xem hình ảnh)
2. Xuống: Tab kết xuất> Mô phỏng phương tiện "in"

Cách 2:

1. Mở Bảng điều khiển [esc]
2. Menu Console> kết xuất