HTML Live Preview là gì?
HTML Live Preview là một sân chơi mã tương tác cho phép bạn viết HTML, CSS và JavaScript và xem kết quả ngay lập tức. Hãy coi nó như một CodePen nhẹ ngay trong trình duyệt của bạn — không cần đăng ký.
Cho dù bạn là người mới bắt đầu học phát triển web hay một nhà phát triển có kinh nghiệm tạo mẫu một ý tưởng nhanh chóng, công cụ này cung cấp cho bạn một vòng phản hồi nhanh mà không cần thiết lập môi trường cục bộ.
Những điểm nổi bật chính
Trình soạn thảo ba tab
Các tab riêng biệt cho HTML, CSS và JavaScript với tô sáng cú pháp đầy đủ được cung cấp bởi CodeMirror để có trải nghiệm mã hóa chuyên nghiệp.
Xem trước tức thì
Mã của bạn được hiển thị trong iframe được bảo vệ khi bạn gõ, với debouncing thông minh để giữ hiệu suất mượt mà.
Console tích hợp sẵn
Xem console.log, warn, error và info output mà không cần mở DevTools của trình duyệt — gỡ lỗi ngay trong giao diện.
Tải xuống công việc của bạn
Xuất một tệp HTML hoàn chỉnh, độc lập với CSS và JS được nhúng nội tuyến — sẵn sàng sử dụng ở bất kỳ đâu.
- 1. HTML Live Preview là gì?
- 2. Cách sử dụng
- 3. Tính năng
- 4. Các câu hỏi thường gặp
- 4.1. Mã của tôi có được gửi đến máy chủ không?
- 4.2. Tôi có thể sử dụng các thư viện bên ngoài như Bootstrap hoặc jQuery không?
- 4.3. Tại sao JavaScript của tôi không hoạt động?
- 4.4. Tôi có thể lưu công việc của mình không?
- 4.5. Trình soạn thảo có hỗ trợ thiết bị di động không?
- 4.6. Bảng điều khiển console dùng để làm gì?
Cách sử dụng
Viết mã
Chọn một tab
Chọn giữa các tab HTML, CSS hoặc JS ở đầu bảng điều khiển trình soạn thảo để bắt đầu mã hóa bằng ngôn ngữ ưa thích của bạn.
Gõ mã của bạn
Viết mã của bạn trong trình soạn thảo. Bảng điều khiển xem trước ở bên phải cập nhật tự động sau một khoảng thời gian ngắn, cung cấp cho bạn phản hồi trực quan ngay lập tức.
Chuyển đổi và xây dựng
Di chuyển giữa các tab để xây dựng cấu trúc HTML của bạn, tạo kiểu với CSS và thêm tính tương tác với JavaScript — tất cả trong một quy trình làm việc liền mạch.
Sử dụng mẫu
Nhấp nút Templates trong thanh công cụ để chọn một mẫu khởi động và khởi động dự án của bạn. Chọn từ:
Trống
Hello World
Bố cục Flexbox
CSS Animation
Điều chỉnh bố cục
- Thay đổi kích thước — Kéo tay cầm giữa trình soạn thảo và xem trước để làm cho bảng điều khiển nào lớn hơn hoặc nhỏ hơn dựa trên nhu cầu của bạn
- Chuyển đổi bố cục — Nhấp nút bố cục để chuyển đổi giữa chế độ xem cạnh nhau (ngang) và xếp chồng (dọc)
- Xem trước toàn màn hình — Nhấp nút mở rộng để xem xem trước ở chế độ toàn màn hình. Nhấn Escape hoặc nhấp nút đóng để quay lại
Sử dụng Console
Nhấp nút Console (biểu tượng terminal) để mở bảng điều khiển console. Bất kỳ console.log(), console.warn(), console.error() hoặc console.info() gọi trong JavaScript của bạn sẽ xuất hiện ở đây với các biểu tượng và kiểu dáng thích hợp.
Gỡ lỗi truyền thống
- Mở DevTools của trình duyệt
- Điều hướng đến tab Console
- Chuyển đổi giữa các cửa sổ
- Mất tập trung vào mã
Quy trình làm việc được hợp lý hóa
- Truy cập console chỉ bằng một cú nhấp chuột
- Xem đầu ra nội tuyến
- Ở lại trong trình soạn thảo
- Xóa bằng biểu tượng thùng rác
Tải xuống mã của bạn
Nhấp nút Download để lưu công việc của bạn dưới dạng một tệp preview.html duy nhất. Tệp được xuất bao gồm HTML của bạn trong phần thân, CSS trong thẻ <style> và JavaScript trong thẻ <script> — sẵn sàng mở trong bất kỳ trình duyệt nào.
Tính năng
Trình soạn thảo mã với tô sáng cú pháp
Trình soạn thảo được cung cấp bởi CodeMirror và cung cấp tô sáng cú pháp cho HTML, CSS và JavaScript. Nó cũng bao gồm tự động đóng dấu ngoặc và thẻ, khớp dấu ngoặc và thụt lề thích hợp với các tab mềm.
Tô sáng cú pháp
Tự động đóng
Thụt lề thông minh
Xem trước trực tiếp
Mã của bạn chạy bên trong iframe được bảo vệ cập nhật tự động khi bạn gõ. Xem trước hỗ trợ các tài liệu HTML đầy đủ với CSS và JavaScript được nhúng, cung cấp cho bạn một biểu diễn chính xác về cách mã của bạn sẽ trông như thế nào trong một trình duyệt thực.
- Iframe được bảo vệ để bảo mật
- Cập nhật tự động khi bạn gõ
- Hỗ trợ tài liệu HTML đầy đủ
- CSS và JavaScript được nhúng
- Hiển thị trình duyệt thực
Console tích hợp sẵn
Không cần mở DevTools của trình duyệt. Bảng điều khiển tích hợp sẵn ghi lại tất cả đầu ra console từ JavaScript của bạn — bao gồm các tin nhắn log, warn, error và info. Một badge trên nút console cho bạn biết có bao nhiêu tin nhắn đã được ghi lại.
| Phương thức Console | Biểu tượng | Trường hợp sử dụng |
|---|---|---|
console.log() |
Thông tin | Đầu ra gỡ lỗi chung |
console.warn() |
Cảnh báo | Các vấn đề tiềm ẩn hoặc không dùng nữa |
console.error() |
Lỗi | Lỗi thời gian chạy và ngoại lệ |
console.info() |
Thông tin | Tin nhắn thông tin |
Bảng điều khiển có thể thay đổi kích thước
Kéo dấu phân cách giữa trình soạn thảo và xem trước để phân bổ thêm không gian cho bảng điều khiển nào bạn cần. Bộ thay đổi kích thước hỗ trợ cả bố cục ngang và dọc và kẹp giữa 20% và 80% để giữ cả hai bảng điều khiển có thể sử dụng được.
Chuyển đổi bố cục
Chuyển đổi giữa bố cục ngang (trình soạn thảo bên trái, xem trước bên phải) và bố cục dọc (trình soạn thảo ở trên, xem trước ở dưới) chỉ bằng một cú nhấp chuột. Bố cục dọc hoạt động tốt trên các màn hình hẹp hơn hoặc khi bạn muốn xem trước rộng hơn.
Ngang
Bố cục cạnh nhau cho màn hình rộng
Dọc
Bố cục xếp chồng cho màn hình hẹp
Xem trước toàn màn hình
Mở rộng xem trước để lấp đầy toàn bộ màn hình của bạn để có chế độ xem không bị phân tâm của công việc của bạn. Thoát bằng cách nhấn Escape hoặc nhấp nút đóng ở góc trên cùng bên phải.
Xuất HTML
Tải xuống sáng tạo của bạn dưới dạng một tệp HTML độc lập. Tài liệu được xuất bao gồm doctype thích hợp, thẻ meta và CSS và JavaScript được nhúng nội tuyến — không cần phụ thuộc bên ngoài.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" c>
<title>HTML Live Preview</title>
<style>
/* Your CSS here */
</style>
</head>
<body>
<!-- Your HTML here -->
<script>
// Your JavaScript here
</script>
</body>
</html>Mẫu khởi động
Bắt đầu nhanh chóng với các mẫu tích hợp sẵn minh họa các mẫu phổ biến: một trang Hello World, bố cục thẻ Flexbox và hoạt ảnh keyframe CSS. Mỗi mẫu điền tất cả ba tab trình soạn thảo với mã ví dụ hoạt động.
- Các ví dụ mã được viết sẵn, hoạt động
- Tìm hiểu bằng cách kiểm tra các triển khai thực
- Sửa đổi mẫu để phù hợp với nhu cầu của bạn
- Hiểu các thực tiễn tốt nhất thông qua các ví dụ
Các câu hỏi thường gặp
Mã của tôi có được gửi đến máy chủ không?
Không. Tất cả chỉnh sửa mã, hiển thị xem trước và đầu ra console xảy ra hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên hoặc lưu trữ trên bất kỳ máy chủ nào.
Tôi có thể sử dụng các thư viện bên ngoài như Bootstrap hoặc jQuery không?
Có. Thêm thẻ <link> hoặc <script> trong tab HTML trỏ đến URL CDN và thư viện sẽ tải bên trong iframe xem trước.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Tại sao JavaScript của tôi không hoạt động?
Xem trước chạy trong iframe được bảo vệ với quyền allow-scripts và allow-modals. Hầu hết JavaScript hoạt động bình thường, nhưng một số API trình duyệt yêu cầu quyền bổ sung có thể bị hạn chế.
- Kiểm tra console tích hợp sẵn để tìm thông báo lỗi
- Xác minh cú pháp của bạn là chính xác
- Đảm bảo các thư viện bên ngoài được tải đúng cách
- Một số API (clipboard, geolocation) có thể bị hạn chế trong iframe được bảo vệ
Tôi có thể lưu công việc của mình không?
Sử dụng nút Download để xuất mã của bạn dưới dạng một tệp HTML độc lập. Bạn có thể mở lại tệp này trong bất kỳ trình duyệt nào hoặc dán mã trở lại trình soạn thảo sau này.
- Nhấp Download để lưu dưới dạng
preview.html - Tệp bao gồm tất cả HTML, CSS và JavaScript
- Không cần phụ thuộc bên ngoài
- Mở trong bất kỳ trình duyệt hoặc trình soạn thảo văn bản nào
- Sao chép mã trở lại trình soạn thảo bất kỳ lúc nào
Trình soạn thảo có hỗ trợ thiết bị di động không?
Có. Trên các màn hình nhỏ hơn, bố cục tự động chuyển sang chế độ xếp chồng dọc. Bộ thay đổi kích thước hỗ trợ các sự kiện cảm ứng để kéo để thay đổi kích thước trên các thiết bị di động và máy tính bảng.
| Loại thiết bị | Bố cục | Tính năng |
|---|---|---|
| Máy tính để bàn | Ngang (mặc định) | Tính năng đầy đủ, kéo để thay đổi kích thước |
| Máy tính bảng | Ngang hoặc Dọc | Thay đổi kích thước được kích hoạt bằng cảm ứng |
| Di động | Dọc (tự động) | Giao diện được tối ưu hóa cho cảm ứng |
Bảng điều khiển console dùng để làm gì?
Bảng điều khiển console ghi lại đầu ra từ console.log(), console.warn(), console.error() và console.info() trong mã JavaScript của bạn. Nó cũng bắt các lỗi thời gian chạy và các lỗi promise không được xử lý.
Điều này cho phép bạn gỡ lỗi mà không cần mở các công cụ dành cho nhà phát triển của trình duyệt, giữ cho quy trình làm việc của bạn được hợp lý hóa và tập trung vào mã.
- Xem tất cả đầu ra console ở một nơi
- Các loại tin nhắn được mã hóa màu (log, warn, error, info)
- Badge counter hiển thị tổng số tin nhắn
- Xóa tất cả tin nhắn bằng biểu tượng thùng rác
- Tự động bắt các lỗi thời gian chạy
Chưa có bình luận nào. Hãy là người đầu tiên!