자바스크립트 실행기

브라우저에서 쓰는 자바스크립트 콘솔입니다. JS 탭에 코드를 쓰면 아래에 console.log, console.table, 경고, 오류가 줄 번호와 함께 나옵니다. async/await와 fetch도 되므로 API 응답이나 reduce 같은 배열 메서드를 Node.js나 설치 없이 몇 초 만에 시험할 수 있습니다.

사용법

1. 각 탭에 HTML, CSS, 자바스크립트를 쓰세요. 자동 실행이 켜져 있으면 입력을 멈추고 잠시 뒤 결과가 다시 로드되고, 꺼져 있으면 실행을 누르세요.
2. console.log, warn, error, info, table은 결과 아래 콘솔에 나옵니다. 처리되지 않은 오류에는 줄 번호가 나오고 누르면 그 줄로 이동합니다.
3. 템플릿에서 시작해 보세요. 기본 페이지, 캔버스 애니메이션, 자바스크립트 콘솔 예제가 있습니다.
4. 공유 링크를 복사하거나(코드가 링크 안에 압축되어 들어갑니다) 전체를 .html 파일 하나로 내려받으세요.

• 결과는 같은 출처 접근이 막힌 샌드박스 iframe에서 실행됩니다. 이 사이트, 쿠키, 저장소를 읽을 수 없고 아무것도 업로드되지 않습니다.
• 코드는 이 브라우저에만 저장됩니다. 공유 링크를 열면 그 링크의 코드를 대신 불러옵니다.
• 공유 링크는 코드를 # 뒤에 담기 때문에 서버로 전송되지 않습니다. 코드가 아주 길면 링크도 매우 길어져 일부 앱에서 잘릴 수 있습니다.
• 완전한 HTML 문서를 붙여 넣으면 CSS는 head 안에, 자바스크립트는 </body> 앞에 들어갑니다.

이럴 때 쓰세요

프로젝트에 넣기 전에 CSS 기법을 시험하거나, 버그를 몇 줄로 재현해 동료나 커뮤니티에 공유하거나, 컴포넌트를 시제품으로 만들거나, 웹 기초를 가르치거나, fetch로 API를 시험할 때 좋습니다. 탭마다 언어가 하나씩이고, 입력을 멈추면 잠시 뒤 결과가 다시 로드됩니다. 무거운 스크립트라면 자동 실행을 끄고 원할 때 실행하세요.

console.log, info, warn, error, console.table은 결과 아래에 나옵니다. 처리되지 않은 오류와 거부된 Promise는 줄 번호와 함께 나오며, 누르면 해당 코드 줄로 이동합니다.

샌드박스 동작 방식

페이지는 같은 출처 접근 권한이 없는 격리된 iframe 안에서 실행됩니다. 그래서 이 사이트의 저장소나 쿠키를 읽을 수 없고, 무한 루프나 오류가 나도 미리 보기에만 영향을 줍니다. 코드에서 보내는 네트워크 요청은 일반 웹 페이지처럼 브라우저에서 나가며, 그 밖에는 아무것도 전송하지 않습니다. async/await와 fetch를 쓰는 최신 자바스크립트도 일반 페이지처럼 동작합니다.

공유와 저장

편집기는 마지막으로 쓴 코드를 이 브라우저에 저장합니다. 공유 링크는 세 탭의 내용을 압축해 URL의 # 뒤에 넣는데, 이 부분은 브라우저가 서버로 보내지 않습니다. 코드가 길면 링크도 길어져 일부 메신저에서 잘릴 수 있습니다. .html로 내려받으면 어떤 브라우저에서나 열리는 독립 파일로 보관할 수 있습니다.

자주 묻는 질문