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

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

Kayce Basques

Sofia Emelianova

이 튜토리얼에서는 작업공간을 설정하여 연습해 볼 수 있으므로 프로젝트에서 사용할 수 있습니다 Workspace를 사용하면 변경사항을 저장할 수 있습니다. DevTools를 사용해 컴퓨터에 저장된 소스 코드를 확인해 보세요

개요

작업공간을 사용하면 DevTools에서 변경한 내용을 동일한 파일의 로컬 사본에 설치하시기 바랍니다. 예를 들어 다음과 같이 가정해 보세요.

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

작업공간을 활성화하면 DevTools 내에서 변경한 CSS 변경사항이 소스 코드에 저장됩니다. 에서 볼 수 있습니다.

제한사항

최신 프레임워크를 사용하는 경우 아마도 소스 코드를 최대한 빠르게 실행하도록 최적화된 형식으로 쉽게 유지 관리할 수 있습니다. 현재 작업공간 지도에 있습니다.

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

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에 디렉터리를 읽고 쓸 수 있는 권한을 부여합니다.

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

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

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

텍스트 편집기에서 /devtools-workspace-demo/styles.css를 엽니다. h1의 color 속성이 요소가 fuchsia로 설정됩니다.

$텍스트 편집기에서 style.css 보기$
텍스트 편집기를 닫습니다.
DevTools로 돌아가서 Elements 탭을 클릭합니다.
<h1> 요소의 color 속성 값을 원하는 색상으로 변경합니다. 방법은 다음과 같습니다.
1. DOM 트리에서 <h1> 요소를 클릭합니다.
2. 스타일 창에서 h1 { color: fuchsia } CSS 규칙을 찾아 색상을 원하는 색상으로 변경합니다. 이 예에서는 색상이 녹색으로 설정되어 있습니다.
Styles 창의 styles.css:1 옆에 있는 녹색 점 은 모든 변경사항이 /devtools-workspace-demo/styles.css에 매핑됨을 의미합니다.
텍스트 편집기에서 /devtools-workspace-demo/styles.css를 다시 엽니다. 이제 color 속성이 지정할 수 있습니다.
페이지를 새로고침합니다. <h1> 요소의 색상은 여전히 선호하는 색상으로 설정됩니다. 작동함 변경 후 DevTools가 디스크에 변경사항을 저장했을 때 그런 다음 로컬 서버가 디스크에서 파일의 수정된 사본을 제공했습니다.

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

요소 패널에서 HTML을 변경해 보세요.

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

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

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

간단히 말해 DOM 트리 !== HTML

소스 패널에서 HTML 변경

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

소스로 이동합니다. 페이지.
(색인)을 클릭합니다. 페이지의 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 패널 또는 Elements 패널과 같은 다른 패널에 액세스 추가할 수 있습니다. Sources 패널을 다른 패널과 함께 열 수 있는 방법이 있습니다.

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

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

이제 페이지의 링크가 기울임꼴로 표시됩니다.

다음 단계

작업공간에 여러 폴더를 설정할 수 있습니다. 이러한 폴더는 모두 설정 > 작업공간.

다음으로, DevTools를 사용하여 CSS를 변경하고 JavaScript를 디버그하는 방법을 알아봅니다.