이 페이지는 Cloud Translation API를 통해 번역되었습니다.

작업공간에서 파일 수정 및 저장

Kayce Basques

Sofia Emelianova

이 튜토리얼에서는 작업공간을 설정하여 자체 프로젝트에서 사용할 수 있도록 연습할 수 있는 기회를 제공합니다. 작업공간을 사용하면 DevTools 내에서 변경한 내용을 컴퓨터에 저장된 소스 코드에 저장할 수 있습니다.

개요

작업공간을 사용하면 DevTools에서 변경한 내용을 컴퓨터에 있는 동일한 파일의 로컬 사본에 저장할 수 있습니다. 예를 들어 다음과 같이 가정해 보세요.

데스크톱에 사이트의 소스 코드가 있습니다.
localhost:8080에서 사이트에 액세스할 수 있도록 소스 코드 디렉터리에서 로컬 웹 서버를 실행합니다.
Google Chrome에서 localhost:8080를 열고 DevTools를 사용하여 사이트의 CSS를 변경하고 있습니다.

워크스페이스를 사용 설정하면 DevTools 내에서 변경한 CSS가 데스크톱의 소스 코드에 저장됩니다.

제한사항

최신 프레임워크를 사용하는 경우 소스 코드가 유지 관리하기 쉬운 형식에서 최대한 빠르게 실행되도록 최적화된 형식으로 변환될 수 있습니다. 워크스페이스는 일반적으로 소스 맵을 사용하여 최적화된 코드를 원래 소스 코드에 다시 매핑할 수 있습니다.

DevTools 커뮤니티는 다양한 프레임워크 및 도구에서 소스 맵이 제공하는 기능을 지원하기 위해 노력하고 있습니다. 선택한 프레임워크로 워크스페이스를 사용하는 중에 문제가 발생하거나 맞춤 구성 후 워크스페이스가 작동하는 경우 메일링 리스트에서 대화목록을 시작하거나 Stack Overflow에서 질문하여 다른 DevTools 커뮤니티와 지식을 공유하세요.

1단계: 설정

이 튜토리얼을 완료하여 작업공간을 직접 경험해 보세요.

데모 설정

이 데모 저장소를 컴퓨터의 디렉터리로 클론합니다. 예를 들어 ~/Desktop로 재정의합니다.
~/Desktop/devtools-workspace-demo에서 로컬 웹 서버를 시작합니다. 다음은 SimpleHTTPServer를 시작하는 샘플 코드이지만 원하는 서버를 자유롭게 사용할 수 있습니다.
```
cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer
```
이 튜토리얼의 나머지 부분에서는 이 디렉터리를 /devtools-workspace-demo라고 합니다.
Chrome에서 탭을 열고 로컬 호스팅 버전의 사이트로 이동합니다. localhost:8000와 같은 URL을 통해 액세스할 수 있어야 합니다. 정확한 포트 번호는 다를 수 있습니다.

DevTools 설정

로컬에서 호스팅되는 데모 페이지에서 DevTools를 엽니다.
소스 > 작업공간으로 이동하여 클론한 devtools-workspace-demo 폴더에서 작업공간을 설정합니다. 다음과 같은 여러 가지 방법으로 이 작업을 수행할 수 있습니다.
- 폴더를 소스의 편집기로 드래그 앤 드롭합니다.
- 폴더 선택 링크를 클릭하고 폴더를 선택합니다.
- 폴더 추가를 클릭하고 폴더를 선택합니다.
상단의 프롬프트에서 Allow(허용)를 클릭하여 DevTools에 디렉터리를 읽고 쓸 수 있는 권한을 부여합니다.

이제 작업공간 탭에서 index.html, script.js, styles.css 옆에 녹색 점이 표시됩니다. 녹색 점은 DevTools에서 페이지의 네트워크 리소스와 devtools-workspace-demo의 파일 간에 매핑을 설정했음을 나타냅니다.

이제 작업공간 탭에 로컬 파일과 네트워크 파일 간의 매핑이 표시됩니다.

2단계: CSS 변경사항을 디스크에 저장

텍스트 편집기에서 /devtools-workspace-demo/styles.css를 엽니다. h1 요소의 color 속성이 fuchsia로 설정된 것을 볼 수 있습니다.

$텍스트 편집기에서 styles.css를 봅니다.$
텍스트 편집기를 닫습니다.
DevTools로 돌아가서 요소 탭을 클릭합니다.
<h1> 요소의 color 속성 값을 원하는 색상으로 변경합니다. 방법은 다음과 같습니다.
1. DOM Tree에서 <h1> 요소를 클릭합니다.
2. 스타일 창에서 h1 { color: fuchsia } CSS 규칙을 찾아 원하는 색상으로 변경합니다. 이 예시에서는 색상이 녹색으로 설정되어 있습니다.
스타일 창에서 styles.css:1 옆에 있는 녹색 점 은 변경사항이 /devtools-workspace-demo/styles.css에 매핑되었음을 나타냅니다.
텍스트 편집기에서 /devtools-workspace-demo/styles.css를 다시 엽니다. 이제 color 속성이 좋아하는 색상으로 설정됩니다.
페이지를 새로고침합니다. <h1> 요소의 색상은 여전히 좋아하는 색상으로 설정되어 있습니다. 이렇게 하는 이유는 개발자가 변경 작업을 수행하고 DevTools가 변경사항을 디스크에 저장했기 때문입니다. 그런 다음 페이지를 새로고침하면 로컬 서버가 디스크에서 파일의 수정된 사본을 제공했습니다.

3단계: HTML 변경사항을 디스크에 저장

요소 패널에서 HTML을 변경해 봅니다.

요소 탭을 엽니다.
h1 요소의 텍스트 콘텐츠(Workspaces Demo)를 더블클릭하고 I ❤️ Cake로 바꿉니다.
텍스트 편집기에서 /devtools-workspace-demo/index.html를 엽니다. 방금 변경한 내용은 없습니다.
페이지를 새로고침합니다. 페이지가 원래 제목으로 돌아갑니다.

선택사항: 작동하지 않는 이유

요소 패널에 표시되는 노드 트리는 페이지의 DOM을 나타냅니다.
브라우저는 페이지를 표시하기 위해 네트워크를 통해 HTML을 가져오고, HTML을 파싱한 다음 DOM 노드 트리로 변환합니다.
페이지에 JavaScript가 있는 경우 해당 JavaScript는 DOM 노드를 추가, 삭제 또는 변경할 수 있습니다. CSS는 content 속성을 통해 DOM을 변경할 수도 있습니다.
브라우저는 결국 DOM을 사용하여 브라우저 사용자에게 표시할 콘텐츠를 결정합니다.
따라서 사용자에게 표시되는 페이지의 최종 상태는 브라우저에서 가져온 HTML과 매우 다를 수 있습니다.
따라서 DOM이 HTML, JavaScript, CSS의 영향을 받으므로 DevTools에서 Elements 패널에서 변경한 사항을 저장할 위치를 확인하기 어렵습니다.

즉, DOM 트리 !== HTML입니다.

소스 패널에서 HTML 변경

페이지의 HTML에 대한 변경사항을 저장하려면 Sources 패널에서 저장합니다.

소스 > 페이지로 이동합니다.
(index)(색인)를 클릭합니다. 페이지의 HTML이 열립니다.
<h1>Workspaces Demo</h1>를 <h1>I ❤️ Cake</h1>로 바꿉니다.
Command+S (Mac) 또는 Control+S (Windows, Linux, ChromeOS)를 눌러 변경사항을 저장합니다.
페이지를 새로고침합니다. <h1> 요소에 여전히 새 텍스트가 표시됩니다.
/devtools-workspace-demo/index.html를 엽니다. <h1> 요소에 새 텍스트가 포함됩니다.

4단계: 자바스크립트 변경사항을 디스크에 저장

Sources 패널은 JavaScript를 변경할 수도 있습니다. 그러나 사이트를 변경하는 동안 Elements 패널이나 Console 패널과 같은 다른 패널에 액세스해야 하는 경우도 있습니다. Sources 패널을 다른 패널과 함께 열 수 있는 방법이 있습니다.

요소 탭을 엽니다.
Command+Shift+P(Mac) 또는 Control+Shift+P(Windows, Linux, ChromeOS)를 누릅니다. 명령어 메뉴가 열립니다.
QS를 입력한 다음 빠른 소스 표시를 선택합니다. 이제 DevTools 창 하단에 빠른 소스 탭이 있습니다.

탭에는 소스 패널에서 마지막으로 수정한 파일인 index.html의 콘텐츠가 표시됩니다. 빠른 소스 탭을 사용하면 소스 패널의 편집기를 사용할 수 있으므로 다른 패널을 열어둔 상태에서 파일을 수정할 수 있습니다.
Command+P(Mac) 또는 Control+P(Windows, Linux, ChromeOS)를 눌러 파일 열기 대화상자를 엽니다.
script를 입력한 후 devtools-workspace-demo/script.js를 선택합니다.
데모의 Edit and save files in a workspace 링크를 확인하세요. 정기적으로 스타일이 지정됩니다.
빠른 소스 탭의 script.js 하단에 다음 코드를 추가합니다.
```
document.querySelector('a').style = 'font-style:italic';
```
Command+S (Mac) 또는 Control+S (Windows, Linux, ChromeOS)를 눌러 변경사항을 저장합니다.
페이지를 새로고침합니다. 이제 페이지의 링크가 기울임꼴로 표시됩니다.