2013-05-27 27 views
12

Câu chuyện nền: Tôi có một trang có nhiều CSS ghi đè lên nhau. Có rất nhiều kiểu CSS bị gạch chéo, vì vậy tôi không muốn thấy chúng.Cách lọc và chỉ hiển thị CSS được áp dụng trong Công cụ dành cho nhà phát triển Chrome (như Firebug trong Firefox)

Tôi biết Firebug trên Firefox cung cấp tính năng này (Chỉ hiển thị ứng dụng CSS), có thể hiển thị kiểu CSS nào trong tệp CSS đang được áp dụng (gọn gàng!).

Làm cách nào để chúng tôi có tính năng này trên Chrome? Tôi đã thử cài đặt Firebug Lite cho Chrome nhưng không may mắn.

PS: Chrome có tab Kiểu được tính toán nhưng không hiển thị kiểu nào đến từ tệp CSS nào.

Trả lời

6

Trong công cụ phát triển Chrome, trong cột bên phải (nơi CSS được hiển thị trong bảng Yếu tố), phần đầu tiên được gọi là "Kiểu được tính toán". Nếu bạn bỏ chọn "hiển thị thừa kế", bạn sẽ nhận được danh sách gọn gàng các kiểu thực sự áp dụng cho phần tử. cái đó có giúp ích không?

+0

Qn của tôi về cơ bản là làm cách nào để biết một kiểu CSS cụ thể đến từ tệp CSS nào? Ví dụ: tôi có 3 tệp CSS có tên là "main.css", "client.css" và "mobile.css", tất cả đều có lớp ".title-header". Trong trang, tôi đã tải 3 tệp CSS này, làm cách nào để biết tệp nào được áp dụng? –

+2

Trong bảng yếu tố thông thường (với HTML ở bên trái và CSS ở bên phải), ở trên cùng bên phải của mọi quy tắc kiểu, nó hiển thị cho bạn tệp nào trong đó và số dòng của nó. –

+0

Vấn đề với việc sử dụng tab Tính toán là tôi không thể chỉnh sửa hoặc tắt các kiểu riêng lẻ như tôi có thể trong tab Kiểu. Firefox giúp việc này trở nên dễ dàng hơn. – isherwood

Các vấn đề liên quan