Project IDX는 작업공간에서 바로 앱을 디버그할 수 있는 몇 가지 방법을 제공합니다. 웹 및 Flutter 앱은 작업공간의 Chrome 웹 미리보기에서 Lighthouse 및 Chrome DevTools를 제공합니다. Flutter 앱은 iOS, Android, 웹 미리보기를 제공하여 코딩 중에 앱을 무작위로 검사하고 테스트할 수 있습니다. 내장된 디버그 콘솔은 가장 일반적인 언어의 자동 디버깅과 작업공간의 launch.json 파일에 정의할 수 있는 맞춤 디버깅을 지원합니다.
앱 미리보기
IDX에는 웹 앱 (Chrome 및 모바일 Safari) 및 Flutter 앱 (iOS, Android, Chrome)의 작업공간 내 앱 미리보기가 포함되어 있습니다. Android 및 Chrome 미리보기는 핫 리로드와 핫 리프레시를 지원하며 전체 에뮬레이터 기능을 제공합니다. Safari 및 iOS 시뮬레이터는 다양한 iOS 기기에서 시각적 양방향 미리보기를 제공하며 모바일 및 웹 앱의 iOS 환경을 시뮬레이션합니다.
IDX 미리보기에 대한 자세한 내용은 앱 미리보기를 참조하세요.
웹 미리보기에 Chrome DevTools 사용 (실험용)
Chrome DevTools를 사용하면 웹 미리보기에서 직접 앱의 문제를 진단할 수 있습니다. Chrome 브라우저에서 DevTools를 여는 것과 동일한 방식으로 IDX 웹 미리보기 패널에서 Chrome DevTools에 액세스할 수 있습니다. 
이 기능은 이상적인 사용자 환경을 만드는 과정에서 현재 실험 단계에 있습니다. 의견을 보내주세요.
IDX 작업공간에 Chrome DevTools를 추가합니다.
- 톱니바퀴 아이콘을 클릭하거나 Ctrl + , (Windows/Linux/ChromeOS) 또는 Cmd + , (MacOS)를 눌러 설정 창을 엽니다.
- IDX: Web Dev Tools 설정을 찾아 웹 미리보기용 Chrome DevTools 사용 설정 (브라우저 새로고침 필요)을 선택합니다.
settings.json파일을 사용하는 경우"IDX.webDevTools": true를 설정할 수도 있습니다. - 브라우저 창을 새로고침하고 IDX 작업공간을 새로고침하세요.
프로젝트 IDX에서 웹 미리보기 열기: 명령어 팔레트 (Mac의 경우 Cmd+Shift+P, ChromeOS, Windows, Linux의 경우 Ctrl+Shift+P)를 열고 프로젝트 IDX: 웹 미리보기 표시를 선택합니다.
DevTools 패널은 웹 미리보기 패널 내에서 최소화되어 있습니다. DevTools 바를 클릭하여 패널을 펼치고 웹 미리보기 패널 내에서 DevTools를 사용합니다.
Chrome 브라우저에서 앱을 디버그하는 것과 동일한 방식으로 IDX 웹 미리보기에서 DevTools 패널을 사용합니다.
웹 미리보기용 Lighthouse 실행
Lighthouse는 개발자가 선택한 특정 감사 카테고리를 기반으로 앱을 감사하고 발견 항목과 제안이 포함된 보고서를 반환합니다. Project IDX의 웹 미리보기에서 직접 Lighthouse 보고서를 실행할 수 있습니다.
프로젝트 IDX에서 웹 미리보기 열기: 명령어 팔레트 (Mac의 경우 Cmd+Shift+P, ChromeOS, Windows, Linux의 경우 Ctrl+Shift+P)를 열고 프로젝트 IDX: 웹 미리보기 표시를 선택합니다.
웹 미리보기 툴바에서 실적 확인 아이콘을 클릭합니다.
Lighthouse 패널에서 원하는 감사 카테고리를 선택합니다. 성능, 접근성, 권장사항 준수, 검색엔진 최적화, 프로그레시브 웹 앱 성능 감사 보고서 중에서 선택할 수 있습니다. 페이지 분석을 클릭하여 보고서를 생성합니다.보고서를 생성하는 데 몇 분 정도 걸릴 수 있습니다.
Lighthouse 패널에 보고서가 표시되면 각 감사 카테고리의 결과를 검토하거나 점수와 카테고리 이름을 클릭하여 감사 카테고리 간에 전환할 수 있습니다.
디버그 콘솔 사용
프로젝트 IDX에는 코드 OSS의 내장 디버그 콘솔이 포함되어 있습니다. 이 콘솔을 사용하면 가장 일반적인 프로그래밍 언어에 즉시 사용 가능한 디버거로 앱을 디버깅하거나 VSCode Marketplace에서 디버깅 확장 프로그램을 추가할 수 있습니다.
맞춤 디버깅을 작성하려면 launch.json 파일을 작업공간에 추가합니다.