DevTools

임베디드 브라우저는 일반 Chrome 창에서 사용하는 것과 동일한 검사기, 콘솔, 네트워크 모니터 등 전체 Chrome DevTools에 접근할 수 있습니다. AI Agent가 만든 것을 디버깅하거나, JavaScript 오류를 확인하거나, 요청이 어떻게 구성되는지 검사하는 데 사용하세요.

DevTools 열기

브라우저 패널 헤더에서 DevTools 버튼 (🔧)을 클릭하세요. Chrome DevTools가 워크스페이스와 별도로 창으로 열립니다. 편리한 어디에나 배치할 수 있습니다 — 대부분 개발자는 두 번째 모니터에 배치하거나 브라우저 패널 아래에 도킹합니다.

Chrome에서 하던 방식으로도 DevTools를 열 수 있습니다: 브라우저 패널 내부의 페이지에서 아무 곳이나 우클릭하고 검사를 선택하세요. DevTools가 우클릭한 요소에 포커스된 Elements 탭과 함께 열립니다.

사용 가능한 기능

전체 DevTools 도구 세트를 사용할 수 있습니다:

• Elements — 페이지의 모든 요소에 대한 HTML과 CSS를 검사하고 수정합니다. 트리에서 요소를 클릭하면 브라우저에서 강조 표시되거나, 페이지에서 요소를 클릭하면 트리에서 찾을 수 있습니다. 소스 파일을 건드리지 않고 변경 사항을 시도하기 위해 인라인에서 스타일을 편집하세요.
• Console — console.log 출력, JavaScript 오류 및 경고를 확인합니다. 파일을 편집하지 않고 테스트하기 위해 콘솔에서 직접 JavaScript 표현식을 실행합니다.
• Network — 앱이 만드는 모든 HTTP 요청을 모니터링합니다. 요청 헤더, 응답 본문, 타이밍, 상태 코드를 확인합니다. API 호출이 올바르게 전송되고 응답이 맞는지 확인하는 데 유용합니다.
• Sources — 중단점을 사용하여 JavaScript를 단계별로 실행합니다. 중단점을 설정하고 브라우저에서 작업을 트리거하면 실행이 일시 중지되어 변수 값을 검사할 수 있습니다.
• Application — 로컬 스토리지, 세션 스토리지, 쿠키, IndexedDB를 검사합니다. 인증 상태나 브라우저에 저장된 모든 것을 디버깅하는 데 유용합니다.

일반적인 디버깅 시나리오

AI Agent가 만든 것 확인: Elements 패널을 열고 HTML 구조를 탐색합니다. Agent가 올바르게 연결했는지 — 올바른 클래스 이름, 적절한 중첩, 올바른 속성 — 알 수 있습니다.

JavaScript 오류 찾기: 페이지를 로드하기 전에 Console을 엽니다. 처리되지 않은 오류가 파일 이름과 행 번호와 함께 여기에 표시됩니다. 근본 원인을 수정할 수 있도록 AI Agent에게 오류 메시지를 공유하세요.

API 호출 디버깅: Network 탭을 열고 앱에서 요청을 트리거하는 작업(예: 로그인 버튼 클릭)을 클릭합니다. 요청이 목록에 표시됩니다. 클릭하여 전체 요청 및 응답을 확인합니다 — 인증 문제나 잘못된 요청 본문 진단에 유용합니다.

팁: AI Agent가 변경 작업을 하는 동안 Console 탭을 열어두세요. 오류가 페이지에 표시되기 전에 여기에 나타나므로 수정이 필요한 것에 대해 더 빨리 피드백을 받을 수 있습니다.