게시일: 2025년 10월 22일
Chrome에서 JavaScript 소스의 실시간 편집 기능을 지원 중단합니다. Chrome 142에서 실험 플래그 뒤로 이동되며 Chrome 145 (2026년 2월)에서 완전히 삭제될 예정입니다. 로컬 재정의, 작업공간, 스니펫과 같은 소스 파일과 관련된 다른 강력한 기능은 삭제되지 않으며 계속 완전히 지원됩니다.
Chrome DevTools팀은 개발자에게 강력하고 안정적인 도구를 제공하기 위해 끊임없이 노력하고 있습니다. 이러한 노력의 일환으로 더 이상 제 역할을 하지 못하는 기능을 지원 중단해야 하는 경우도 있습니다. 이번 결정은 신중하게 이루어졌으며, 기능의 유지관리 비용이 지나치게 높고 사용률이 낮으며 더 나은 최신 대안이 있다는 점을 고려했습니다. 워크플로 변경으로 인해 불편을 드릴 수 있다는 점을 잘 알고 있으며, 이번 게시물을 통해 그 이유를 명확하게 설명하고자 합니다.
라이브 편집이란 무엇이었나요?
실시간 편집을 사용하면 런타임에 스크립트 파일의 콘텐츠를 즉시 바꿀 수 있습니다. 스크립트가 중단점에서 일시중지된 경우에도 작동했습니다. 소스 패널에서 JavaScript 코드를 수정하고 파일을 저장 (Command+S / Ctrl+S)하여 변경사항을 적용할 수 있습니다. 그러면 디버거가 런타임에 이미 정의된 함수를 패치합니다. 수정된 함수가 호출 스택에 있는 경우 이 함수도 다시 시작됩니다.
목표는 전체 페이지를 새로고침하지 않고 작은 변경사항을 테스트하는 방법을 제공하는 것이었습니다. 전체 페이지를 새로고침하면 애플리케이션의 상태가 지워지기 때문입니다. 이러한 방식으로 목표는 최신 개발 스택에서 핫 모듈 교체 (HMR)가 달성하는 것과 유사했습니다.
삭제하는 이유는 무엇인가요?
실시간 편집의 사용자 환경은 항상 어려웠습니다. 관련 단축키 (Command+S / Ctrl+S)는 일반적으로 파일을 저장하는 데 사용되지만 추가 부작용은 없으므로 놀라울 수 있습니다. 실패하면 피드백이 명확하지 않을 수 있습니다. DevTools에 'LiveEdit 실패: 스택에 있는 함수 (현재 실행 중)는 수정할 수 없습니다'와 같은 경고 메시지가 표시될 수 있으며, 이 메시지를 간과하면 개발자가 변경사항이 적용되었는지 알 수 없습니다.
라이브 편집이 소스 파일과 관련된 다른 DevTools 기능과 상호작용하면 상황이 더 악화됩니다. 예를 들어 DevTools 스니펫의 콘텐츠를 실시간으로 수정하면 스니펫 소스의 ID와 관련하여 DevTools에 혼동이 발생하여 새 버전이 읽기 전용 파일로 표시될 수 있습니다. 작업공간 기능을 사용 설정하면 DevTools가 파일 시스템의 소스 변경사항을 관찰하고 이러한 변경사항을 라이브 페이지에 원활하게 적용할 수 있습니다. 이 동작은 사용자의 환경과 도구 모음 설정에 따라 예상될 수도 있고 놀라울 수도 있습니다.
실시간 수정이 해결하려고 했던 원래 문제(애플리케이션 상태를 손실하지 않고 변경사항 적용)는 이제 핫 모듈 교체(HMR)를 통해 더 효과적으로 해결됩니다. HMR은 React, Angular, Vue와 같은 최신 웹 개발 프레임워크의 표준 기능입니다. 사용자 공간에서 동일한 효과를 더 높은 수준의 추상화로 달성합니다. DevTools에서 실시간으로 수정하면 이 기능이 방해되어 예기치 않은 잘못된 동작이 발생할 수 있습니다.
이러한 문제는 사용자 환경을 어렵게 만듭니다. 또한 사용 통계에서도 확인되었듯이 이 기능은 대부분의 개발자 워크플로의 핵심 부분이 되지 않았습니다. 이 기능을 사용하는 사용자 수는 매우 적으며 감소 추세입니다.
높은 유지보수 비용 및 기술적 복잡성
실제 페이지에서 코드를 바꾸는 것은 적절한 시맨틱을 정의하는 측면뿐만 아니라 구현 측면에서도 간단하지 않습니다. V8 JavaScript 엔진과 Chrome DevTools에 상당한 엔지니어링 비용이 발생하며 V8의 여러 부분에서 신중하게 고려해야 합니다. 주의를 기울이지 않으면 실시간 편집으로 인해 재현하기 어렵고 디버그하기 어려운 비정상 종료가 발생할 수 있습니다. 예를 들어 함수의 새 버전에 이전 버전과 다른 수의 정규식, 객체 또는 함수 리터럴이 포함된 경우 이러한 리터럴을 추적하는 데이터 구조를 신중하게 조정해야 합니다.
이러한 유지관리 부담으로 인해 새로운 JavaScript 기능의 구현이 느려지고 더 널리 사용되는 DevTools 기능을 개선하는 데 필요한 리소스가 부족해집니다.
이러한 복잡성으로 인해 다음과 같은 지원되지 않는 시나리오도 많이 발생했습니다.
- 호출 스택에 있지만 최상위 프레임이 아닌 함수를 수정합니다.
- 비동기 함수 또는 생성기 수정
- ES 모듈의 최상위 코드 수정
대안
앞서 언급한 것처럼 HMR (핫 모듈 교체)은 더 인기 있는 대안이며 몇 가지 주요 측면에서 실시간 편집보다 우수합니다.
- 실시간 편집은 소스 코드 수준에서 실제 페이지의 이전 버전 일부를 대체합니다. 반면 HMR은 웹 프레임워크에서 의도한 추상화 수준에서 이전 버전을 교체하여 라이브 업데이트 중에 구성요소와 애플리케이션 상태를 올바르게 이전할 가능성을 높입니다.
- HMR은 작성된 소스 코드에서 작동합니다. 편집기에서 원본 파일 (예: TypeScript, JSX)을 수정하면 빌드 도구가 브라우저의 업데이트를 처리하는 반면, 실시간 편집은 배포된 소스 파일에만 영향을 미치며, 이는 대부분의 경우 도구 모음에서 생성된 빌드 출력입니다.
- 견고하고 잘 통합되어 있습니다. HMR은 최신 개발 도구 모음의 핵심 부분으로, 업데이트가 성공하거나 실패할 때 명확한 피드백을 제공하여 안정적인 환경을 제공합니다.
실시간 편집 기능이 삭제되더라도 Chrome DevTools의 다른 두 가지 강력한 기능에는 영향을 미치지 않습니다.
- 로컬 재정의를 사용하면 네트워크 요청을 가로채고 대신 로컬 파일을 제공할 수 있습니다. 소스 코드에 액세스할 수 없는 라이브 프로덕션 사이트에서 변경사항을 프로토타입으로 만드는 데 적합합니다. 변경사항은 페이지를 새로고침해도 유지됩니다.
- 작업공간은 소스 패널과 로컬 프로젝트 파일 간에 양방향 바인딩을 만들어 DevTools를 더 강력한 편집기로 전환합니다. DevTools에서 변경사항을 저장하면 파일 시스템에 직접 저장됩니다. 그러면 개발 서버의 HMR 또는 실시간 다시 로드 프로세스가 트리거될 수 있습니다.
결론
실시간 편집은 유지보수 비용이 높고 사용량이 적어 지속 가능하지 않으므로 삭제됩니다. 최신 웹 개발 생태계에서는 핫 모듈 교체라는 훨씬 우수한 솔루션을 제공합니다.
이 기능을 지원 중단함으로써 엔지니어링 노력을 Chrome DevTools의 더 영향력 있는 부분에 집중할 수 있습니다. 삭제 일정은 다음과 같습니다.
- 가까운 미래: 이 기능은 Chrome 142에서 실험 뒤로 이동되며 Chrome 플래그 (chrome://flags/#devtools-live-edit)로 제공됩니다.
- Chrome 145 (2026년 2월): 기능과 해당 Chrome 플래그가 완전히 삭제됩니다.
이 변경사항에 대한 의견을 보내주시기 바랍니다. 의견 문제에 대한 의견을 추가합니다.