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

Chrome DevTools의 자동 워크스페이스 연결

Workspace는 Chrome DevTools 내에서 웹사이트의 소스 파일을 직접 수정할 수 있는 강력한 기능으로, 코드 편집기와 브라우저를 끊임없이 전환할 필요가 없습니다.

개요

Chrome DevTools의 작업공간은 웹 서버에서 제공하는 파일을 컴퓨터의 로컬 폴더에 있는 파일에 매핑합니다. 로컬 프로젝트에 작업공간을 사용 설정하면 DevTools의 소스 패널에서 파일에 적용한 변경사항이 로컬 프로젝트 파일에 자동으로 저장됩니다. 이를 통해 원활한 편집 환경을 제공하여 DevTools의 실시간 통계를 활용하면서 프로젝트의 코드베이스에서 직접 작업하는 것과 같은 느낌을 줍니다.

자동 작업공간 연결의 장점

자동 작업공간 연결은 수동 구성을 없애 작업공간 설정을 개선합니다. DevTools에 프로젝트 폴더를 수동으로 추가하는 대신 로컬 개발 서버에서 Chrome DevTools가 자동으로 감지하는 특수 devtools.json 파일을 제공할 수 있습니다. 이렇게 하면 다음과 같은 몇 가지 이점이 있습니다.

더 빠른 디버깅: DevTools에서 파일을 수정하고 브라우저를 종료하거나 수동으로 저장하지 않고도 업데이트를 즉시 확인할 수 있습니다.
실시간 변경사항: 변경사항이 로컬 파일과 브라우저에 즉시 반영되어 개발 속도가 향상됩니다.
수동 설정 없음: 프로젝트 파일의 매핑을 자동화하여 특히 새 프로젝트나 팀 구성원 온보딩 시 설정 시간을 줄입니다.

자동 작업공간 연결은 어떻게 작동하나요?

자동 작업공간 연결은 로컬 개발 서버가 사전 정의된 경로에 특정 JSON 파일을 노출하도록 하여 작동합니다. Chrome DevTools가 열려 있고 localhost에서 제공되는 웹사이트를 탐색하면 다음 주소로 요청이 자동으로 전송됩니다.

/.well-known/appspecific/com.chrome.devtools.json

서버가 유효한 devtools.json 파일로 응답하면 DevTools는 파일 내 정보를 사용하여 프로젝트의 소스 폴더에 자동으로 연결합니다. devtools.json 파일에는 일반적으로 다음이 포함됩니다.

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}

workspace.root: 로컬 파일 시스템에 있는 프로젝트의 루트 디렉터리의 절대 경로입니다.
workspace.uuid: 프로젝트의 고유 식별자 (UUID v4)입니다. 이를 통해 DevTools에서 서로 다른 프로젝트를 구분할 수 있습니다.

DevTools에서 이 파일을 수신하고 처리하면 소스 > 작업공간 패널에 연결 버튼이 표시됩니다.

로컬 개발 및 디버깅용으로 설계됨

devtools.json를 통한 자동 작업공간 검색 메커니즘은 로컬 개발 환경 전용으로 설계되었으며 애플리케이션이 localhost에서 제공되는 경우에만 작동합니다. Chrome DevTools는 로컬 프로젝트를 디버깅할 때 개발 모드에서만 /.well-known/appspecific/com.chrome.devtools.json 요청을 전송합니다. 이 기능은 프로덕션 환경을 위한 것이 아닙니다.

로컬 파일에 액세스할 권한 부여

보안상의 이유로 Chrome에서는 웹사이트가 로컬 네트워크 또는 머신의 파일에 액세스하려면 명시적인 사용자 권한이 필요합니다. DevTools가 devtools.json를 사용하여 로컬 프로젝트에 연결하려고 하면 Chrome이 프로젝트의 디렉터리에 액세스할 수 있는 권한을 부여하라는 메시지가 표시됩니다. 이 권한 요청은 권한이 부여되지 않는 한 공개 네트워크에서 로컬 대상으로의 요청을 제한하는 Chrome의 로컬 네트워크 액세스 정책을 준수합니다. 이 권한을 요청하는 기능은 보안 컨텍스트 (HTTPS)로 제한됩니다. 로컬 개발의 경우 일반적으로 localhost가 보안 컨텍스트로 취급됩니다.

`devtools.json` 파일 만들기 및 제공

로컬 개발 서버에서 실행되는 일반적인 프런트엔드 프로젝트의 경우 /.well-known/appspecific/com.chrome.devtools.json 요청에 올바른 JSON 콘텐츠로 응답하도록 서버를 구성해야 합니다.

일반적으로 다음과 같은 방법으로 접근할 수 있습니다.

UUID 생성: UUID v4가 필요합니다. 온라인 도구나 스크립트를 사용하여 생성할 수 있습니다.
프로젝트 루트 확인: 프로젝트의 루트 디렉터리에 대한 절대 경로를 가져옵니다.
엔드포인트 만들기: /.well-known/appspecific/com.chrome.devtools.json에 대한 GET 요청을 처리하도록 개발 서버를 구성합니다.
JSON 제공: 이 엔드포인트가 요청되면 Content-Type: application/json 헤더와 devtools.json 콘텐츠가 포함된 JSON 응답을 제공합니다.

devtools.json 파일에 지정된 workspace.root 경로는 로컬 파일 시스템에 있는 프로젝트의 루트 디렉터리에 대한 절대 경로여야 합니다. 즉, 경로는 운영체제 (예: macOS 또는 Linux의 경우 /Users/yourname/projects/my-app, Windows의 경우 C:\Users\yourname\projects\my-app)와 특정 프로젝트 설정에 따라 달라집니다. 프로덕션 환경에서 이 파일이 체크인되지 않도록 무시된 파일 (예: .gitignore 목록)에 추가하는 것이 좋습니다.

서버에서 이 경로를 동적으로 생성하거나 제공해야 하며 개발 환경에 맞게 올바르게 구성해야 합니다. 프로덕션 환경에서 이 파일을 체크인하지 않도록 무시된 파일 (예: .gitignore 목록)에 추가하는 것이 좋습니다.

예

프로젝트의 기술 스택에 따라 devtools.json 파일을 제공할 수 있는 방법은 다양합니다.

Node.js 및 Express

이 스크립트는 최소한의 Express 서버를 실행합니다. 서버가 실행되는 폴더를 가리키는 projectRoot. 경로가 포함된 JSON 파일을 /.well-known/appspecific/com.chrome.devtools.json에서 제공합니다. projectRoot 변수를 조정하여 서버 스크립트가 있는 위치가 아닌 프로젝트의 실제 루트 디렉터리를 올바르게 가리키도록 합니다.

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

`devtools-json-generator` 스크립트 사용

generate-devtools-json를 사용하여 devtools.json을 생성할 수 있습니다.

현재 디렉터리에 devtools.json 파일을 생성하려면 다음을 실행합니다.

npx generate-devtools-json

또는 특정 디렉터리에 파일을 생성하려면 디렉터리를 인수로 전달하세요.

npx generate-devtools-json /path/to/your/project

프로젝트 홈페이지에서 devtools-json-generator에 대해 자세히 알아보세요.

통합

일부 프런트엔드 프레임워크와 빌드 도구는 이 프로세스를 간소화하는 플러그인이나 구성을 제공합니다.

Vite

Vite 기반 프로젝트 (SvelteKit 포함)의 경우 vite-plugin-devtools-json는 솔루션입니다. 내부에서 devtools.json 파일의 생성 및 제공을 즉시 자동화합니다.

이 기능을 사용하려면 플러그인을 설치하세요.

npm install -D vite-plugin-devtools-json

그런 다음 vite.config.js (또는 vite.config.ts)에 추가합니다.

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

Angular

ng serve를 사용하여 Angular 프로젝트를 로컬로 실행하는 경우 (@angular/cli 버전이 19.0.0 이상인 경우) Angular CLI는 올바른 devtools.json 파일을 자동으로 제공하는 미들웨어를 제공합니다.

예를 들어 새 애플리케이션을 만들고 실행하려면 다음을 실행합니다.

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json로 이동하면 생성된 JSON 파일을 확인할 수 있습니다.

문제 해결

이 섹션의 도움말에 따라 자동 워크스페이스 연결과 관련된 일반적인 문제를 해결할 수 있습니다.

워크스페이스에서 폴더 삭제하기

프로젝트 폴더가 이미 자동으로 연결된 경우 DevTools 작업공간 설정에서 수동으로 삭제할 수 있습니다.

Chrome DevTools를 엽니다.
소스 탭으로 이동합니다.
왼쪽 패널에서 워크스페이스 하위 탭을 선택합니다.
원치 않는 프로젝트 폴더를 마우스 오른쪽 버튼으로 클릭하고 작업공간에서 삭제를 선택합니다.

서버의 404 오류 무시

특정 프로젝트에 이 기능을 사용하지 않으려는 경우 서버 로그에 /.well-known/appspecific/com.chrome.devtools.json 요청에 대한 404 오류가 표시되면 이러한 오류를 무시해도 됩니다. 파일이 제공되지 않으면 요청은 무해합니다. 또는 오류를 로깅하지 않고 이 특정 경로에 대해 404 상태로 응답하도록 서버를 구성할 수 있습니다.

Chrome DevTools에서 이 기능을 사용 중지하는 방법

Chrome DevTools에서 자동 워크스페이스 검색 기능을 사용 중지해야 하는 경우 적절한 Chrome 플래그를 설정해야 합니다.

Chrome을 열고 chrome://flags으로 이동합니다.
'DevTools Project Settings'를 검색하고 Disabled로 설정합니다.
'DevTools Automatic Workspace Folders'라는 관련 플래그도 찾을 수 있으며 이 플래그도 사용 중지할 수 있습니다.
변경사항을 적용하려면 Chrome을 다시 실행하세요.

요약

devtools.json 메커니즘을 이해하고 활용하면 Chrome DevTools를 사용하여 로컬 개발 워크플로를 크게 개선할 수 있습니다.