작업공간을 설정하여 DevTools에서 변경한 사항을 컴퓨터의 소스 파일에 다시 저장합니다. 구성 파일을 제공하여 작업공간 폴더를 DevTools에 자동으로 연결하거나 소스 패널에서 작업공간 위치를 수동으로 추가할 수 있습니다.
개요
작업공간 폴더에 자동 (또는 수동)으로 연결하면 DevTools에서 변경한 사항을 컴퓨터에 있는 동일한 파일의 로컬 사본에 저장할 수 있습니다. 예를 들어 다음과 같이 가정해 보세요.
- 데스크톱에 사이트의 소스 코드가 있습니다.
- 소스 코드 디렉터리에서 로컬 웹 서버를 실행하고 있으므로
localhost:PORT에서 사이트에 액세스할 수 있으며 메타데이터가 포함된 간단한 JSON 파일도 제공합니다 (나중에 설명). - Chrome에서
localhost:PORT을(를) 열고 DevTools를 사용하여 사이트의 CSS를 변경하고 있습니다.
작업공간 폴더가 연결되면 소스 패널에서 CSS, HTML, JavaScript 파일을 변경한 사항이 컴퓨터의 소스 코드에 저장됩니다. 하지만 DevTools는 Elements 패널에서 DOM에 적용한 변경사항을 저장하지 않습니다.
또한 DevTools는 일반적으로 소스 맵을 사용하여 최적화된 코드를 원본 소스 코드에 다시 매핑할 수 있습니다.
연결의 메타데이터 생성
DevTools에서 작업공간 폴더를 자동으로 검색하도록 하려면 임의의 버전 4 UUID를 생성하여 다음 JSON 파일에 넣습니다.
{
"workspace": {
"uuid": "UUID",
"root": "path/to/project/root/folder"
}
}
그런 다음 JSON 파일을 path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json에 배치합니다.
마지막으로 로컬 HTTP 서버를 실행하고 JSON 파일도 제공해야 합니다.
또는 이 단계를 건너뛰고 폴더 연결을 수동으로 설정할 수 있습니다.
작업공간 폴더 연결
폴더를 연결하려면 다음 단계를 따르세요.
- Chrome에서 로컬로 호스팅되는 페이지 (이 예에서는
localhost:8000)로 이동하고 DevTools를 엽니다. 소스 > 작업공간에서 폴더 옆에 있는 연결을 클릭합니다.
메시지가 표시되면 파일 수정을 클릭하여 DevTools에서 폴더에 액세스하도록 허용합니다.
연결되면 작업공간 탭에서 폴더를 열 수 있습니다.
Workspace 탭에는 HTML, CSS, JavaScript 파일 옆에 녹색 점이 표시됩니다. 이 녹색 점은 DevTools가 페이지의 네트워크 리소스와 폴더의 파일 간에 매핑을 설정했음을 의미합니다.
소스 폴더에 변경사항 다시 저장
연결된 작업공간 폴더에서 CSS, HTML, JavaScript 파일의 변경사항을 저장할 수 있습니다.
CSS에 변경사항 저장
CSS에 변경사항을 저장하려면 다음 단계를 따르세요.
- 소스 > 작업공간에서 연결된 작업공간 폴더의 CSS 파일을 엽니다.
CSS를 변경합니다.
Ctrl / Cmd + S를 눌러 변경사항을 저장하고 소스 파일에서 적용된 변경사항을 다시 확인합니다. 소스 패널의 파일 이름 옆에 녹색 점이 표시됩니다.
워크플로를 알아보려면 동영상을 시청하세요.
HTML에 변경사항 저장
HTML에 변경사항을 저장하려면 다음 단계를 따르세요.
- 소스 > 작업공간에서 연결된 작업공간 폴더의 HTML 파일을 엽니다.
HTML을 변경합니다.
Ctrl / Cmd + S를 눌러 변경사항을 저장하고 소스 파일에서 적용된 변경사항을 다시 확인합니다. 소스 패널의 파일 이름 옆에 녹색 점이 표시됩니다.
변경사항이 적용되었는지 확인하려면 페이지를 새로고침하세요.
워크플로를 알아보려면 동영상을 시청하세요.
Elements 패널에서 HTML을 변경할 수 없는 이유는 무엇인가요?
- Elements 패널에 표시되는 노드 트리는 페이지의 DOM을 나타냅니다.
- 페이지를 표시하기 위해 브라우저는 네트워크를 통해 HTML을 가져오고 HTML을 파싱한 다음 DOM 노드 트리로 변환합니다.
- 페이지에 JavaScript가 있는 경우 해당 JavaScript가 DOM 노드를 추가, 삭제 또는 변경할 수 있습니다. CSS는
content속성을 사용하여 DOM을 변경할 수도 있습니다. - 브라우저는 결국 DOM을 사용하여 브라우저 사용자에게 표시할 콘텐츠를 결정합니다.
- 따라서 사용자에게 표시되는 페이지의 최종 상태는 브라우저가 가져온 HTML과 매우 다를 수 있습니다.
- 이로 인해 DevTools는 Elements 패널에서 변경한 사항을 저장해야 하는 위치를 확인하기 어렵습니다. DOM이 HTML, JavaScript, CSS의 영향을 받기 때문입니다.
간단히 말해 DOM 트리는 !== HTML입니다.
JavaScript에 변경사항 저장
JavaScript에 변경사항을 저장하려면 다음 단계를 따르세요.
- 소스 > 작업공간에서 연결된 작업공간 폴더의 JavaScript 파일을 엽니다.
JavaScript를 변경합니다.
Ctrl / Cmd + S를 눌러 변경사항을 저장하고 소스 파일에서 적용된 변경사항을 다시 확인합니다. 소스 패널의 파일 이름 옆에 녹색 점이 표시됩니다.
로컬 HTTP 서버가 실시간 소스 파일 변경사항을 수신하고 페이지를 자동으로 새로고침하는 경우 DevTools에서 변경사항을 저장하면 변경사항이 적용됩니다. 그렇지 않으면 로컬 서버를 다시 배포합니다.
워크플로를 알아보려면 동영상을 시청하세요.
워크스페이스 폴더 연결 삭제
작업공간 폴더 연결을 삭제하려면 소스 > 작업공간에서 폴더를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 작업공간에서 삭제를 선택한 다음 삭제를 클릭합니다.
워크스페이스 폴더 수동 연결
로컬에서 호스팅되는 페이지에서 DevTools를 엽니다.
소스 > 작업공간에서 수동으로 폴더 추가를 클릭합니다. 그런 다음 소스 파일이 있는 폴더를 선택합니다.
그런 다음 작업공간 폴더 연결의 3단계와 4단계를 따릅니다.
제한사항
최신 프레임워크를 사용하는 경우 유지보수가 쉬운 형식의 소스 코드를 최대한 빠르게 실행하도록 최적화된 형식으로 변환할 수 있습니다. 작업공간 폴더 연결은 일반적으로 소스 맵을 사용하여 최적화된 코드를 원본 소스 코드에 다시 매핑할 수 있습니다.
DevTools 커뮤니티는 다양한 프레임워크 및 도구에서 소스 맵이 제공하는 기능을 지원하기 위해 노력하고 있습니다. 선택한 프레임워크로 작업공간을 사용하는 중에 문제가 발생하거나 일부 맞춤 구성 후 작업공간이 작동하는 경우 메일링 리스트에서 대화목록을 시작하거나 Stack Overflow에서 질문하여 나머지 DevTools 커뮤니티와 지식을 공유하세요.
다음 단계
이미 설정된 모든 폴더는 
설정 > 작업공간에서 관리할 수 있습니다.
다음으로 DevTools를 사용하여 CSS를 변경하고 JavaScript를 디버그하는 방법을 알아보세요.
참고 항목
로컬 재정의는 웹 콘텐츠 또는 요청 헤더를 모의할 수 있는 또 다른 DevTools 유사 기능입니다. 이렇게 하면 백엔드가 따라잡을 때까지 기다리지 않고도 페이지 변경사항을 자유롭게 실험할 수 있습니다. 로컬 재정의를 사용하면 페이지 로드 전반에 걸쳐 변경사항이 유지되지만 페이지의 소스 코드에 매핑되지는 않습니다.