Chrome DevTools의 스타일 패널에서 변경된 CSS 변경 사항을 어떻게 저장할 수 있나요?

Chrome 개발자 도구 스타일 패널에서 CSS 변경 사항 저장

Google Chrome 개발자 도구의 컨텍스트에서 스타일 패널을 통해 CSS 변경 사항이 적용되는 문제가 발생할 수 있습니다. 리소스 패널에 표시되지 않습니다. 이는 CSS 파일을 로컬에서 작업할 때 특히 실망스러울 수 있습니다.

이 상황을 해결하기 위해 Chrome은 작업공간에 로컬 폴더를 추가하는 것과 관련된 해결 방법을 도입했습니다. 이렇게 하면 웹 리소스를 로컬 리소스에 매핑하여 로컬에서 변경 사항을 편집하고 저장할 수 있습니다.

CSS 변경 사항을 저장하는 단계:

1. 작업공간에 폴더 추가: 소스 탭의 왼쪽 패널을 마우스 오른쪽 버튼으로 클릭하고 "다음에 폴더 추가"를 선택합니다. Workspace."
2. Chrome 액세스 허용: 추가하려는 폴더에 Chrome 액세스 권한을 부여합니다.
3. 네트워크 리소스 매핑: 웹 리소스 선택 네트워크 탭에서 해당 로컬 리소스에 매핑합니다.
4. 변경: 새로고침 페이지를 열고 CSS 파일을 로컬에서 편집합니다.
5. 변경 사항 저장: "Ctrl S"(Windows) 또는 "Cmd S"(Mac)를 눌러 변경 사항을 저장합니다.

추가 팁:

• Chrome이 로컬 리소스를 인식하도록 하려면 매핑된 파일을 열고 몇 가지 사항을 변경해야 합니다.
• Chrome의 작업 공간 기능은 원래 Canary 채널을 통해 사용할 수 있었지만 이제 안정적인 버전의 브라우저에 통합되었습니다.

타사 추가 기능

Chrome은 내장 기능이 솔루션을 제공하므로 CSS 변경 사항을 저장하기 위한 외부 추가 기능을 고려할 수도 있습니다. 현재 Firebug의 광범위한 CSS 변경 저장 도구와 달리 Chrome에서 사용할 수 있는 옵션이 제한되어 있습니다. 그러나 LiveReload 및 Stylus와 같은 타사 도구는 유사한 기능을 제공하며 개발 작업 흐름을 향상시킬 수 있습니다.

위 내용은 Chrome DevTools의 스타일 패널에서 변경된 CSS 변경 사항을 어떻게 저장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!