Chrome DevTools에서 변경한 CSS 변경 사항을 로컬에 어떻게 저장하나요?

Chrome DevTools 스타일 패널을 통해 CSS 변경 사항 저장

Google Chrome 개발자 도구의 스타일 패널을 사용하여 로컬 CSS 파일로 작업할 때 사용자는 리소스 패널에 변경 사항이 반영되지 않는 문제가 발생할 수 있습니다. 이 문서에서는 이 문제에 대한 해결책을 제공합니다.

CSS 변경 사항을 로컬에 저장하기 위해 Chrome에서는 로컬 폴더를 작업 공간에 통합할 수 있습니다. 단계별 가이드는 다음과 같습니다.

1. 작업 공간에 폴더 추가: DevTools의 소스 패널에서 왼쪽 패널을 마우스 오른쪽 버튼으로 클릭하고 "작업 공간에 폴더 추가"를 선택합니다. ."
2. Chrome 권한 허용: 추가된 항목에 Chrome 액세스 권한을 부여합니다. 폴더.
3. 리소스 매핑: 네트워크 탭으로 이동하여 CSS 파일 경로를 마우스 오른쪽 버튼으로 클릭하고 "로컬로 매핑"을 선택합니다.

한 번 리소스를 매핑한 경우 Chrome은 페이지를 다시 로드할 때 매핑된 파일의 로컬 버전을 우선적으로 로드합니다. 이제 표준 Ctrl S 단축키를 눌러 변경 사항을 저장할 수 있습니다.

추가 저장 옵션:

유연성을 높이려면 확장 프로그램이나 도구를 사용하여 CSS 변경 사항을 저장하는 것이 좋습니다. Chrome DevTools:

• LiveReload: CSS 변경 사항을 감지하고 자동으로 브라우저 창을 다시 로드합니다.
• CSS 리로더: 활성 변경 사항을 켜고 끄는 옵션을 포함하여 변경 사항을 저장하기 위한 사용자 친화적인 인터페이스를 제공합니다.
• CSS 다시 로드: 한 번의 클릭으로 CSS 파일을 다시 로드할 수 있는 미니멀한 확장 프로그램입니다.

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