แก้ปัญหา VSCode Live Server ไม่เปิด Browser: สาเหตุและวิธีแก้

VSCode มี Extension ดีๆ มาก Live Server เป็นหนึ่งในนั้น

คลิกขวาที่ไฟล์ HTML -> Open with Live Server -> เปิด Browser แสดงหน้าเว็บ พร้อม Live Reload (แก้โค้ด -> Browser รีเฟรชอัตโนมัติ)

แต่ถ้า Live Server ไม่เปิด Browser ให้ลองดูข้อเหล่านี้

1. Restart VSCode

บางครั้ง Restart แล้วหาย: Save All -> Close VSCode (Extension หยุดทำงาน) -> เปิดใหม่ -> ลอง Open with Live Server อีกครั้ง

2. ตั้งค่า Browser ให้ Live Server โดยตรง

อาจเป็นที่ System ไม่มี Default Browser หรือ Live Server ไม่รู้จัก Browser ที่จะเปิด

1. เปิด Command Palette (F1) -> พิมพ์ Preferences: Open Settings (JSON) -> Enter
2. เลื่อนลงล่างสุด เพิ่ม Comma หลัง Setting ตัวสุดท้าย แล้ววาง:

   "liveServer.settings.CustomBrowser": "chrome"

3. Save แล้วลองรัน Live Server ใหม่

ค่าอื่นที่ใช้ได้: "firefox", "safari", หรือ Browser อื่นๆ

3. ตั้ง Default Browser ของ OS

แม้ตั้งใน Live Server แล้ว ก็ควรตั้ง Default Browser ของ OS ให้ตรงกัน (วิธีแตกต่างตาม OS — Windows: Settings -> Default Apps -> Web Browser)

4. เข้า URL เองด้วยมือ

ถ้ายังไม่ได้ ให้เปิด Browser เอง แล้วเข้า:

https://127.0.0.1:5500/<your_file_name>

เช่น index.html -> https://127.0.0.1:5500/index.html

ตราบใดที่ Live Server ทำงานอยู่ (ดูจาก Status Bar) ก็จะเห็นหน้าเว็บ

สรุป

ลองตามลำดับ: Restart VSCode -> ตั้ง Browser ใน Settings.json -> ตั้ง Default Browser OS -> เข้า URL เอง

Stay safe, and happy (live) coding!