크롬 디버깅 SASS

1단계: sass 사전 컴파일 명령 실행

먼저 내 프로젝트 폴더 구조를 살펴보세요.

->sass /css 파일 입력->cmd 명령 열기->아래와 같이 sass --watch --scss test.scss:test.css 입력:->

sass 프로젝트에 들어가서 아래와 같이 test.css.map과 test.css라는 두 개의 파일이 더 있는지 확인하세요.

여기서 생성된 test.css.map은 크롬 디버깅의 핵심입니다 ->

Chrome F12 개발자 도구 열기 -> 지도 디버깅을 지원하도록 Chrome을 구성하려면 프로젝트 주소를 입력하세요.

->다음 단계에서는 CSS 소스 맵 활성화를 선택하세요

->아래와 같습니다(주의사항은 사진에서 확인하세요):

소스에서 css/test.scss 파일 열기

그런데 Chrome에서 test.scss의 내용을 변경하면 저장할 수 없습니다. 아래와 같이 항상 왼쪽 상단에 노란색 느낌표가 나타납니다.

프로젝트에 원래 있던 작업공간에 추가하는 방법을 살펴보겠습니다

-> 그러면 크롬에서 이 파일에 대한 작업 권한을 요청합니다. 허용을 클릭하면 소스 아래에 CSS 폴더가 있으므로 test.scss는 다음과 같습니다. 로컬 프로젝트 .scss의 테스트가 연결되어 있습니다

동시에 편집기의 코드도 아래와 같이 변경되었습니다.

즉, 크롬에서 test.scss를 변경하면 로컬 test.scss도 이에 따라 변경됩니다.

디버깅 단계가 거의 끝났습니다. 물론 chome 브라우저는 SASS에 대한 지원을 업데이트하고 있으므로 이후 설정은 그다지 번거롭지 않을 수 있으므로 위 단계는 참고용일 뿐입니다.