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

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

Kayce Basques

Sofia Emelianova

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

개요

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

사이트의 소스 코드가 데스크톱에 있어야 합니다.
localhost:8080에서 사이트에 액세스할 수 있도록 소스 코드 디렉터리에서 로컬 웹 서버를 실행합니다.
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 폴더에서 작업공간을 설정합니다. 다음과 같은 여러 가지 방법으로 확인할 수 있습니다.
- 폴더를 Sources의 Editor로 드래그 앤 드롭합니다.
- 폴더 선택 링크를 클릭하고 폴더를 선택합니다.
- 폴더 추가를 클릭하고 폴더를 선택합니다.
상단 프롬프트에서 Allow(허용)를 클릭하여 DevTools에 디렉터리를 읽고 쓸 수 있는 권한을 부여합니다.

Workspace 탭의 index.html, script.js, styles.css 옆에 녹색 점이 있습니다. 이 녹색 점은 DevTools가 페이지의 네트워크 리소스와 devtools-workspace-demo에 있는 파일 간의 매핑을 설정했음을 의미합니다.

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

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

텍스트 편집기에서 /devtools-workspace-demo/styles.css를 엽니다. h1 요소의 color 속성이 fuchsia로 설정된 방식을 확인하세요.

$텍스트 편집기에서 style.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 노드의 트리로 변환합니다.
페이지에 자바스크립트가 포함된 경우 해당 자바스크립트는 DOM 노드를 추가, 삭제 또는 변경할 수 있습니다. CSS는 content 속성을 통해 DOM도 변경할 수 있습니다.
브라우저는 결국 DOM을 사용하여 브라우저 사용자에게 어떤 콘텐츠를 표시해야 하는지 결정합니다.
따라서 사용자에게 표시되는 페이지의 최종 상태는 브라우저에서 가져온 HTML과 매우 다를 수 있습니다.
이로 인해 DOM이 HTML, JavaScript, CSS의 영향을 받기 때문에 DevTools에서 Elements 패널에서 적용한 변경사항을 저장해야 하는 위치를 확인하기 어렵습니다.

간단히 말해 DOM 트리 !== HTML입니다.

소스 패널에서 HTML 변경

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

소스 > 페이지로 이동합니다.
(색인)을 클릭합니다. 페이지의 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단계: 자바스크립트 변경사항을 디스크에 저장

소스 패널에서 자바스크립트를 변경할 수도 있습니다. 하지만 사이트를 변경할 때 요소 패널이나 콘솔 패널과 같은 다른 패널에 액세스해야 하는 경우도 있습니다. 소스 패널을 다른 패널과 함께 열 수 있는 방법이 있습니다.

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

이 탭에는 Sources 패널에서 마지막으로 수정한 파일인 index.html의 콘텐츠가 표시됩니다. 퀵 소스 탭에는 Sources 패널의 편집기가 제공되므로 다른 패널이 열려 있는 동안 파일을 수정할 수 있습니다.
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)를 눌러 변경사항을 저장합니다.
페이지를 새로고침합니다. 이제 페이지 링크가 기울임꼴로 표시됩니다.