새로운 Microsoft Edge는 Chromium 오픈소스 프로젝트를 기반으로 만들어졌습니다. 웹 개발자라면 Edge(Chromium)에서 제공하는 개발자 도구(DevTools) 목록을 미리 파악해 두는 것이 좋습니다. 기존보다 몇 가지 새로운 도구가 추가되어, 개발자가 Microsoft Edge에서 더 빠르고 편리하게 웹사이트를 빌드하고 테스트할 수 있습니다.
새 Edge(Chromium)의 DevTools 목록
Microsoft Edge(Chromium)의 DevTools는 크게 두 가지 범주로 나눌 수 있습니다.
- 핵심 도구(Core Tools)
- 확장 프로그램(Extensions)
1] 핵심 도구(Core Tools)
요소(Elements) 패널 – 웹 개발자에게 가장 유용한 DevTools 기능 중 하나는 페이지의 HTML과 CSS를 "실시간 편집(Live Edit)"할 수 있는 기능입니다. 요소 패널을 사용하면 HTML과 CSS를 수정하고, 접근성 속성을 검사하며, 이벤트 리스너를 확인하고, DOM 변경 중단점을 설정할 수 있습니다.
콘솔(Console) – 콘솔 도구는 일반적으로 JavaScript 오류, 네트워크 요청, 보안 오류 등 웹 페이지와 관련된 정보를 기록합니다. 그렇기 때문에 문제 해결의 첫 번째 단계는 브라우저 콘솔을 확인하는 것입니다.
이러한 이유로 Edge 브라우저에는 전용 콘솔 패널이 마련되어 있습니다. 개발자는 이 패널을 통해 대화형 디버깅과 임시 테스트를 수행하고, 실행 중인 웹 페이지와 양방향으로 통신할 수 있습니다.
소스(Sources) 패널 – JavaScript 개발자에게 가장 유용한 단일 도구인 JavaScript 디버거입니다. 이를 활용하면 런타임에 코드를 열고 편집하고, 중단점을 설정하고, 코드를 한 줄씩 실행하며 웹사이트의 상태를 단계적으로 확인할 수 있습니다.
네트워크(Network) 패널 – 네트워크 및 브라우저 캐시에서 주고받는 요청과 응답을 모니터링하고 검사할 수 있습니다.
성능(Performance) 패널 – 런타임 성능 데이터를 기록하는 역할을 담당합니다. 런타임 성능이란 페이지가 로드되는 시점이 아니라 실제 실행 중일 때의 동작 상태를 의미합니다.
메모리(Memory) 패널 – 메모리 문제는 성능 저하의 주요 원인이 될 수 있습니다. 시간이 지날수록 페이지가 점점 느려지고 반응이 늦어지는 현상도 메모리 문제에서 비롯되는 경우가 많습니다. 메모리 패널은 시스템 리소스 사용량을 측정하고, 코드 실행의 여러 시점에서 힙 스냅샷을 비교할 수 있게 해줍니다.
애플리케이션(Application) 패널 – 웹 페이지의 다양한 속성을 표시합니다. 이 패널에서는 스토리지, 데이터베이스, 캐시를 검사하고 관리할 수 있습니다.
보안(Security) 패널 – 현재 보고 있는 페이지가 안전한지 여부를 확인하고 해당 출처(origin)를 검사할 수 있습니다. 개발자는 이를 활용해 보안 문제를 디버깅하고 HTTPS가 올바르게 구현되었는지 점검할 수 있습니다.
감사(Audits) 패널 – 이름 그대로 웹사이트를 진단·감사하는 기능으로, 별도의 설명이 필요 없을 정도로 직관적입니다. 감사 결과를 참고하면 웹사이트 품질을 개선하는 데 큰 도움이 됩니다.
함께 읽으면 좋은 글: Edge DevTools에서 '프로파일링 세션을 시작하는 중 오류가 발생했습니다' 메시지가 나타나는 경우
2] 확장 프로그램(Extensions)
Edge는 확장 프로그램을 지원하지만, 현재까지 DevTools 전용 확장 프로그램은 자체적으로 제공되지 않습니다. 대신 Chrome 웹 스토어 같은 서드파티 확장 스토어에서 필요한 확장 프로그램을 설치해야 합니다.
- Edge 왼쪽 상단의 점 세 개(메뉴 아이콘)를 클릭한 후 확장을 선택합니다.
- 확장 페이지 왼쪽 하단에서 다른 스토어의 확장 허용 토글을 켭니다.
- Chrome 웹 스토어로 이동하여 DevTools와 호환되는 확장 프로그램(예: Facebook의 React Developer Tools)을 엽니다.
- 'Chrome에 추가'를 클릭하면 해당 DevTools 확장 프로그램이 Microsoft Edge에 추가됩니다!
간단히 말해, 이것이 Edge에 Chrome 확장 프로그램을 설치하는 방법입니다. 다만 순수 Chrome 확장 프로그램의 경우, Microsoft가 일부 Chromium 서비스와 기능을 제거했기 때문에 정상적으로 작동하지 않을 수도 있다는 점에 유의하세요.
새로운 Edge 브라우저는 Windows 10의 다음 기능 업데이트와 함께 제공될 예정입니다. Edge에 의존하는 웹사이트나 비즈니스를 운영하고 있다면 미리 대비해 두는 것이 좋습니다.
자세한 내용은 Microsoft.com 공식 문서를 참고하세요.