Cách nhanh hơn để phát triển và thử nghiệm các bản định kiểu in (tránh xem trước bản in mỗi lần)?

179

Đây là quá trình của tôi ngay bây giờ:

  1. Lưu các thay đổi vào print.css
  2. Mở trình duyệt và làm mới trang.
  3. Nhấp chuột phải và chọn In> Xem trước bản in (Firefox, nhưng bất kỳ trình duyệt nào thực sự)

Đó là bước 3 làm tôi bực mình và tôi tự hỏi liệu có thể cắt nó ra khỏi quy trình bằng một plugin hay thứ gì đó không. Chỉ cần chọn xem một trang dưới dạng phương tiện in, sau đó chỉ cần làm mới để xem các thay đổi.

Làm thế nào để bạn kiểm tra bảng định kiểu in của bạn? Bạn luôn nhấp vào xem trước bản in sau khi làm mới?

css  firefox 
— Michael
nguồn
Cảm ơn những lời đề nghị tất cả mọi người. Tôi rất thích nếu Mozilla sẽ thêm cài đặt dành cho nhà phát triển để bật khả năng "Làm mới" trên cửa sổ xem trước khi in (không phải mặc định để tránh sự nhầm lẫn của người dùng cuối). Đó là giải pháp lý tưởng của tôi, bởi vì (đồng ý với Faust) tôi thường cần phải xem nó trong Print Preview để hiển thị chính xác cách nó sẽ hiển thị (hình ảnh nền, ngắt trang, lề, v.v.). Chrome có thể giúp một chút vì nó hiển thị bản xem trước theo mặc định. Tôi cũng sẽ xem xét tiện ích bổ sung Firefox PrintPreview được đề xuất bởi slolife.
— Michael
Điều này sẽ không hoạt động đối với Mac vì không có tùy chọn Print Preview, tuy nhiên, bạn có thể có tùy chọn PDF trong hộp thoại in của mình, nơi bạn có thể mở bản xem trước "được in" thành tệp PDF tạm thời. Không chắc chắn nếu tính năng này được tích hợp vào OSX hoặc do tôi đã cài đặt Acrobat.
— Neil Monroe
Chỉ cần làm rõ, có vẻ như trong OSX, tùy chọn Print Preview không có sẵn trong menu File ..., nhưng với phần mở rộng Print / Print Preview, bạn có thể có một nút để khởi chạy nó. addons.mozilla.org/en-US/firefox/addon/printprint-preview
— Neil Monroe

Câu trả lời:

208

Bạn có thể sử dụng Trình mô phỏng loại phương tiện Chrome như được chấp nhận trong bài đăng Xem css in trong trình duyệt .

CẬP NHẬT 21/11/2017

Tài liệu DevTools cập nhật có thể được tìm thấy ở đây: Xem một trang ở chế độ in .

Để xem một trang ở chế độ in:
1. Mở Menu Lệnh . ( tl; dr Cmd+Shift+P (Mac) hoặc Ctrl+Shift+P(Windows, Linux))
2. Bắt đầu nhập Renderingvà chọn Show Rendering.
3. Đối với menu thả xuống Mô phỏng CSS Media , chọn in .

CẬP NHẬT 29/02/2016

Các tài liệu DevTools đã di chuyển và liên kết trên cung cấp thông tin không chính xác. Các tài liệu cập nhật liên quan đến mô phỏng loại phương tiện có thể được tìm thấy ở đây: Kiểu xem trước cho nhiều loại phương tiện hơn .

Mở ngăn kéo mô phỏng DevTools bằng cách nhấp vào biểu tượng Ghi đè khác ••• ghi đè thêm ở góc trên bên phải của chế độ xem trình duyệt. Sau đó, chọn Phương tiện trong ngăn kéo mô phỏng.

CẬP NHẬT 12/04/2016

Thật không may, có vẻ như các tài liệu đã không được cập nhật liên quan đến việc mô phỏng in. Tuy nhiên, Trình mô phỏng phương tiện in đã di chuyển (một lần nữa):

  1. Mở DevTools Chrome
  2. Nhấn esctrên bàn phím của bạn
  3. Nhấn ⋮ (dọc ellipsis)
  4. Chọn Rendering
  5. Đánh dấu vào phương tiện in

Xem ảnh chụp màn hình bên dưới:

cài đặt kết xuất 12/04/2016

CẬP NHẬT 28/06/2016

Tài liệu dành cho nhà phát triển của Google xung quanh DevTools của Chrome và tùy chọn "Giả lập phương tiện" đã được cập nhật cho Chrome> 51:

https://developers.google.com/web/tools/chrom-devtools/sinstall?hl=vi#emulation-print-media

Để xem trang ở chế độ xem trước khi in, hãy mở menu chính DevTools, chọn Công cụ khác > Cài đặt kết xuất , sau đó bật hộp kiểm mô phỏng phương tiện với menu thả xuống được đặt để in .

cài đặt kết xuất 28/06/2016

CẬP NHẬT 24/05/2016

Việc đặt tên cài đặt đã thay đổi một lần nữa:

Để xem một trang trong chế độ xem trước khi in, mở DevTools menu chính, chọn Công cụ khác > Rendering , và sau đó kích hoạt các Emulate CSS Truyền thông checkbox với các thiết lập trình đơn thả xuống để in .

giả lập phương tiện CSS

— Patrik
nguồn
2
@SupaIrish Có, cho Firefox xem câu trả lời của Szymon.
— djule5
Các tài liệu hoàn toàn lỗi thời và không có phương tiện css mô phỏng ở bất cứ đâu trong khu vực "nhiều phần ghi đè". Nó đã đi đâu?
— TetraDev
2
Nó nằm dưới "console (esc)" rồi "3 dot dọc" rồi "render" rồi "giả lập phương tiện in" ở phía dưới - tại sao lại ẩn như vậy tôi không biết.
— TetraDev
trên osx chọn tùy chọn này dường như không làm gì cả?
— v3nt
165

Trong Firefox, bạn có thể nhập Shift+F2để mở dòng lệnh Thanh công cụ dành cho nhà phát triển, sau đó nhậpmedia emulate print

Bạn cũng có thể mô phỏng các loại phương tiện khác theo cách này.

— Szymon Świtała
nguồn
3
Tôi đã nhận thấy rằng điều này có thể không phản ánh cùng một chế độ xem như được cung cấp trong bản xem trước bản in - đặc biệt là khi có thêm khoảng trắng - hãy đảm bảo, bản xem trước bản in của bạn không khác sau khi bạn thực hiện xong bước này.
— jave.web
15
Đáng buồn thay, GLCI đã bị loại khỏi firefox với phiên bản 62. Một lực cản.
— ghi lại
4
Làm cách nào để kích hoạt tính năng này mà không có GLCI (shift + F12)?
— StR
3
@StR Bạn có thể mô phỏng các kiểu in trong Firefox theo cách khác ngay bây giờ: stackoverflow.com/questions/47877112/
— mẹo
2
Tôi vừa thử nghiệm những gì @TylerH đã nói trong Firefox v68 và nó hoạt động.
— StR
22

Tiện ích mở rộng thanh công cụ Firefox + Web Developer có cách bật / tắt các biểu định kiểu khác nhau.

Nhìn dưới menu CSS. Có một menu để vô hiệu hóa và kích hoạt các bảng định kiểu riêng lẻ và một menu "Hiển thị theo loại phương tiện".

Ngoài ra, để giảm các bước để vào PrintPreview trong Firefox, hãy thử tiện ích mở rộng PrintPreview , điều này sẽ tạo ra một nút thanh công cụ.

Đối với Chrome, có một cổng của tiện ích mở rộng đó . Từ những gì tôi có thể nói với phiên bản Chrome, bạn có thể chọn "Hiển thị kiểu in"

— người nô lệ
nguồn
12

Tôi sẽ không sử dụng bất kỳ phương pháp thử nghiệm nào không liên quan đến xem trước khi in. Có quá nhiều sự khác biệt: hình ảnh nền hoàn toàn không hoạt động trong bản in, nhưng hiển thị trong bối cảnh màn hình bình thường là chính trong số đó.

Trong Chrome, control+pngay lập tức để in xem trước. (Chỉ cần quên di chuyển đến thanh menu của bạn). Điều đó khá dễ dàng.

— Faust
nguồn
Chrome chắc chắn không dính vào những gì được hiển thị trong mô phỏng phương tiện in. Tôi đã thấy rằng nếu bạn không có chức năng in lại truy vấn phương tiện chrome chạy trong dưới 2ms, thì nó sẽ không thay đổi.
— cchamberlain
1
Vấn đề với bản xem trước in là nó không cho phép kiểm tra phần tử, vì vậy việc gỡ lỗi những thứ như phần đệm và lề là vô cùng khó khăn. Xem các yếu tố đó một cách riêng biệt là điều tốt nhất bạn có thể có khi cố gắng gỡ lỗi các vấn đề về hộp.
— Seiyria
6

Bạn chỉ có thể vô hiệu hóa kiểu màn hình của mình và thay đổi loại phương tiện thành "màn hình" cho biểu định kiểu in của bạn trong khi thử nghiệm. Điều này sẽ không hoàn toàn giống như sử dụng bản xem trước in thực (ngắt trang, chiều rộng tài liệu, v.v.), nhưng nó vẫn cung cấp cho bạn một ý tưởng khá hay.

— Sư Tử
nguồn
5

đơn giản đối với tôi (không có @screenphần hoặc tương tự 1 ) với FF :

  • đặt @media print { ...phần ở cuối nội dung CSS của bạn
  • chỉ bình luận khai báo bao bọc/*@media print {*/ ... /*}*/
    • do đó, áp dụng các công cụ in cho phong cách của bạn ngay lập tức ghi đè chúng khi áp dụng
  • (Tôi đang sử dụng LiveReload do đó trang trình duyệt của tôi làm mới ngay lập tức sau khi lưu thay đổi)
  • ( nếu không , nếu không sử dụng LiveReload :) nhấn CTRL+Rđể tải lại trang
  • bây giờ bạn đã có thể thực hiện rất nhiều điều chỉnh CSS in điển hình (kiểu phông chữ, cỡ chữ, khoảng cách, màu sắc) khi chưa cần xem trước bản in
  • nhấn ALT+F+Vđể mở xem trước bản in và ALT+Wđóng lại

1 : nếu ai đó có chúng, việc đưa ra / bình luận, tùy thuộc vào phương tiện được thử nghiệm của bạn, có thể không phải là vấn đề lớn

— Andreas Dietrich
nguồn
3

Như được mô tả trong bài đăng khác này ( Sử dụng Trình kiểm tra phần tử của Chrome trong Chế độ xem trước bản in? ), Bạn có thể sử dụng chrome để mô phỏng đơn giản biểu định kiểu in. Điều này thật tuyệt khi bạn có thể sử dụng trình kiểm tra để xem các phong cách đến từ đâu thay vì đoán khi bạn thấy hộp thoại in xuất hiện.

Truy cập hộp thoại Ghi đè Cài đặt bằng cách nhấp vào biểu tượng bánh răng ở góc dưới bên phải của Trình kiểm tra phần tử của Chrome. Sau đó chọn in làm loại phương tiện đích.

Tuyệt vời!

— Từ thiện
nguồn
2

Ít nhất là trong Chrome: Trong quá trình phát triển, hãy thêm vào thẻ body onload="window.print()" . Điều này sẽ khiến chế độ in mở ngay lập tức sau khi bạn làm mới.

Thật không may, có vẻ như các công cụ dành cho nhà phát triển được sử dụng nhiều vì về cơ bản nó là một tệp PDF nhúng.

Ngẫu nhiên có nhiều cách để loại bỏ bước 2. Một cách phổ biến là LiveReload.

— nafg
nguồn
0

Bạn có thể thử tạm thời xóa biểu định kiểu thông thường của mình và chỉ tải trong bản in bằng thẻ liên kết thông thường.

— Andrew
nguồn
0

Trong Chrome 62, cmd-R / cmd-P hoạt động tốt trên máy Mac để hiển thị bản xem trước đẹp của trang in theo kiểu @media.

Điều này có thể truy cập thông qua elipsis dọc ở phía trên bên phải của cửa sổ trình duyệt (không phải Công cụ dành cho nhà phát triển) / In ...

Sử dụng esc để hủy cửa sổ xem trước.

Vì vậy, đối với quy trình làm việc của tôi với IntelliJ IDEA và Chrome, đó là: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab và tôi quay lại IDE.

Chrome 62 trong Windows 10 có cùng menu In ... ở cùng một nơi, có thể truy cập bằng ctrl-p: in trong Chrome 62

— Công nghệ Mojo
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.