Chạy thử HTML, CSS & JS

Công cụ này làm gì

Playground này là một trình soạn code online nhỏ cho các thử nghiệm front-end. Viết HTML, CSS và JavaScript trong ba tab có tô sáng cú pháp và phần xem trước cập nhật ngay khi bạn gõ, giống CodePen hay JSFiddle nhưng không cần tài khoản. Console tích hợp hiển thị đầu ra console.log() và lỗi kèm số dòng trong JavaScript của bạn, nên bạn có thể gỡ lỗi mà không cần mở công cụ dành cho nhà phát triển. Nhờ vậy nó rất tiện trên điện thoại hay máy tính mượn.

Hãy dùng nó để thử một bố cục CSS, tái hiện lỗi cho đồng nghiệp, kiểm tra một đoạn code từ Stack Overflow, dạy người mới bắt đầu, hoặc phác thảo nhanh một bản mẫu.

Cách sử dụng

1. Gõ vào các tab HTML, CSS và JS, hoặc nhấn Ví dụ để bắt đầu từ một demo bộ đếm nhỏ. Dấu chấm trên tab nghĩa là tab đó có code.
2. Phần xem trước tự động chạy 0,6 giây sau khi bạn ngừng gõ. Tắt Tự động chạy với script nặng và nhấn Chạy hoặc Ctrl+Enter khi đã sẵn sàng.
3. Theo dõi Console để xem log, cảnh báo và lỗi; dòng mới nhất luôn ở trên cùng. Object, mảng, Map, Set và phần tử DOM được hiển thị ở dạng gọn, dễ đọc.
4. Chia sẻ để gửi code cho người khác. Tải ZIP lưu index.html, style.css và script.js thành các tệp riêng, sẵn sàng cho dự án thật; Tải HTML lưu tất cả thành một tệp index.html mở được trên mọi trình duyệt.

Code của bạn được giữ trong trình duyệt này, nên khi quay lại vẫn còn nguyên. Phím Tab thụt lề bằng hai dấu cách.

Ví dụ

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Mỗi lần nhấn sẽ thêm một dòng vào console. Nếu bạn gõ sai tên, console hiển thị ReferenceError màu đỏ kèm dòng trong tab JS nơi lỗi xảy ra.

Cách hoạt động

Ba khung được ghép thành một tài liệu HTML và nạp vào một iframe có thuộc tính sandbox, nên code không thể đọc cookie hay bộ nhớ của trang web này. Một script nhỏ được thêm vào khung để chuyển các lệnh console và lỗi chưa bắt được về trang, và không có gì rời khỏi thiết bị của bạn.