Cách sử dụng
- Chuyển giữa trình soạn thảo HTML, CSS và JavaScript bằng các nút phía trên rồi viết code.
- Bản xem trước tự cập nhật khi bạn ngừng gõ, hoặc tắt tự động và nhấn Chạy.
- Kiểm tra console để xem đầu ra và lỗi, rồi nhấn Tải HTML để lưu trang.
Giải thích tùy chọn
- Sandbox
- Bản xem trước chạy trong sandbox cô lập, không thể đọc cookie hoặc storage của trang này và không thể mở hộp thoại.
- Console
- Hiện đầu ra console.log, warn, error cùng lỗi chưa bắt được và số dòng, giữ 200 mục mới nhất.
- Tải xuống
- Gộp ba phần thành một tệp HTML, với style trong thẻ style và script ở cuối body.
Trang được ghép như thế nào
Ba trình soạn thảo được kết hợp thành một tài liệu, theo thứ tự này. Cùng bố cục đó là thứ bạn nhận được khi nhấn Tải HTML, ngoại trừ đoạn script nhỏ gửi đầu ra console xuống trang bên dưới phần xem trước được bỏ khỏi bản tải xuống.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>Vì script nằm sau HTML của bạn, bạn có thể dùng document.getElementById ngay mà không cần chờ trang tải xong. Bạn chỉ viết phần thuộc bên trong body ở trình soạn HTML, không phải các thẻ html, head hay body. Phần xem trước là một iframe chỉ có quyền chạy script, đó là lý do hộp thoại alert và quyền truy cập cookie của trang này bị chặn.
Câu hỏi thường gặp
Có dùng thư viện bên ngoài được không?
Có. Thêm thẻ script hoặc link trỏ tới CDN như jsDelivr trong trình soạn thảo HTML.
Vì sao alert không hiện?
Sandbox chặn hộp thoại nên alert và confirm không làm gì. Hãy dùng console.log.
Code có được lưu không?
Không được lưu hoặc tải lên. Hãy tải tệp HTML trước khi đóng trang.
Quyền riêng tư
Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.