Microsoft Teams에서 개발자 도구(DevTools) 활성화하는 방법

최근 Microsoft가 새 Teams(New Teams) 클라이언트로 전환하면서 기존에 익숙하게 사용하던 개발자 도구 접근 방식이 달라졌습니다. Teams 앱 개발이나 디버깅 작업을 하다 보면 콘솔 로그 확인, 네트워크 트래픽 분석, DOM 구조 확인 등이 필요한 경우가 많은데요. 이번 글에서는 새 Teams 환경에서 개발자 도구를 활성화하는 방법을 정리해 보겠습니다.

---

왜 개발자 도구가 필요할까?

Teams 내에서 실행되는 사용자 지정 앱, 탭(Tab), 웹 콘텐츠 등을 개발하거나 문제를 분석할 때 개발자 도구는 필수입니다.

개발자 도구를 활용하면 다음과 같은 작업이 가능합니다.

• JavaScript 오류 확인
• 네트워크 요청 분석
• HTML/CSS 구조 검사
• 콘솔 로그 확인
• Teams 앱 디버깅

다만 새 Teams에서는 기본적으로 개발자 도구 메뉴가 노출되지 않기 때문에 별도 설정이 필요합니다.

---

1. configuration.json 파일 생성

먼저 개발자 메뉴를 활성화하기 위한 설정 파일을 생성합니다.

파일명은 다음과 같습니다.

configuration.json

 

파일 내용은 아래와 같이 작성합니다.

 

{
  "core/devMenuEnabled": true
}

 

---

2. 지정된 경로에 파일 저장

생성한 configuration.json 파일을 아래 경로에 저장합니다.

%localappdata%\Packages\MSTeams_8wekyb3d8bbwe\LocalCache\Microsoft\MSTeams

 

경로 이동 방법

Windows 실행 창(Win + R)을 열고 아래 경로를 입력하면 쉽게 이동할 수 있습니다.

%localappdata%\Packages\MSTeams_8wekyb3d8bbwe\LocalCache\Microsoft\MSTeams

 

해당 폴더가 열리면 생성한 파일을 복사하거나 저장합니다.

---

3. Teams 완전히 종료하기

설정을 적용하기 위해서는 Teams를 완전히 종료해야 합니다.

단순히 창을 닫는 것만으로는 적용되지 않습니다.

1. 작업 표시줄 오른쪽의 시스템 트레이 영역 확인
2. Teams 아이콘 우클릭
3. Quit(종료) 선택

이후 Teams를 다시 실행합니다.

경우에 따라 재실행 시 로그인을 다시 요구할 수 있지만 정상적인 동작이므로 다시 로그인하면 됩니다.

---

4. 개발자 도구 실행

Teams가 다시 실행되면 시스템 트레이에 있는 Teams 아이콘을 우클릭합니다.

메뉴를 확인해 보면 다음과 같은 항목이 추가된 것을 볼 수 있습니다.

Engineering Tools
 └ Open Dev Tools

 

Open Dev Tools를 선택하면 개발자 도구 창이 실행됩니다.

---

개발자 도구에서 할 수 있는 작업

개발자 도구가 열리면 일반 웹 브라우저의 DevTools와 유사한 기능을 사용할 수 있습니다.

Console

 

console.log("Hello Teams");

 

콘솔 로그 및 오류 메시지를 확인할 수 있습니다.