inspector에서 CSS 변경 사항 내보내기 (Webkit, Firebug 등)


Answers

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

그러면 모든 로컬 변경 사항이 표시됩니다. 각 개정은 시간 소인이 찍혀서 이전 개정으로 롤백 할 수 있습니다.

이 자습서 의 라이브 편집 및 개정 내역 섹션을 참조하십시오 .

Question

CSS로 작업 할 때 브라우저에서 자주 테스트합니다 (예 : Chrome). 요소를 마우스 오른쪽 단추로 클릭하고 요소 검사를 클릭 한 다음 바로 CSS를 편집하십시오. 마진과 패딩과 같은 것을 바꾸기 위해 화살표 키를 사용하면 일을 쉽게 할 수 있습니다.

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

이 같은 것이 존재합니까?




cloudworks에서 언급했듯이 이에 대한 대답이 변경되었습니다. 이제는 Chrome DevTools 자동 저장 확장 프로그램을 사용 하여이 작업을 수행 할 수 있습니다. 이 도구는 Chrome 개발자 도구 콘솔에서 이루어진 CSS 및 자바 스크립트 변경 사항을 추적하여 로컬 파일에 다시 저장합니다. 확장 프로그램 설치 및 설정 방법은 @addyosmani 작성한 블로그 ( here 를 참조 here .

또한 확장 기능을 자세히 설명하는 편리한 screencast 가 있습니다.




사파리에 대한 답변을 구체적으로 추가하는 것은 가능합니다.

Inspector의 Styles 섹션에서 CSS를 편집하여 기존 CSS 파일을 편집하면 Cmd-S 를 눌러 변경 내용이 포함 된 전체 파일을 다시 저장할 수 있습니다. 그러나 Sass / preprocessor와 같은 메타 언어를 사용하거나 번들링 등으로 CSS를 생성하는 경우 CSS 소스 맵을 사용하여이 문제를 실제로 해결할 수 있다고는 생각하지 않습니다.

스타일 섹션의 맨 위에있는 CSS를 편집 할 때 Style Attribute 에서 인라인 스타일 (기존 CSS 파일과 관련 없음)을 추가하면 모든 변경 사항을 쉽게 내보낼 수없는 것처럼 보입니다. 지금은 각 요소에 대해 수동으로 재정의를 복사하여 붙여 넣기했습니다.

공식 Apple 문서는 약간 날짜가 있지만 여기에서 찾을 수 있습니다. Web Inspector Tutorial - 웹 페이지 변경 코드 편집 .




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




내 베타 제품인 LIVEditor 가이 작업을 정확하게 수행합니다.

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

그렇게하면 Firebug 또는 Webkit의 개발자 도구를 사용하여 코드 편집기를 수정 한 후에 코드 편집기에서 직접 수동으로 변경하지 않아도됩니다.




Related