VSCode có nhiều extension tuyệt vời, và Live Server là một trong những extension tốt nhất.
Chỉ với vài click, Live Server cho bạn xem trang trực tiếp trên trình duyệt thực. Tốt hơn, nó có live reloading, nên nếu cập nhật code, thay đổi cũng phản ánh trên trình duyệt.
Chỉ cần chuột phải vào file HTML muốn xem, chuột phải, chọn "Open with Live Server":
Live Server hoạt động
Nhưng nếu Live Server không mở trình duyệt và hiển thị trang như mong đợi? Nếu xảy ra với bạn, đây là vài điều thử.
Khởi Động Lại VSCode
Đôi khi tốt nhất là khởi động VSCode từ đầu.
Đầu tiên, lưu toàn bộ công việc. Sau đó đóng VSCode, cũng dừng tất cả extension đã cài.
Rồi, mở lại VSCode và thử lại — vào file HTML muốn xem, chuột phải, chọn "Open with Live Server".
Đặt Trình Duyệt Cho Live Server
Có thể extension hoạt động, nhưng hệ thống không có trình duyệt mặc định.
Dù đã đặt default browser cho hệ thống, không sao thiết lập rõ ràng cho Live Server biết bạn muốn dùng trình duyệt nào.
Đầu tiên, mở Command Palette với F1, gõ Preferences: Open Settings (JSON) và chọn option đó.
Sẽ mở file settings.json của VSCode.
Cuộn xuống cuối file, thêm dấu phẩy sau setting cuối, sau đó dán "liveServer.settings.CustomBrowser": "chrome":
Lưu ý: cũng dùng được "firefox", "safari", hoặc trình duyệt khác làm giá trị cho setting "liveServer.settings.CustomBrowser".
Cuối cùng, lưu file settings.json và thử chạy Live Server lại.
Đặt Trình Duyệt Mặc Định Cho Hệ Điều Hành
Dù đã bảo Live Server dùng trình duyệt nào, vẫn có thể nó không mở trang đúng trình duyệt đó.
Điều tiếp theo thử là đặt default browser cho chính hệ điều hành.
Cách chính xác có thể khác tùy OS, nên tốt nhất search cách làm nếu không chắc.
Đây là trang settings trên Windows:
Credit: Advitya-sharma
Truy Cập Trang Live Thủ Công
Nếu vì lý do nào Live Server vẫn không tự mở trang trên trình duyệt, không sao. Bạn luôn có thể mở trình duyệt ưa thích và xem trang trực tiếp.
Chỉ cần mở trình duyệt và truy cập https://127.0.0.1:5500/<your_file_name>.
Ví dụ, file tên index.html, truy cập https://127.0.0.1:5500/index.html.
Miễn là Live Server đang chạy, bạn sẽ thấy trang.
Kết Luận
Đó là vài fix thường gặp nếu Live Server không hoạt động như mong đợi.
An toàn, và happy (live) coding.
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm lập trình viên. Bắt đầu ngay