메인 콘텐츠로 건너뛰기

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

Preview는 웹 앱의 출력을 표시하고 브라우저 개발자 도구 및 디버깅 기능을 제공합니다. Run 버튼으로 웹 앱을 실행하면 Replit이 인터넷에서 접근 가능한 임시 URL을 할당합니다. Preview 도구는 브라우저에서 보는 것과 동일하게 페이지를 렌더링하며, 주요 브라우저에서 볼 수 있는 기능과 유사한 개발자 도구도 포함하고 있습니다.
Preview는 Webview의 새로운 이름입니다.
screenshot of the Preview tool

​
기능

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

​
사용 방법

Preview 도구는 웹 앱을 실행할 때 자동으로 열립니다. User Settings 도구의 Automatic Preview 설정에서 이 동작을 전환할 수 있습니다. 다음 안내는 Preview를 여는 방법을 설명합니다.
왼쪽 Tool dock에서:
  1. All tools icon All tools를 선택하여 Project Editor 도구 목록을 확인합니다.
  2. Preview icon Preview를 선택합니다.
Search bar에서:
  1. 상단의 magnifying glass icon 돋보기를 선택하여 검색 도구를 엽니다.
  2. “Preview”를 입력하여 도구를 찾고 결과에서 선택합니다.

​
주소 바

Preview 탭 상단의 주소 바에는 다음 도구들이 포함됩니다:
  • 뒤로 버튼: 탐색 기록의 이전 페이지로 이동
  • 앞으로 버튼: 탐색 기록의 다음 페이지로 이동
  • 앱 도메인: {...}.replit.dev를 선택하여 Replit App의 임시 URL 정보 보기
  • 주소 필드: 현재 URL 경로를 확인하거나 새 경로 입력

​
브라우저 도구

주소 바 오른쪽의 브라우저 도구는 다음 기능을 포함합니다:
  • 화면 크기: 반응형 디자인을 테스트하기 위해 다양한 기기 화면 크기 프리셋에서 선택
  • Devtools: 개발자 도구 패널 전환
  • 새 탭: 웹 앱 URL을 새 브라우저 탭에서 열기
모바일 앱을 개발 중인가요? Preview 패널은 iOS Simulator 또는 Android Emulator에서의 Preview도 지원합니다. 자세한 내용은 네이티브 모바일 앱을 참조하세요.

​
개발자 도구

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

​
Console

Console 탭은 애플리케이션에서 생성된 JavaScript 로그를 표시합니다. 이 탭에서 다음 작업을 수행할 수 있습니다:
  • 출력 지우기: clear icon 슬래시가 있는 원 아이콘을 선택하여 모든 콘솔 출력 제거.
  • 출력 필터링: 유형별(전체, 정보, 경고, 오류)로 필터링된 콘솔 출력 보기.
  • 텍스트 일치 필터링: 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 없이 어떻게 작동하는지 테스트하기 위해 비활성화)
  • 표시 환경설정: 개발자 도구의 테마, 패널 크기, 투명도 및 기타 동작 변경