인스펙터 (웹킷, 방화범 등)에서 CSS 변경 사항 내보내기

CSS로 작업 할 때 브라우저 (예 : Chrome)에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 클릭 한 다음 바로 CSS를 편집합니다. 화살표 키를 사용하여 여백 및 패딩과 같은 항목을 변경하면 항목을 매우 쉽게 정렬 할 수 있습니다.

그런 다음 변경 사항을 적용하여 CSS 파일에 적용하는 것은 그리 어렵지 않지만 검사기에서 선택기를 마우스 오른쪽 버튼으로 클릭하고 "내보내기"또는 "복사"를 선택하고 내에서 내용을 사용할 수 있도록하면 멋질 것입니다. 클립 보드.

이와 같은 것이 존재합니까?

나는 적어도 Chrome v14에서 이것에 대한 답을 찾았습니다.

Elements 섹션에서 CSS 규칙 옆에있는 "filename : linenumber"링크를 클릭하면됩니다. 표시되는 CSS 파일에는 모든 수정 사항이 포함됩니다.

이 장소는 정확히 :

Chrome에서는 소스 탭에서 CSS 파일을 마우스 오른쪽 버튼으로 클릭하고 "로컬 수정"을 클릭 할 수 있습니다.

이것은 모든 로컬 변경 사항을 보여줍니다. 각 개정에는 타임 스탬프가 있으며 이전 개정으로 롤백 할 수 있습니다.

이 튜토리얼 의 라이브 편집 및 개정 내역 섹션을 참조하십시오 .

Firediff 는 변경 사항 을 추적하는 Firebug 애드온입니다. 에서 수행 된 입니다. HTML 창에서 수행 할 모든 작업 (훌륭함)뿐만 아니라 웹 개발자 도구 모음 확장의 간단한 사용 (그다지 좋지 않음)도 기록합니다. px로 글꼴 크기 정보를 얻으려면 Shift-Ctrl-F를 사용합니다.

Chrome에서 Firebug 확장 프로그램을 보았지만 테스트하지는 않았으며 Firefox와 함께 Firediff를 사용합니다.

나는 정확히 이것을 수행하는 Chrome 확장 프로그램을 만들었습니다.

StyleURL 이라고 합니다. Chrome Inspector에서 변경 한 모든 CSS를 가져와 유효한 CSS를 diff로 출력합니다 : https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

다음은이 페이지에 "padding-bottom : 50px"를 추가 한 예입니다.

오픈 소스이며 GitHub에도 있습니다 : https://github.com/Jarred-Sumner/styleurl-extension

Chrome에는 CSS의 모든 수정 사항을 표시하는 콘솔 서랍 의 변경 사항 탭 도 있습니다 . 수출은 아니지만 최소한 변경된 사항을 빠르게 파악하는 것은 매우 편리합니다.

나는 이전 에이 제품을 제안했습니다 (나는 어떤 식 으로든 관련이 없습니다).

http://www.skybound.ca/

우수한 제품. 당신이 찾고있는 것과 훨씬 더 비슷하게 들립니다.

편집 : 여기에 몇 가지 다른 답변이 Google 크롬의 로컬 파일 링크 기능에 대해 언급했습니다 (매우 멋진). 다른 답변을 확인하세요!

외부 CSS를 편집하는 경우 최신 버전을 리소스 패널에서 DnD를 지원하는 텍스트 편집기로 드래그 할 수 있습니다 ( http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ 참조 , 자세한 내용은 "Persisting Changes"섹션을 참조하십시오.) CSS 변경 사항을 이전 버전의 스타일 시트 리소스로 되돌릴 수도 있습니다 (스타일 시트 개정판의 오른쪽 클릭 팝업 메뉴에서).

cloudworks에서 언급했듯이 이에 대한 대답이 변경되었습니다. 이제 Chrome DevTools Autosave 확장 프로그램 을 사용하면이 작업을 잘 수행 할 수 있습니다 . 이 도구는 Chrome 개발자 도구 콘솔 내에서 변경된 CSS 및 자바 스크립트를 추적하고 로컬 파일에 다시 저장합니다. 확장 설치 및 설정에 대한 지침은 @addyosmani 의 블로그 ( 여기) 에서 작성한 가이드를 참조 하십시오 .

확장 프로그램을 자세히 설명 하는 편리한 스크린 캐스트 도 있습니다.

Workspaces 를 사용하면 검사기 (Chrome)에 입력 할 때 CSS를 저장할 수 있습니다. 문제는 모든 변경 사항이 자동으로 저장되며 http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ 및 Chrome 개발자 도구에서 CSS 변경 사항 자동 저장 사용 안함 에서 지적한대로이 기능을 사용 중지 할 수있는 방법이 없다는 것입니다 . .

Firefox와 Chrome 모두 현재이 기능을 지원하지만 일부 플랫폼에서는 모든 Chrome에 기본적으로 표시되지 않는 경우 "변경"보기를 활성화해야 볼 수 있습니다 (쿠분투 Linux 20.04에서는 그렇지 않습니다. 기본적으로 사용하도록 설정하는 방법은 다음 과 같습니다. 개발자 도구 모음의 "개발 도구 사용자 지정 및 제어"버튼> "추가 도구"> "변경" 으로 이동하면 버튼에 탭이 나타납니다.

Firefox에서는 활성화 할 필요가 없지만 Chrom * 세계에서 온 경우 찾기가 어려울 수 있습니다. "Inspector"탭에서 오른쪽의 마지막 섹션을 확인하십시오.

Firefox 스톡 개발 도구를 사용하는 경우 도구 대화 상자에서 직접 CSS를 편집 할 수 있습니다. CSS 뷰포트 버튼 ( {}심볼이 있는 맨 위에있는 버튼)을 클릭하고 CSS를 직접 편집 할 수 있습니다. 브라우저에서 실시간으로 업데이트되며 완료되면 CSS 파일에 직접 복사하여 붙여 넣습니다. 좋은!

특별히 Safari에 대한 답변을 추가하려면 가능합니다.

기존 CSS 파일에 대한 Inspector의 Styles 섹션에서 CSS를 편집 할 때 Cmd-S 전체 파일을 변경 사항과 함께 다시 저장할 . 그러나 Sass / 전 처리기 / 번들링으로 CSS 생성 등과 같은 메타 언어를 사용하는 경우 CSS 소스 맵에서 가능할 수 있지만 이것이 실제로 그 문제를 해결한다고 생각하지 않습니다.

스타일 섹션 상단에서 CSS를 편집 Style Attribute하여 인라인 스타일 (기존 CSS 파일에 연결되지 않음)을 추가하면 이러한 모든 변경 사항을 쉽게 내보낼 수없는 것 같습니다. 지금은 각 요소에 대해 수동으로 재정의를 복사하여 붙여 넣습니다.

공식 Apple 문서는 약간 날짜가 있지만 여기에서 찾을 수 있습니다 : Web Inspector Tutorial-Editing Code to Change Your Webpage .

Chrome의 CSS 검사기에서 + 버튼을 클릭 한 채로 검사기 스타일 시트에 변경 사항을 추가하도록 선택할 수 있습니다. CSS 선택기에서 직접 편집하는 것만 큼 편리하지는 않지만 작성한 내용은 모두 inspector-stylesheet.css에 있습니다.

베타 출시 예정인 내 제품인 LIVEditor 가이를 정확하게 수행합니다.

쉽게 이해할 수 있도록 Firebug의 인스펙터가 텍스트 편집기에 내장 되어 있다고 생각할 수 있습니다 .

이렇게하면 Firebug 또는 Webkit의 개발자 도구를 사용하여 조정 한 후 코드 편집기에서 수동으로 다시 변경할 필요가 없습니다 .