Cách tắt CSS trong Trình duyệt cho mục đích thử nghiệm

Có cách nào để tôi có thể vô hiệu hóa tất cả CSS bên ngoài trong trình duyệt (Firefox, Chrome ...) không?

Khi sử dụng kết nối internet chậm hơn, đôi khi chỉ có trình duyệt HTML được tải bởi trình duyệt mà không có thông tin CSS. Có vẻ như trang đã được đặt thô trên màn hình. Bạn cũng sẽ nhận thấy điều này với StackOverflow.

Tôi muốn đảm bảo rằng trang web của tôi hiển thị OK ngay cả khi các tệp CSS không được tải.

Tôi không có nghĩa là tôi muốn chuyển đổi CSS bên ngoài thành nội tuyến. Nhưng tôi muốn một cách để vô hiệu hóa rõ ràng tất cả CSS khỏi trình duyệt để tôi có thể định vị lại các yếu tố của mình theo cách dễ đọc hơn.

Tôi biết tôi có thể xóa các mục <link rel = 'biểu định kiểu'>, nhưng nếu tôi có nhiều trang được liên kết thì sao?

Plugin Web Developer cho Firefox và Chrome có thể làm điều này

Khi bạn đã cài đặt plugin, tùy chọn có sẵn trong menu CSS. Ví dụ,CSS > Disable Styles > Disable All Styles

Ngoài ra, với thanh công cụ dành cho nhà phát triển, bạn có thể nhấn Alt+Shift+A.

Trong Chrome / Chromium, bạn có thể thực hiện việc này trong bảng điều khiển dành cho nhà phát triển.

1. Đưa lên bảng điều khiển dành cho nhà phát triển bằng ctrl-shift-j hoặc Menu-> Công cụ-> Bảng điều khiển dành cho nhà phát triển.
2. Trong bảng điều khiển dành cho nhà phát triển, duyệt đến tab Nguồn.
3. Ở góc trên bên trái của tab này là một biểu tượng với hình tam giác tiết lộ. Nhấn vào nó.
4. Duyệt đến <domain> → css → <css tệp bạn muốn loại bỏ>
5. Đánh dấu tất cả các văn bản và nhấn xóa.
6. Rửa và lặp lại cho mỗi biểu định kiểu bạn muốn tắt.

Firefox (Win và Mac)

• Qua thanh công cụ menu, chọn: "Xem"> "Kiểu trang"> "Không có kiểu"
• Thông qua Thanh công cụ dành cho nhà phát triển web, chọn: "CSS"> "Tắt kiểu"> "Tất cả kiểu"

Nếu Thanh công cụ Web Dev được cài đặt, mọi người có thể sử dụng phím tắt này: Command+ Shift+ S(Mac) và Control+ Shift+ S(Win)

• Safari (Mac): Thông qua thanh công cụ trình đơn, chọn "Phát triển"> "Tắt kiểu"
• Opera (Win): Qua menu, chọn "Trang"> "Kiểu"> "Chế độ người dùng"
• Chrome (Win): Thông qua biểu tượng bánh răng, chọn tab "CSS"> "Tắt tất cả các kiểu"
• Internet Explorer 8: Qua thanh công cụ menu, chọn "Xem"> "Kiểu"> "Không có kiểu"
• Internet Explorer 7: thông qua menu Thanh công cụ dành cho nhà phát triển IE: Vô hiệu hóa> Tất cả CSS
• Internet Explorer 6: Thông qua Thanh công cụ truy cập Web, chọn "CSS"> "Tắt CSS"

Kịch bản này hoạt động với tôi (hat hat to scrappingcola)

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

phong cách nội tuyến vẫn còn nguyên, mặc dù

Mở rộng trên ý tưởng của scrappingocola / renergy, bạn có thể biến JavaScript thành một bookmarklet thực thi chống lại javascript:uri để mã có thể được sử dụng lại dễ dàng trên nhiều trang mà không cần phải mở công cụ dev hoặc giữ bất cứ thứ gì trong clipboard của bạn.

Chỉ cần chạy đoạn mã sau và kéo liên kết đến dấu trang / thanh yêu thích của bạn:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

• Tôi sẽ tránh lặp qua hàng ngàn yếu tố trên một trang getElementsByTagName('*')và phải kiểm tra và hành động trên từng yếu tố .
• Tôi sẽ tránh dựa vào jQuery hiện có trên trang $('style,link[rel="stylesheet"]').remove()khi javascript bổ sung không quá cồng kềnh.

Cài đặt Adblock Plus, sau đó thêm *.cssquy tắc trong tùy chọn Bộ lọc (tab bộ lọc tùy chỉnh). Phương pháp này chỉ ảnh hưởng đến các bảng định kiểu bên ngoài . Nó không tắt các kiểu nội tuyến.

Vô hiệu hóa tất cả CSS bên ngoài

Phương pháp này thực hiện chính xác những gì bạn yêu cầu.

Một cách khác để đạt được giải pháp của @David Baucum trong ít bước hơn:

1. Nhấp chuột phải -> kiểm tra phần tử
2. Nhấp vào tên của biểu định kiểu ảnh hưởng đến thành phần của bạn (chỉ ở phía bên phải của tờ khai)
3. Đánh dấu tất cả các văn bản và nhấn xóa.

Nó có thể được xử lý trong một số trường hợp.

Vì hầu hết các câu trả lời dường như khá cũ ở đây, nên các mục trình đơn tham khảo mà tôi dường như không thể tìm thấy trong các phiên bản hiện tại của trình duyệt phổ biến, đây là cách thực hiện trong phiên bản hiện tại trong Firefox Developer Edition:

• Mở công cụ dành cho nhà phát triển ( CTRL + SHIFT + I)
• Chọn tab Trình chỉnh sửa Kiểu
• Ở đó bạn sẽ thấy tất cả các nguồn CSS trong tài liệu của bạn. Bạn có thể vô hiệu hóa từng người trong số họ bằng cách nhấp vào biểu tượng con mắt bên cạnh họ.

Đối với các trang dựa vào CSS bên ngoài (hầu hết các trang hiện nay), một giải pháp đơn giản và đáng tin cậy là tiêu diệt headphần tử:

document.querySelector("head").remove();

Nhấp chuột phải vào trang này (trong Chrome / Firefox), chọn Kiểm tra , dán mã vào bảng điều khiển devtools và nhấn Enter .

Phiên bản bookmarklet của cùng một mã mà bạn có thể dán làm URL của dấu trang:

javascript:(function(){document.querySelector("head").remove();})()

Bây giờ, nhấp vào dấu trang trên thanh Favorites của bạn sẽ hiển thị trang mà không có bất kỳ bảng định kiểu css nào.

Loại bỏ phần đầu sẽ không hoạt động đối với các trang sử dụng kiểu nội tuyến.

Nếu bạn tình cờ sử dụng Safari trên MacOS thì:

1. Mở Tùy chọn Safari ( cmd+ ,) và trong tab Nâng cao, bật hộp kiểm "Hiển thị menu Phát triển trong thanh menu".
2. Bây giờ trong menu Develop, bạn sẽ tìm thấy tùy chọn Vô hiệu kiểu .

Tôi đã thử trong các công cụ Chrome Developer và phương pháp này chỉ hợp lệ nếu CSS được bao gồm dưới dạng các tệp bên ngoài và nó sẽ không hoạt động cho các kiểu nội tuyến.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

Hoặc là

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

Giải thích

1. document.querySelectorAll('link')được tất cả các nút liên kết. Điều này sẽ trả về mảng các phần tử DOM. Lưu ý rằng đây không phải là đối tượng Array của javascript.
2. Array.prototype.forEach.call(linkElements các vòng lặp thông qua các yếu tố liên kết
3. element.remove() xóa phần tử khỏi DOM

Kết quả trong trang HTML đơn giản

bạn có thể chặn bất kỳ yêu cầu nào (ngay cả đối với một tệp css) từ trình kiểm tra bằng cách sau:
    Nhấp chuột phải> chặn URL yêu cầu
mà không vô hiệu hóa các tệp css khác> https://umaar.com/dev-tips/68-block-requests/ Đó là một tính năng thanh tra tiêu chuẩn, không cần plugin hay thủ thuật

Trên Firefox, cách đơn giản nhất là thông qua lệnh menu Xem> Kiểu trang> Không có kiểu. Nhưng điều này cũng tắt các hiệu ứng của một số đánh dấu HTML trình bày. Vì vậy, sử dụng các plugin theo đề xuất của @JoelKuiper thường tốt hơn; chúng cho phép linh hoạt hơn (ví dụ: tắt chỉ một số biểu định kiểu).

Thật ra, nó dễ hơn bạn nghĩ. Trong mọi trình duyệt, nhấn F12 để hiển thị bảng điều khiển gỡ lỗi. Điều này hoạt động cho IE, Firefox và Chrome. Không chắc chắn về Opera. Sau đó nhận xét CSS trong các cửa sổ phần tử. Đó là nó.

Trong khi kiểm tra HTML bằng công cụ Phát triển Trình duyệt mà bạn thích (ví dụ: Chrome Devtools), hãy tìm <head>phần tử và xóa nó.

Lưu ý rằng điều này cũng sẽ loại bỏ js nhưng đối với tôi đó là cách nhanh nhất để có được trang khỏa thân .

Tất cả các câu trả lời được đề xuất chỉ loại bỏ css cho tải trang đó. Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể không muốn tải css chút nào:

Chrome Dev Tools> Tab Network> Nhấp chuột phải vào biểu định kiểu trong câu hỏi> chặn url yêu cầu

Đối với những người không muốn bất kỳ plugin hoặc nội dung nào khác, Chúng tôi có thể sử dụng document.styleSheets để tắt / bật css.

// mã để vô hiệu hóa tất cả các css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Nếu bạn sử dụng chrome, bạn có thể tạo một chức năng và thêm vào đoạn trích của mình. Vì vậy, bạn có thể sử dụng bảng điều khiển để bật / tắt css cho bất kỳ trang web nào.

// Đoạn trích -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// trong bảng điều khiển

disableCss() // by default is disable
disableCss(false) // to enable