인스펙터 (웹킷, 방화범 등)에서 CSS 변경 사항 내보내기
CSS로 작업 할 때 브라우저 (예 : Chrome)에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 클릭 한 다음 바로 CSS를 편집합니다. 화살표 키를 사용하여 여백 및 패딩과 같은 항목을 변경하면 항목을 매우 쉽게 정렬 할 수 있습니다.
그런 다음 변경 사항을 적용하여 CSS 파일에 적용하는 것은 그리 어렵지 않지만 검사기에서 선택기를 마우스 오른쪽 버튼으로 클릭하고 "내보내기"또는 "복사"를 선택하고 내에서 내용을 사용할 수 있도록하면 멋질 것입니다. 클립 보드.
이와 같은 것이 존재합니까?
나는 적어도 Chrome v14에서 이것에 대한 답을 찾았습니다.
Elements 섹션에서 CSS 규칙 옆에있는 "filename : linenumber"링크를 클릭하면됩니다. 표시되는 CSS 파일에는 모든 수정 사항이 포함됩니다.
이 장소는 정확히 :
Chrome에서는 소스 탭에서 CSS 파일을 마우스 오른쪽 버튼으로 클릭하고 "로컬 수정"을 클릭 할 수 있습니다.
이것은 모든 로컬 변경 사항을 보여줍니다. 각 개정에는 타임 스탬프가 있으며 이전 개정으로 롤백 할 수 있습니다.
이 튜토리얼 의 라이브 편집 및 개정 내역 섹션을 참조하십시오 .
Firediff 는 Firebug 에서 수행 된 변경 사항 을 추적하는 Firebug 애드온 입니다. HTML 창에서 수행 할 모든 작업 (훌륭함)뿐만 아니라 웹 개발자 도구 모음 확장의 간단한 사용 (그다지 좋지 않음)도 기록합니다. px로 글꼴 크기 정보를 얻으려면 Shift-Ctrl-F를 사용합니다.
Chrome에서 Firebug 확장 프로그램을 보았지만 테스트하지는 않았으며 Firefox와 함께 Firediff를 사용합니다.
나는 이전 에이 제품을 제안했습니다 (나는 어떤 식 으로든 관련이 없습니다).
우수한 제품. 당신이 찾고있는 것과 훨씬 더 비슷하게 들립니다.
편집 : 여기에 몇 가지 다른 답변이 Google 크롬의 로컬 파일 링크 기능에 대해 언급했습니다 (매우 멋진). 다른 답변을 확인하세요!
나는 정확히 이것을 수행하는 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
외부 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 스톡 개발 도구를 사용하는 경우 도구 대화 상자에서 직접 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 .
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css
My in-beta-soon product LIVEditor does this exactly.
To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.
That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.
참고URL : https://stackoverflow.com/questions/3355111/export-css-changes-from-inspector-webkit-firebug-etc
'Programing' 카테고리의 다른 글
| CSS 속성 : 표시 vs. 가시성 (0) | 2020.08.25 |
|---|---|
| "작은 첨자가있는 요소"를 포함하여 모든 중복 행 찾기 (0) | 2020.08.25 |
| LINQ Ring : 대규모 컬렉션에 대한 Any () 대 Contains () (0) | 2020.08.25 |
| perror ( "…") 및 fprintf (stderr, "…")는 언제 사용해야합니까? (0) | 2020.08.25 |
| ECMAScript 6 클래스의 게터와 세터는 무엇입니까? (0) | 2020.08.25 |