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의 모든 수정 사항을 표시하는 콘솔 서랍 의 변경 사항 탭 도 있습니다 . 수출은 아니지만 최소한 변경된 사항을 빠르게 파악하는 것은 매우 편리합니다.
답변
나는 이전 에이 제품을 제안했습니다 (나는 어떤 식 으로든 관련이 없습니다).
우수한 제품. 당신이 찾고있는 것과 훨씬 더 비슷하게 들립니다.
편집 : 여기에 몇 가지 다른 답변이 Google 크롬의 로컬 파일 링크 기능에 대해 언급했습니다 (매우 멋진). 다른 답변을 확인하세요!
답변
외부 CSS를 편집하는 경우 최신 버전을 리소스 패널에서 DnD를 지원하는 텍스트 편집기로 드래그 할 수 있습니다 ( http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ 참조 , 자세한 내용은 “Persisting Changes”섹션을 참조하십시오.) CSS 변경 사항을 이전 버전의 스타일 시트 리소스로 되돌릴 수도 있습니다 (스타일 시트 개정판의 오른쪽 클릭 팝업 메뉴에서).
