HTML Previewer

HTML Previewer - Sandbox Editor HTML CSS JavaScript Trực Tuyến

Môi trường HTML previewer và sandbox chuyên nghiệp để test code HTML, CSS và JavaScript theo thời gian thực. Tính năng editor chia màn hình, live preview, console output, chế độ fullscreen, templates và nhiều hơn. Hoàn hảo cho học web development, prototyping, test code snippets và chia sẻ ví dụ.

HTML Previewer/Sandbox là gì?

HTML Previewer (còn gọi là sandbox hoặc playground) là môi trường tương tác nơi bạn có thể viết và test code HTML, CSS và JavaScript với phản hồi hình ảnh tức thì. Nó hữu ích cho:

- Học web development
- Test code snippets
- Prototyping designs
- Debug vấn đề HTML/CSS
- Chia sẻ ví dụ code
- Thử nghiệm tính năng mới
- Demos nhanh và proof of concept

Tương tự như CodePen, JSFiddle và các online code editors khác, nhưng đơn giản hơn và chạy hoàn toàn trong trình duyệt của bạn.

Làm thế nào để sử dụng HTML Previewer này?

Sử dụng previewer rất đơn giản:

1. Chọn tab: HTML, CSS hoặc JavaScript
2. Viết code của bạn trong editor
3. Nhấp 'Chạy Code' hoặc bật 'Tự động chạy' cho preview tức thì
4. Xem kết quả trong khung Xem Trước
5. Kiểm tra tab Console cho JavaScript logs và errors
6. Dùng templates để bắt đầu nhanh
7. Bật fullscreen cho workspace lớn hơn

Mẹo:
- Bật Tự động chạy cho cập nhật real-time khi gõ
- Dùng templates để học các patterns phổ biến
- Kiểm tra Console cho JavaScript errors
- Download code khi hoàn thành

Tính năng editor là gì?

Editor tập trung vào quy trình làm việc nhanh, không rườm rà:

Chỉnh Sửa Code:
- Các tab HTML, CSS và JavaScript riêng biệt
- Phím Tab chèn thụt lề 4 khoảng trắng
- Ctrl/Cmd+Enter để chạy code
- Tự động lưu vào trình duyệt (localStorage) để code không mất khi tải lại

Tính Năng Preview:
- Live preview trong iframe độc lập, sandboxed
- Chạy tự động hoặc thủ công
- Console trực tiếp capture logs và lỗi runtime
- Thanh khung nhìn responsive (Điện Thoại 375px, Máy Tính Bảng 768px, Máy Tính hoặc độ rộng tùy chỉnh)
- Chế độ preview toàn màn hình

Tùy Chọn Bố Cục:
- Split ngang (editor và preview cạnh nhau)
- Split dọc (editor trên, preview dưới)

Tính Năng Khác:
- Templates có sẵn
- Thư viện ngoài qua CDN (CSS và JavaScript)
- Download dưới dạng một file HTML hoàn chỉnh

Làm sao test các breakpoint responsive / đổi độ rộng khung nhìn?

Dùng thanh khung nhìn phía trên phần preview. Nhấp Điện Thoại (375px), Máy Tính Bảng (768px) hoặc Máy Tính (độ rộng đầy đủ), hoặc nhập độ rộng pixel tùy chỉnh và nhấp Áp Dụng. Iframe preview sẽ bị giới hạn ở độ rộng đó và căn giữa, để bạn kiểm tra các breakpoint responsive và media query mà không cần thay đổi kích thước cả trình duyệt. Độ rộng bạn chọn được ghi nhớ cho lần sau.

Tôi có thể dùng thư viện bên ngoài không?

Có! Bạn có thể dùng thư viện bên ngoài bằng cách include chúng trong HTML:

Thư Viện CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Thư Viện JavaScript:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CDNs phổ biến:
- jsDelivr: cdn.jsdelivr.net
- cdnjs: cdnjs.cloudflare.com
- unpkg: unpkg.com

Bạn có thể include:
- CSS frameworks (Bootstrap, Tailwind, Bulma)
- JavaScript libraries (jQuery, Vue, React)
- Icon libraries (Font Awesome)
- Bất kỳ CDN resource công khai nào

Khác biệt giữa Tự động chạy và Chạy thủ công?

Có hai chế độ thực thi:

Tự động chạy (Real-time):
- Code chạy tự động khi bạn gõ
- Cập nhật preview tức thì
- Tuyệt vời cho thử nghiệm nhanh
- Cập nhật với độ trễ nhỏ (debounced)
- Có thể chậm với code phức tạp
- Tốt nhất cho công việc HTML/CSS

Chạy Thủ Công:
- Code chỉ chạy khi bạn nhấp 'Chạy Code'
- Kiểm soát tốt hơn việc thực thi
- Performance tốt hơn cho code phức tạp
- Ngăn vòng lặp vô hạn vô tình
- Tốt nhất cho phát triển JavaScript
- Khuyên dùng khi học

Bạn có thể chuyển đổi giữa các chế độ bất cứ lúc nào bằng checkbox Tự động chạy.

Console hoạt động như thế nào?

Tab Console capture JavaScript output:

Những gì nó hiển thị:
- console.log() output
- console.error() messages
- console.warn() warnings
- console.info() information
- Runtime errors và exceptions

Tính năng:
- Message types có mã màu (log, error, warn)
- Timestamps cho mỗi message
- Nút xóa console
- Giữ history trong session
- Hiển thị số dòng lỗi

Ví dụ:
console.log('Xin chào');
console.error('Đây là lỗi');
console.warn('Thông báo cảnh báo');

Console giúp bạn debug JavaScript code và xem code của bạn đang làm gì.

Tại sao console.log của tôi không hiển thị?

Bây giờ thì có. Preview chèn một hook console trước khi bất kỳ JavaScript nào của bạn chạy, nên kể cả một console.log('x') đơn giản ở cấp cao nhất không có setTimeout cũng được capture và hiển thị trong tab Console. Nếu vẫn không thấy gì: hãy chắc chắn code của bạn nằm trong tab JavaScript (không bị comment), nhấp Chạy Code (hoặc bật Tự động chạy), rồi mở tab Console. Các lỗi không được bắt sẽ hiển thị màu đỏ kèm số dòng.

Làm sao debug lỗi JavaScript kèm số dòng?

Bất kỳ lỗi không được bắt hoặc promise rejection chưa xử lý nào đều được báo trong tab Console màu đỏ, kèm số dòng nơi lỗi phát sinh (ví dụ: 'Error at line 12: ...'). Viết script trong tab JavaScript, chạy nó, rồi chuyển sang Console. Huy hiệu lỗi trên tab Console cũng cho biết lần chạy gần nhất có bao nhiêu lỗi, và nó tự xóa khi lần chạy sạch tiếp theo diễn ra.

Có hỗ trợ ES module, async/await và fetch không?

Có. async/await, Promise và API fetch() đều hoạt động vì code của bạn chạy trong iframe trình duyệt thật. Các request mạng tuân theo chính sách CORS của server đích, giống như mọi trang web. Đối với ES module, hãy thêm type="module" vào thẻ script của riêng bạn trong panel HTML (panel JavaScript tự động chèn chạy như script cổ điển). ES module ngoài có thể tải từ CDN cung cấp bản +esm, chẳng hạn jsDelivr.

Có những tính năng và giới hạn nào cần biết?

Hỗ trợ:
- HTML, CSS và JavaScript trực tiếp với preview tức thì
- Console trực tiếp (logs, cảnh báo, lỗi kèm số dòng)
- Thư viện CSS và JavaScript ngoài từ bất kỳ CDN công khai nào
- Độ rộng khung nhìn responsive (Điện Thoại, Máy Tính Bảng, Máy Tính, px tùy chỉnh)
- Tải kết quả dưới dạng một file HTML độc lập
- Tự động lưu vào localStorage

Giới hạn:
- Preview chạy trong iframe sandboxed (cờ sandbox: allow-scripts, allow-modals, allow-forms, allow-popups, allow-same-origin). Một số API trình duyệt yêu cầu origin cấp cao nhất đầy đủ có thể bị hạn chế.
- Request cross-origin vẫn tuân theo CORS.
- Không có lưu trữ đám mây hay URL chia sẻ; dùng Tải Xuống để lưu hoặc chia sẻ đoạn code của bạn.

Tôi có thể lưu hoặc chia sẻ code không?

Bạn có thể lưu và chia sẻ công việc của mình:

Tùy Chọn Lưu:
- Download dưới dạng HTML file hoàn chỉnh (bao gồm CSS và JS)
- Copy code vào clipboard
- Lưu thủ công trong trình duyệt (Ctrl+S hoạt động trong editors)
- Dùng browser localStorage (code tồn tại khi refresh)

Chia Sẻ:
- Copy code và chia sẻ qua email, chat, v.v.
- Download và đính kèm vào messages
- Include vào documentation
- Paste vào các công cụ khác

Lưu ý: Công cụ này không cung cấp cloud storage hoặc URLs để chia sẻ. Để chia sẻ hosted vĩnh viễn, dùng platforms như CodePen, JSFiddle hoặc GitHub Gists.

Templates là gì?

Templates là các ví dụ code có sẵn để giúp bạn bắt đầu:

Templates Có Sẵn:
- Trống: Editor rỗng để bắt đầu từ đầu
- HTML Cơ Bản: Cấu trúc HTML5 đơn giản
- Bootstrap Starter: Thiết lập Bootstrap 5 framework
- Flexbox Layout: Ví dụ CSS Flexbox
- CSS Grid: Ví dụ modern grid layout
- CSS Animation: Demo animation tương tác

Templates tuyệt vời cho:
- Học khái niệm mới
- Bắt đầu projects nhanh
- Hiểu code patterns
- Test frameworks
- Lấy cảm hứng

Bạn có thể tải template và sửa đổi nó để phù hợp với nhu cầu của bạn.

Code của tôi có an toàn và riêng tư không?

Có, code của bạn hoàn toàn an toàn và riêng tư:

- Tất cả code chạy hoàn toàn trong trình duyệt của bạn
- Không có code nào được gửi đến server
- Chúng tôi không lưu trữ, log hoặc theo dõi code của bạn
- Không có cloud storage hoặc databases
- Không analytics về nội dung code
- Hoạt động offline sau khi trang load

Tính năng bảo mật:
- Preview chạy trong sandboxed iframe
- Truy cập hạn chế đến parent page
- Không truy cập vào file system của bạn
- JavaScript chạy trong context độc lập

Thực hành tốt nhất:
- Đừng include API keys hoặc passwords thật
- Test với sample data
- Cẩn thận với user input
- Validate và sanitize data

Công cụ được thiết kế cho thử nghiệm và học tập an toàn.

Phím tắt là gì?

Phím tắt hữu ích:

Chỉnh Sửa:
- Tab: Chèn thụt lề 4 khoảng trắng
- Ctrl/Cmd+A: Chọn tất cả
- Ctrl/Cmd+C: Copy
- Ctrl/Cmd+V: Paste
- Ctrl/Cmd+Z: Undo
- Ctrl/Cmd+Y: Redo

Thực Thi:
- Ctrl/Cmd+Enter: Chạy code (khi đang focus trong editor)

Lưu ý: Một số phím tắt cấp trình duyệt có thể khác nhau tùy trình duyệt và hệ điều hành.

Tính Năng Chính

• Viết HTML, CSS và JavaScript trong các tabbed editors
• Live preview với cập nhật tức thì
• Chế độ tự động chạy cho preview real-time
• Chế độ chạy thủ công cho thực thi có kiểm soát
• Bố cục chia màn hình (ngang hoặc dọc)
• Preview khung nhìn responsive (Điện Thoại 375px, Máy Tính Bảng 768px, Máy Tính, độ rộng tùy chỉnh)
• Chế độ preview toàn màn hình
• Console trực tiếp capture logs, cảnh báo và lỗi kèm số dòng
• Nhiều templates có sẵn
• Thư viện ngoài qua CDN (CSS và JavaScript)
• Download dưới dạng một file HTML hoàn chỉnh
• Tự động lưu vào localStorage trình duyệt
• Sandboxed iframe cho thực thi an toàn
• Hỗ trợ chế độ tối
• 100% client-side - không cần server
• Hoạt động offline sau khi load ban đầu
• Thiết kế responsive cho tất cả thiết bị
• Không cần đăng ký hoặc đăng nhập