☰

Firefox 웹 개발자 도구에서 "적용된 스타일만 표시"하시겠습니까?

tag-icon • tag-icon firefox firefox-extensions firebug
Firefox 웹 개발자 도구에서 "적용된 스타일만 표시"하시겠습니까?

저는 오랫동안 Firebug 사용자였습니다. 내 Firefox는 최근에 51로 업데이트되었고 곧 Firebug에 문제가 발생하기 시작했습니다.

Firebug 페이지를 방문했을 때 더 이상 개발되지 않는다는 사실을 발견하고 충격을 받았습니다.

이제 계속 진행하기 위해 Firefox에 내장된 WDT(웹 개발자 도구)를 사용하기로 결정했습니다. 하지만 거기에는 한 가지 빠진 것이 있는 것 같습니다.

Firebug 검사기에서는 페이지의 요소를 선택할 때 "적용된 스타일만 표시" 또는 이와 유사한 옵션이 있었습니다. 이것은 WDT에서 누락된 것으로 보이며 패널에서 줄이 그어진 CSS 스타일을 모두 보는 것은 보기 흉합니다.

WDT에서 해당 기능을 사용할 수 있는 방법이 있나요?

파이어폭스

답변1

Firefox DevTools는 현재 해당 기능을 제공하지 않습니다(Firefox 51.0.1 기준). 그러므로 나는그것을 요구하는 버그 보고서.

또한 나는Firebug 사용자 마이그레이션 가이드에 메모를 추가했습니다..

답변2

그러한 옵션이 존재하지 않습니다. 그러나 다음을 사용할 수 있습니다.계산됨적용된 스타일만 표시하려면 탭을 선택하세요.

display: none그렇게 하려면 어떻게 든 기본 Firefox 개발자 도구 스타일을 편집하거나 덮어써야 합니다(예: ).

파일에 있음/devtools/client/themes/rules.css(라인 423):

.ruleview-overridden {
  text-decoration: line-through;
}

268행:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

이 기사또한 도움이 될 수 있습니다.

답변3

필요한 경우구하다적용된 스타일만 Chrome에서 Chrome 개발자 도구(여기 튜토리얼). 그러나 Firefox 솔루션을 원한다면 페이지를 단일 .html 파일로 저장한 다음 해당 파일 내에서 CSS만 가져올 수 있습니다.

그렇게 하려면 먼저 부가 기능의 Firefox 버전을 구하세요.단일 파일

SingleFile을 설치한 후 페이지를 .html 파일로 다운로드하고 태그 내부에 CSS를 복사할 수 있습니다 <style>.

축소될 것이므로 아마도 다음과 같은 도구를 사용하여 축소를 해제하고 싶을 것입니다.Unminify.com

이것을 시도하는 사람들은 단지 스타일이 그렇지 않기 때문에적용된, 반드시 "사용되지 않음"이라는 의미는 아닙니다. 특정 스타일을 요소에 추가하려고 시도하는 스크립트가 어딘가에 있을 수 있지만 캡처 시 적용되지 않으면 SingleFile(또는 Chrome Dev Tools)이 이를 포함하지 않습니다. 주의할 점은... 하지만 웹페이지의 특정 부분을 분리하고 해당 규칙 세트를 파악하려면 이 접근 방식이 유용할 수 있습니다.

관련 정보