2013-05-27 12 views
12

Historia tła: Mam stronę z wieloma CSS, które zastępują się nawzajem. Jest tak wiele przekreślonych stylów CSS, więc nie chcę ich widzieć.Jak filtrować i pokazywać tylko zastosowane CSS w Narzędziach programistycznych Chrome (np. Firebug w Firefoksie)

Wiem, że Firebug w Firefoksie udostępnia tę funkcję (tylko pokaż zastosowany CSS), która może pokazać styl CSS w jakim pliku CSS jest stosowany (schludny!).

Jak mamy tę funkcję w Chrome? Próbowałem zainstalować Firebug Lite dla Chrome, ale bez powodzenia.

PS: Chrome ma kartę Styl obliczeniowy, ale nie pokazuje, jaki styl pochodzi z pliku CSS.

Odpowiedz

6

W narzędziach deweloperskich Chrome, w prawej kolumnie (gdzie CSS jest wyświetlany w panelu Elementy), pierwsza sekcja nosi nazwę "Styl obliczeniowy". Jeśli usuniesz zaznaczenie "pokaż dziedziczone", uzyskasz zgrabną listę stylów, które faktycznie odnoszą się do elementu. To pomaga?

+0

Mój qn to w zasadzie jak poznać konkretny styl CSS, z którego pochodzą pliki CSS? Na przykład mam 3 pliki CSS o nazwach "main.css", "client.css" i "mobile.css", które mają klasę ".title-header". Na stronie załadowałem te 3 pliki CSS, skąd mam wiedzieć, który plik został zastosowany? –

+2

W normalnym panelu Elementy (z HTML po lewej i CSS po prawej), w prawym górnym rogu każdej reguły stylu pokazuje, który plik jest i który numer linii jest. –

+0

Problem z używaniem karty Obliczone polega na tym, że nie mogę edytować ani wyłączyć poszczególnych stylów, takich jak na karcie Style. Firefox to ułatwia. – isherwood

Powiązane problemy