Công cụ dành cho nhà phát triển Chrome: Làm cách nào để tìm hiểu những gì đang ghi đè quy tắc CSS?

196

Vâng, điều này là khá đơn giản. Nếu Công cụ dành cho nhà phát triển của Chrome cho tôi thấy rằng một kiểu bị ghi đè, làm thế nào để xem quy tắc CSS nào được ghi đè?

Tôi muốn biết liệu có bất cứ điều gì như "Chỉ cho tôi những gì ghi đè lên điều này" .

OBS: Làm ơn, đừng chỉ cho tôi đến Fireorms.

— Ramon K
nguồn

Công cụ dành cho nhà phát triển của Chrome cũng hiển thị cho bạn quy tắc ghi đè

— Zoltan Toth

Câu trả lời:

283

Sử dụng bảng Kiểu tính toán của trình kiểm tra phần tử. Mở rộng tài sản quan tâm để xem danh sách các quy tắc áp dụng và quy tắc nào đã thắng.

Ảnh chụp màn hình Chrome

— josh3736
nguồn

Đối với tôi, tab được tính toán được mở theo mặc định và do đó không được liệt kê dưới dạng tab, nó nên có một tiêu đề 'Tính toán', nếu không bạn có thể tìm kiếm trong một thời gian dài.

— MrFox

Kỹ thuật đã thay đổi một chút khi Chrome đã tiến bộ. Thay vì 'Mở rộng thuộc tính quan tâm', hãy nhấp vào kính gián điệp bên cạnh tài sản và nó sẽ hiển thị kiểu nào giành lại trong tab Kiểu.

— intotecho

@intotecho: Chrome 47 đã khôi phục bản mở rộng trong tab Tính toán kể từ khi thay đổi kính lúp. crorms.com/496263

— josh3736

Nếu TẤT CẢ chúng bị hủy thì sao? Có lẽ là do một kịch bản? Làm thế nào để bạn tìm ra ai đã làm điều đó?

— bóng tối

Nó vẫn ở đó dưới dạng tab "Tính toán" trên bảng Thành phần.

— josh3736

Bạn có thể chỉ cần nhìn vào những cái có cùng tên mà không nổi bật, hãy nhớ rằng danh sách là rất quan trọng.

Hoặc bạn có thể xem các kiểu tính toán. Họ sẽ là những phong cách thực sự được áp dụng.

— người dùng1902091
nguồn

crtrl + shift + c và kiểm tra phần tử. Sau đó tìm phong cách mà không có một dòng thông qua nó, trong hộp ở góc dưới bên phải.

ghi đè trong hầu hết các trường hợp ở trên cùng (và không có dòng nào qua nó, vì kiểu này là kiểu "chiến thắng").

— Peter Rasmussen
nguồn

Đó không phải là trường hợp khi một phong cách được gắn cờ là quan trọng

— JCorriveau