메인 콘텐츠로 건너뛰기
Preview는 웹 앱의 출력을 보여주며 브라우저 개발자 도구와 디버깅 기능을 제공합니다. Run 버튼으로 웹 앱을 실행하면, Replit은 인터넷에서 접근할 수 있는 임시 URL을 할당합니다. Preview 도구는 브라우저에서 보는 것과 동일하게 페이지를 렌더링합니다. 또한 일반적인 브라우저에서 찾을 수 있는 기능과 유사한 개발자 도구도 포함되어 있습니다.
Preview는 Webview의 새로운 이름입니다.
screenshot of the Preview tool

​
기능

Preview는 웹 앱을 원활하게 테스트하고 디버그할 수 있도록 다음 기능을 제공합니다.
  • 실시간 웹 보기: 브라우저 탭을 벗어나지 않고 앱을 보고 상호작용하기
  • 개발자 도구: 내장 도구로 문제를 빠르게 진단하기
  • 반응형 테스트: 다양한 모바일 기기 화면 크기로 앱 보기

​
사용법

Preview 도구는 웹 앱을 실행하면 자동으로 열립니다. User Settings 도구의 Automatic Preview 설정에서 이 동작을 켜고 끌 수 있습니다. 다음 설명은 Preview를 여는 방법을 안내합니다.
좌측 도구 도크에서:
  1. All tools icon All tools를 선택해 Project Editor 도구 목록을 확인하세요.
  2. Preview icon Preview를 선택하세요.
검색창에서:
  1. 상단의 magnifying glass icon 돋보기를 선택해 검색 도구를 여세요
  2. “Preview”를 입력해 도구를 찾고 검색 결과에서 선택하세요.

​
주소창

Preview 탭 상단의 주소창에는 다음 도구가 포함되어 있습니다.
  • 뒤로 가기 버튼: 탐색 기록에서 이전 페이지로 이동
  • 앞으로 가기 버튼: 탐색 기록에서 다음 페이지로 이동
  • 앱 도메인: {...}.replit.dev를 선택해 Replit App의 임시 URL 정보 확인
  • 주소 필드: 현재 URL 경로 확인 또는 새 경로 입력

​
브라우저 도구

주소창 우측의 브라우저 도구에는 다음 기능이 포함되어 있습니다.
  • 화면 크기: 다양한 기기 화면 크기 프리셋을 선택해 반응형 디자인 테스트
  • Devtools: 개발자 도구 패널 켜고 끄기
  • 새 탭: 웹 앱 URL을 새 브라우저 탭에서 열기
모바일 앱을 빌드하시나요? Preview 패널은 iOS Simulator 또는 Android Emulator에서의 프리뷰도 지원합니다. 자세한 내용은 Native Mobile Apps를 참고하세요.

​
개발자 도구

Eruda 오픈 소스 프로젝트로 구동되는 개발자 도구는 다음 작업을 수행하는 데 도움이 됩니다.
  • 앱 컨텍스트에서 JavaScript 콘솔을 보고 상호작용하기
  • DOM 요소 검사하기
  • 네트워크 요청 모니터링하기
  • 표시 및 동작 환경설정 구성하기
개발자 도구에 접근하려면 Preview 탭 상단의 wrench icon Devtools 버튼을 선택해 켜고 끄세요. 다음 섹션에서는 각 개발자 도구 탭에서 수행할 수 있는 작업을 설명합니다.

​
Console

Console 탭은 애플리케이션에서 생성된 JavaScript 로그를 표시합니다. 이 탭에서는 다음 작업을 수행할 수 있습니다.
  • 출력 지우기: clear icon 사선이 그어진 원 아이콘을 선택해 모든 콘솔 출력 제거.
  • 출력 필터링: 유형별로(All, Info, Warning, Error) 필터링된 콘솔 출력 보기.
  • 일치하는 텍스트 필터링: filter icon 필터 아이콘을 선택하고 텍스트를 입력해 일치하는 출력 보기.
  • 출력 복사: copy icon 복사 버튼을 선택해 선택한 콘솔 메시지 복사.
  • JavaScript 코드 실행: right arrow icon 오른쪽 꺾쇠를 선택해 앱 컨텍스트에서 JavaScript 코드 실행. 표현식을 입력하고 Execute를 선택하세요.

​
Elements

Elements 탭에서는 웹 페이지의 DOM 구조를 검사하고 수정할 수 있습니다.
  • 요소 세부정보 보기: DOM 요소와 HTML 코드 내 위치에 대한 세부정보 보기
  • 출력 복사: copy icon 복사 버튼을 선택해 선택한 콘솔 메시지 복사.
select icon 화살표 선택 도구로 선택 모드를 전환하세요. 선택 모드에 들어간 후, 웹 페이지에서 요소를 선택하세요. 해당 요소의 HTML과 CSS가 Elements 탭에 표시됩니다.

​
Network

Network 탭은 웹 페이지에서 시작된 요청을 모니터링합니다. 이 탭에서는 다음 작업을 수행할 수 있습니다.
  • 요청 추적: 앱에서 시작된 모든 네트워크 요청 보기. 요청을 선택해 세부정보를 확인하세요.
  • 필터: filter icon 필터 아이콘을 선택해 텍스트와 일치하는 결과 보기. 필터를 비워두면 초기화됩니다.
  • 복사: copy icon 복사 버튼을 선택해 저장소 정보 복사.

​
Resources

Resources 탭은 페이지에서 로드된 자산과 쿠키, 로컬 저장소 등 브라우저 저장소를 보여줍니다. 다음 자산 유형에 대한 목록을 보고 새로고침할 수 있습니다.
  • JavaScript 파일
  • 스타일시트
  • Iframe
  • 이미지
이 탭에서는 다음 작업을 수행할 수 있습니다.
  • 저장소 보기: 로컬 저장소, 세션 저장소, 쿠키 검토.
  • 필터: filter icon 필터 아이콘을 선택해 텍스트와 일치하는 결과 보기. 필터를 비워두면 초기화됩니다.
  • 지우기: clear icon 지우기 버튼을 선택해 해당 저장소 유형의 모든 데이터 삭제.
  • 선택 항목 삭제: delete icon “X” 아이콘을 선택해 저장소 항목 제거.
  • 복사: copy icon 복사 버튼을 선택해 저장소 정보 복사.

​
Settings

Settings 탭에서는 개발자 도구의 모양과 동작을 커스터마이즈할 수 있습니다. 이 탭에는 다음에 대한 커스터마이즈 옵션이 포함되어 있습니다.
  • 도구 설정: 각 도구 탭에 적용되는 옵션 커스터마이즈
  • JavaScript 컨트롤: JavaScript 동작 옵션 지정, 예를 들어 앱이 JavaScript 없이 어떻게 동작하는지 테스트하기 위해 꺼두기
  • 표시 환경설정: 개발자 도구의 테마, 패널 크기, 투명도, 기타 동작 변경