Có cách nào để xem trang web không có kiểu trong Chrome không?


25

Trong Firefox, Chế độ xem -> Kiểu trang -> Không có Kiểu cho phép xem một trang chưa được chỉnh sửa. Hữu ích cho một số trang web phụ thuộc quá mức JS / biểu định kiểu (ví dụ: Lifehacker).

Có bất kỳ chức năng tương tự nào trong Chrome Chrome của Google và / hoặc tôi sẽ truy cập cái này ở đâu không?

Phiên bản 19.0.1084.56 / Ubuntu.


Cách giải quyết tốt nhất cho điều này trong Chrome là sử dụng Firefox.
wha7ever - Tái lập lại

Câu trả lời:


25

Vô hiệu hóa tất cả các biểu định kiểu CSS

Do hầu hết các trang hiện đại xác định tất cả các kiểu trong các tệp CSS bên ngoài được bao gồm trong <head>, việc xóa headthẻ sẽ loại bỏ hiệu quả tất cả các kiểu (ngoại trừ các kiểu nội tuyến rõ ràng và các kiểu được đặt bởi các tập lệnh). Nhấp chuột phải vào một trang, chọn Kiểm tra từ menu ngữ cảnh và dán mục này vào tab Bảng điều khiển:

document.head.parentNode.removeChild(document.head);

Và đây là phiên bản bookmarklet của mã ở trên có thể được dán dưới dạng URL của dấu trang (chuyển đổi thanh dấu trang trong Chrome bằng + shift+ btrên Mac hoặc ctrl+ shift+ btrên Linux / Windows) :

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

Bạn cũng có thể nhập mã ở trên trực tiếp vào thanh địa chỉ nhưng đọc ghi chú ở cuối câu trả lời trước khi bạn làm điều đó. .

Việc xóa <head>cũng có thể được thực hiện từ tab devtools Elements , bằng cách nhấp chuột phải vào thẻ head và xóa nó thông qua menu ngữ cảnh:

xóa thẻ đầu trong Chrome

LƯU Ý: Xóa thẻ đầu là một cách tiếp cận mạnh mẽ vì nó sẽ giết tất cả các kiểu, javascript, phông chữ web, v.v. và nếu nội dung trang được javascript hiển thị thì rất có thể bạn sẽ nhận được một trang trống. Trên phần lớn các trang web, nó có thể sẽ cung cấp cho bạn kết quả mong đợi.

Trường hợp sử dụng thường xuyên hơn là loại bỏ những thứ gây phiền nhiễu cụ thể trên một trang, chẳng hạn như màu sắc, lề, iframe, v.v. Trong trường hợp như vậy, một trong những bookmarklets sau sẽ cung cấp kiểm soát chi tiết hơn.

Xóa màu sắc, hình nền, lề, miếng đệm, chiều rộng

Tạo dấu trang và thêm đoạn mã sau dưới dạng URL:

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

Bây giờ bạn có thể nhấp vào bookmarklet của mình để dọn sạch kiểu CSS trên trang hiện tại để dễ đọc hơn.

Lưu ý: Trên thực tế, có thể một trang có một <style>khối bên trong <body>thẻ - tiêu chuẩn HTML5 cho phép điều này và hầu hết các trình duyệt hỗ trợ nó. Cho đến nay, đây không phải là thông lệ, nhưng khi các khung web phát triển, chúng ta có thể thấy nhiều 'biểu định kiểu địa phương' hơn trong web tương lai.

Nếu bạn chỉ muốn cải thiện khả năng đọc thì việc tắt tất cả CSS có thể không cung cấp trải nghiệm tốt nhất. Đối với những trường hợp như vậy, bookmarklets dưới đây có thể cho kết quả tốt hơn:

Xóa các tiêu đề / chân trang không cuộn (tăng vùng đọc)

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Xóa iframe (giết hầu hết các biểu ngữ, v.v.)

javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29

Điều này cũng sẽ giết hầu hết các video nhúng, widget bình luận, v.v.

Xóa tất cả hình ảnh (duyệt chế độ văn phòng)

javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();

Lưu ý: cái này cần được sử dụng kết hợp với Xóa iframe ở trên, vì hầu hết các hình ảnh biểu ngữ thường nằm trong iframe và bookmarklet này chỉ hoạt động với tài liệu cấp cao nhất.

Các bookmarklets cũng có thể được sử dụng cho các trang web không hiển thị nội dung khi sử dụng trình chặn quảng cáo.

Bạn có thể sử dụng Trình tạo Bookmarklet để hủy mã hóa ( nút Định dạng ), chỉnh sửa mã cho phù hợp với nhu cầu của bạn và thu nhỏ lại ( nút Nén ) thành thứ gì đó bạn có thể dán làm URL dấu trang.

Các bookmarklets được liệt kê ở trên cũng sẽ hoạt động trên hầu hết các trình duyệt web di động trên cả iOS và Android. Các trình duyệt di động sẽ không chạy javascript từ thanh địa chỉ, nhưng bạn có thể thêm dấu trang, dán mã js làm URL, đặt nhãn, ví dụ clean, sau đó chạy nó bằng cách nhấn vào mục trong menu dấu trang (đối với iOS safari) hoặc gõ cleanvào thanh địa chỉ và sau đó nhấn vào dấu trang tương ứng trong trình đơn thả xuống tự động đề xuất. Điều này có thể cải thiện khả năng đọc cho các trang không có chế độ đọc .

LƯU Ý: Nếu bạn sao chép và dán bookmarklets trực tiếp vào thanh địa chỉ, bạn sẽ thấy các trình duyệt loại bỏjavascript: tiền tố - đây là một tính năng bảo mật của trình duyệt, vì vậy nếu bạn muốn kiểm tra bookmarklets trực tiếp từ thanh địa chỉ, thì bạn sẽ cần phải trả trước javascript:bằng tay trước mã js.

Tiện ích mở rộng của Chrome

Nếu bạn đang tìm kiếm một tiện ích mở rộng chrome thì có uMatrix nơi bạn có thể nhấp vào cột CSS để tắt tất cả CSS và kiểu và Nhà phát triển web trong tab CSS bạn có tùy chọn Tắt tất cả các kiểu .


uMatrix (mà tôi đã phát hiện ra một cách độc lập trong những năm qua) thực tế là thực hiện mánh khóe, trên cơ sở từng trang web (hoặc trang hoặc tên miền). Nhà phát triển web (được đề cập dưới đây) là quá hăng hái.
dredmorbius

7

Bạn có thể sử dụng tiện ích mở rộng Web Developer cho điều đó:

nhập mô tả hình ảnh ở đây


2
Cảm ơn. Điều đó dường như để làm các mẹo. Mặc dù Lifehacker vẫn không thể đọc được. Hoạt động trong w3m mặc dù. Trường học cũ là cách chúng tôi lăn ở đây.
dredmorbius

Hrm. Vấn đề là đây là cài đặt chung cho tất cả các trang / trang. Tôi vừa trải qua một vài khoảnh khắc của "WTF !!!" khi tôi đột nhiên bắt đầu thấy các thành phần kiểu dáng xuất hiện / biến mất khỏi các trang khác nhau khi tôi bật các cài đặt Nhà phát triển web khác nhau. Vì vậy, nó phần nào, nhưng không hoàn toàn, hữu ích.
dredmorbius

@ Dr.EdwardMorbius: Lạ. Đối với tôi, đây chỉ là tạm thời. Ngay cả việc làm mới trang cũng trở lại chế độ xem mặc định của trang. Nhưng tôi cho rằng đó không phải là điều bạn muốn, phải không?
Der Hochstapler

Vâng. Biểu định kiểu tắt cho phiên hiện tại sẽ là hiệu quả. Toggling CSS, JS, cookie, v.v., cho tất cả các trang web là đúng. Thật không may, đó dường như là những gì đã xảy ra. Tôi mô tả trải nghiệm này là "gây phiền nhiễu nhẹ".
dredmorbius

2

Không có phiên bản Chrome nào của No Style (chưa?), Vì vậy bạn phải sử dụng một phương pháp khác , chẳng hạn như một số tiện ích mở rộng khác có thể vô hiệu hóa kiểu.

Bạn có thể sử dụng tiện ích mở rộng Vô hiệu hóa biểu định kiểu để vô hiệu hóa biểu định kiểu nói chung hoặc tiện ích mở rộng Nhà phát triển web để bật hoặc tắt tất cả các kiểu. Pendule cũng là một phần mở rộng phổ biến cho mục đích này.

Bạn cũng có thể tắt các kiểu với Công cụ dành cho nhà phát triển [1] [2] :

Biểu tượng bánh răng -> Tab CSS -> Tắt tất cả các kiểu


Điều đó dường như vô hiệu hóa tất cả các bảng định kiểu cho tất cả các trang, không có khả năng bật / tắt chúng trên một trang nhất định. Không phải những gì tôi đang tìm kiếm.
dredmorbius

Cái nào? Có bốn lựa chọn.
Synetech

Tôi không thấy một biểu tượng mở rộng. Xoá nó.
dredmorbius

Huh?
Synetech

Không có biểu tượng cho tiện ích mở rộng "Tắt biểu định kiểu" trong khu vực thông báo ở bên phải cửa sổ URL. Cách duy nhất tôi có thể quản lý cài đặt là điều hướng qua Cờ lê -> Công cụ -> Tiện ích mở rộng -> Tắt Biểu định kiểu -> Tùy chọn. Không ... rất linh hoạt.
dredmorbius

1

Nếu bạn đang làm điều này vì lý do tốc độ thì tôi có thể đề xuất một giải pháp thay thế: Liên kết 2

Khi trình duyệt mở, nhấn gvà nhập url bạn muốn đến. Trình duyệt này nhẹ về các tiêu chuẩn mà nó hỗ trợ, nhưng nhanh đến mức đáng kinh ngạc ngay cả trên một PC rất cũ.


1
Đó là quyền riêng tư / giữ mức sử dụng JS ở mức tối thiểu. Tôi có xu hướng thích w3m hơn các nhóm trình duyệt giao diện điều khiển / elinks - công thái học tốt hơn và tôi khá quen với nó. Vâng, mặc dù, tôi thực sự quen thuộc với trình duyệt bảng điều khiển nhanh và nhẹ. Một số trang web chỉ đơn giản là bị hỏng mặc dù.
dredmorbius

1
Gotcha. Tôi thực sự không sử dụng phiên bản console, nhưng gui cũng nhanh như vậy. Nhưng vâng, bạn nói đúng, đôi khi các trang bị hỏng. Sẽ thật tuyệt nếu tất cả các trang xuống cấp một cách duyên dáng.
Gerry

2
Tôi đã được biết đến là dùng đến lynx, một số sed và 'fmt' trong những trường hợp cực đoan. Điều này làm cho bé Jesus khóc.
dredmorbius

1

Trong Firefox, Chế độ xem -> Kiểu trang -> Không có Kiểu cho phép xem một trang chưa được chỉnh sửa. Hữu ích cho một số trang web phụ thuộc quá mức JS / biểu định kiểu (ví dụ: Lifehacker). Có bất kỳ chức năng tương tự nào trong Chrome Chrome của Google và / hoặc tôi sẽ truy cập cái này ở đâu không? Phiên bản 19.0.1084.56 / Ubuntu. - Tiến sĩ Edward Morbius

...

Vâng. Biểu định kiểu tắt cho phiên hiện tại sẽ không hiệu quả. Toggling CSS, JS, cookie, v.v., cho tất cả các trang web là đúng. Thật không may, đó dường như là những gì đã xảy ra. Tôi mô tả trải nghiệm này là "khó chịu nhẹ". - Tiến sĩ Edward Morbius

Sử dụng thư viện jQuery, tại console(Chromium / Chrome, Firefox, Opera) sẽ xóa các kiểu tác giả khỏi tài liệu HTML:

(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()

https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js

Để bật hoặc tắt kiểu trong tài liệu HTML, điều này có thể hữu ích:

https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js

Tải jQuery vào tài liệu, từ tệp cục bộ hoặc từ CDN của jQuery, ghi nhật ký thành công, ghi nhật ký trạng thái kiểu, bật hoặc tắt kiểu tác giả bằng phím tắt phím cách hoặc tại bàn điều khiển.

Đã thử nghiệm trong Chromium / Chrome, Firefox và Opera cho cả tài liệu HTML cục bộ và trực tuyến.


1

Công cụ ưa thích hiện tại của tôi cho việc này là tiện ích mở rộng trình duyệt uMatrix , cho phép các điều khiển chi tiết hơn: vô hiệu hóa CSS, JS, hình ảnh hoặc các tính năng khác, bằng cách tải tên miền, liên quan đến trang web hiện tại. Các thay đổi có thể dễ dàng được bật, thực hiện vĩnh viễn hoặc được chọn làm quy tắc mặc định.

Điều này và sành điệu giải quyết hầu hết các nhu cầu tùy biến của người đọc của tôi. Chế độ đọc (Firefox) có xu hướng cung cấp nội dung theo kiểu thống nhất khá đáng tin cậy.

Mở rộng câu hỏi: Trên Chrome / Android, tôi không có tùy chọn khả thi và các giải pháp được đề xuất ở trên không hoạt động.


0

chỉ một dòng mã jquery ... sử dụng

jQuery("head").empty();

hoặc trong javascripts bạn có thể sử dụng

document.getElementsByTagName("head")[0].innerText="";

goto trang web của bạn và sau đó nhấn ctrl + shift + i bạn sẽ thấy một menu chọn giao diện điều khiển và dán document.getElementsByTagName("head")[0].innerText="";mã này và sau đó nhấn enter


2
Thông tin này sẽ được nhập vào đâu?
music2myear

goto trang web của bạn và sau đó nhấn ctrl + shift + i bạn sẽ thấy một menu chọn bảng điều khiển và dán document.getElementsByTagName("head")[0].innerText="";mã này và sau đó nhấn enter
Vishal choudhary

Không cần thiết phải đọc bình luận để hiểu câu trả lời. Vui lòng sử dụng nút EDIT để thêm thông tin này vào câu trả lời.
music2myear
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 cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.