# เครื่องมือดู HTML

URL: https://discuvr.org/html-viewer/?hl=th
Last updated: 2026-11-08
MCP tool: `inspect_html`

วาง HTML แล้วดูพรีวิวแบบสดใน sandbox ตามความกว้างมือถือ แท็บเล็ต หรือเดสก์ท็อป จัดรูปแบบ ย่อขนาด รันสคริปต์ด้วยคอนโซล และพบปัญหามาร์กอัปที่แท้จริง

เทมเพลตอีเมล โค้ดสั้นๆ จากทิกเก็ต รายงานที่ส่งออกมา บางครั้งคุณแค่อยากเห็นว่า HTML ชิ้นหนึ่งหน้าตาเป็นอย่างไร วางลงไปแล้วมันจะแสดงผลขณะที่คุณพิมพ์ ภายในเฟรมที่ถูกล็อกไว้ ตามความกว้างหน้าจอที่คุณเลือก ข้างพรีวิวคุณสามารถจัดให้เรียบร้อย ย่อขนาด รันสคริปต์พร้อมคอนโซล และดูรายการสิ่งที่ผิดจริงในมาร์กอัป

## การทำงาน

- แสดงตัวอย่างสดขณะพิมพ์ เมื่อเกิน 200,000 อักขระจะหยุดชั่วคราวจนกว่าคุณจะกดรีเฟรช
- ขนาดพรีวิวแบบมือถือ แท็บเล็ต เดสก์ท็อป และเต็มความกว้าง พร้อมโหมดเต็มหน้าจอ
- สคริปต์ปิดไว้เป็นค่าเริ่มต้น เปิดแล้วจะเห็นเอาต์พุตคอนโซลและข้อผิดพลาด
- จัดรูปแบบมาร์กอัปที่รกหรือย่อขนาด โดยไม่แตะเนื้อหาใน pre, script หรือ style
- รายงานการตรวจสอบ: จำนวนอิลิเมนต์ โครงร่างหัวข้อ และปัญหาที่ชัดเจน
- เปิดไฟล์ .html ในเครื่อง คัดลอกผลลัพธ์ หรือดาวน์โหลด

## วิธีใช้งาน

1. วาง HTML เปิดไฟล์ .html หรือโหลดตัวอย่าง
2. เลือกความกว้างพรีวิวและตัดสินใจว่าจะให้สคริปต์ทำงานหรือไม่
3. จัดรูปแบบ ย่อขนาด หรือตรวจสอบ แล้วคัดลอกหรือดาวน์โหลดผลลัพธ์

## ทำไมพรีวิวจึงอยู่ใน sandbox

HTML ที่วางอาจมีสคริปต์ ฟอร์ม และลิงก์ที่คุณไม่ได้เขียนเอง พรีวิวทำงานใน iframe แบบ sandbox ที่มี origin ทึบ (opaque) ของตัวเอง จึงไม่มีสิ่งใดภายในที่อ่านคุกกี้ของเว็บไซต์นี้หรือเซสชันของคุณได้ ส่งข้อมูลแทนคุณ หรือพาหน้านี้ไปที่อื่น สคริปต์จะปิดอยู่จนกว่าคุณจะเปิด

## การตรวจสอบดูอะไรบ้าง

อ่านมาร์กอัปด้วยตัวแยกวิเคราะห์ HTML มาตรฐานและรายงานเฉพาะสิ่งที่เห็นจริง ได้แก่ แท็กที่เปิดแต่ไม่เคยปิด แท็กปิดที่ไม่มีแท็กเปิด รูปภาพที่ไม่มีข้อความ alt id ซ้ำ ลิงก์ที่เปิดแท็บใหม่โดยไม่มี rel="noopener" ระดับหัวข้อที่ข้ามขั้น ทรัพยากรที่โหลดผ่าน http:// และสำหรับหน้าเต็ม การไม่มี doctype, title, lang หรือแท็ก viewport

## สิ่งที่การตรวจสอบตั้งใจไม่รายงาน

การตรวจสอบรายงานข้อผิดพลาด ไม่ใช่สไตล์ แท็กปิดที่มาตรฐาน HTML อนุญาตให้ละได้ เช่น </p>, </li>, </td>, </tr> และ </option> จะไม่ถูกระบุว่าไม่ได้ปิด และอิลิเมนต์ว่างอย่าง <br>, <img> และ <input> ไม่ต้องมีแท็กปิด alt="" ที่ว่างนับว่ามีข้อความแทนภาพ ซึ่งถูกต้องสำหรับภาพตกแต่ง ลิงก์ที่มี target="_blank" ผ่านได้เมื่อมี rel="noopener" หรือ rel="noreferrer" ลิงก์ http:// ธรรมดาใน <a href> ไม่ถูกนับว่าไม่ปลอดภัย นับเฉพาะทรัพยากรที่ถูกโหลด เช่น รูปภาพ สคริปต์ สไตล์ชีต และ iframe การย้อนกลับขึ้นไประดับหัวข้อที่สูงกว่า (h4 ไป h2) ทำได้ตามปกติ จะรายงานเฉพาะการกระโดดลงที่ข้ามระดับ (h2 ไป h4) การตรวจ doctype, title, lang และ viewport จะทำเมื่อสิ่งที่วางเป็นหน้าเต็มเท่านั้น คือมี doctype หรือแท็ก html, head หรือ body ดังนั้นบล็อกอีเมลหรือโค้ดบางส่วนจาก CMS จะไม่ถูกหักคะแนนเพราะเรื่องเหล่านี้

## ตรวจอีเมล HTML ก่อนส่ง

ดูที่ความกว้างโทรศัพท์ (375 px) ก่อน เพราะหลายคนเปิดอีเมลบนมือถือ แล้วจึงดูที่แท็บเล็ต (768 px) และเดสก์ท็อป (1280 px) ปิดสคริปต์ไว้ เพราะแอปอีเมลไม่รัน JavaScript พรีวิวแบบไม่มีสคริปต์จึงใกล้เคียงกับที่ผู้อ่านเห็นมากกว่า ใช้ URL รูปภาพแบบเต็มที่ขึ้นต้นด้วย https:// เพราะทั้งพรีวิวและแอปอีเมลของผู้รับมองไม่เห็นไฟล์ในคอมพิวเตอร์ของคุณ การย่อขนาดจะลบคอมเมนต์ทั่วไปแต่เก็บคอมเมนต์แบบมีเงื่อนไขที่ขึ้นต้นด้วย <!--[if เช่น <!--[if mso]> ... <![endif]--> แต่จะไม่เก็บตัวปิด <!--<![endif]--> ของรูปแบบ <!--[if !mso]><!--> จึงไม่ควรย่อขนาดเทมเพลตที่ใช้รูปแบบนี้ มิฉะนั้น Outlook อาจซ่อนทุกอย่างที่อยู่หลังจุดนั้น พรีวิวนี้เป็นการแสดงผลของเบราว์เซอร์ ส่วน Outlook แบบคลาสสิกบน Windows วาดอีเมลด้วยเอนจินของ Word จึงควรส่งอีเมลทดสอบไปที่นั่นก่อนส่งจำนวนมาก

## คำถาม

**HTML ของฉันถูกอัปโหลดหรือจัดเก็บหรือไม่**

พรีวิว การจัดรูปแบบ และการย่อขนาดทำในเบราว์เซอร์ของคุณ มีเพียงรายงานการตรวจสอบที่ส่งมาร์กอัปไปยังเซิร์ฟเวอร์ ซึ่งจะแยกวิเคราะห์และตอบกลับในการตอบกลับเดียวกัน ไม่มีอะไรถูกเขียนลงดิสก์หรือบันทึกลงล็อก และบันทึกการใช้งานเก็บเพียงตัวเลขจำนวน

**ทำไมสคริปต์ของฉันไม่ทำงาน**

สคริปต์ปิดไว้เป็นค่าเริ่มต้นเพราะโค้ดที่วางไม่น่าไว้วางใจ ติ๊ก "รันสคริปต์" แล้วพรีวิวจะโหลดใหม่โดยเปิด JavaScript ยังคงอยู่ใน sandbox และเอาต์พุตคอนโซลจะแสดงใต้พรีวิว

**ทำไมรูปภาพหรือสไตล์ชีตที่ใช้พาธแบบสัมพัทธ์ไม่โหลด**

พรีวิวสร้างจากข้อความที่วาง ไม่ได้มาจากคอมพิวเตอร์หรือเซิร์ฟเวอร์ของคุณ พาธสัมพัทธ์อย่าง images/logo.png จึงถูกค้นหาบนเว็บไซต์นี้และไม่พบ ให้ใช้ URL แบบเต็ม หรือเพิ่มแท็ก <base href="..."> ที่ชี้ไปยังตำแหน่งจริงของไฟล์

**การจัดรูปแบบเปลี่ยนหน้าตาของหน้าเว็บหรือไม่**

เพียงจัดย่อหน้าใหม่ระหว่างแท็ก และไม่แตะเนื้อหาใน pre, textarea, script และ style ช่องว่างระหว่างอิลิเมนต์แบบ inline อาจขยับเล็กน้อยในบางครั้ง จึงควรตรวจดูพรีวิวหลังจัดรูปแบบ

**รองรับเอกสารขนาดใหญ่แค่ไหน**

รายงานการตรวจสอบรับได้สูงสุด 1,000,000 อักขระและแสดงปัญหาได้มากที่สุด 200 รายการ การแสดงตัวอย่างสดจะหยุดชั่วคราวเมื่อเกิน 200,000 อักขระเพื่อให้พิมพ์ได้ลื่นไหล กดรีเฟรชหรือ Ctrl+Enter เพื่ออัปเดต

**ดูตัวอย่างเทมเพลตอีเมล HTML ได้ไหม**

ได้ วาง HTML ของอีเมลหรือเปิดไฟล์ .html สลับความกว้างเป็นโทรศัพท์ (375 px) และเดสก์ท็อป (1280 px) เพื่อดูทั้งสองเลย์เอาต์ แล้วกดตรวจสอบเพื่อหารูปที่ไม่มีข้อความ alt และทรัพยากรที่โหลดผ่าน http:// แบบไม่เข้ารหัส ตัวอย่างใช้เอนจินของเบราว์เซอร์ของคุณ ขณะที่โปรแกรมอีเมลแต่ละตัวใช้เอนจินของตัวเองและหลายตัวตัด CSS บางส่วนทิ้ง จึงแสดงได้ใกล้เคียงกับเว็บเมลในเบราว์เซอร์ ไม่ใช่ตรงกับทุกกล่องจดหมาย โปรแกรมอีเมลไม่รัน JavaScript จึงควรปิดรันสคริปต์ไว้ ก่อนส่งจริง ให้ส่งอีเมลทดสอบไปยังโปรแกรมที่ผู้อ่านของคุณใช้

**เปิดไฟล์ HTML ที่มีคนส่งมาให้ปลอดภัยไหม**

ปลอดภัยกว่าการเปิดไฟล์โดยตรง ปุ่มเปิดไฟล์จะโหลดไฟล์เข้าเครื่องมือแก้ไขในเบราว์เซอร์ของคุณ และจะไม่มีอะไรส่งไปยังเซิร์ฟเวอร์จนกว่าคุณจะกดตรวจสอบ ตัวอย่างแสดงในเฟรมแซนด์บ็อกซ์ที่ปิดสคริปต์และการส่งฟอร์ม หน้าเว็บจึงรันโค้ด ส่งฟอร์ม หรือเข้าถึงคุกกี้ของเว็บไซต์นี้ไม่ได้ แต่รูปภาพและสไตล์ชีตที่มีที่อยู่ http(s) เต็มยังคงโหลด ผู้ส่งจึงอาจรู้ว่ามีการเปิดไฟล์ อ่านซอร์สโค้ดก่อน ปิดรันสคริปต์ไว้ และอย่าพิมพ์รหัสผ่านลงในหน้าที่มีคนส่งมาให้

**ทำไมตัวอักษรบางตัวกลายเป็น � หลังจากเปิดไฟล์?**

เปิดไฟล์จะอ่านไฟล์เป็น UTF-8 เสมอ และไม่สนใจแท็ก <meta charset> ที่อยู่ข้างใน หน้าที่บันทึกเป็น TIS-620 หรือ Windows-874 ซึ่งพบบ่อยในโปรแกรมแก้ไขและไฟล์ส่งออกรุ่นเก่าบน Windows จะเก็บอักษรไทยเป็นไบต์ที่ไม่ใช่ UTF-8 ที่ถูกต้อง แต่ละตัวจึงแสดงเป็นอักขระแทนที่ � ให้เปิดไฟล์ในโปรแกรมแก้ไข บันทึกใหม่เป็น UTF-8 (Notepad: Save as, Encoding UTF-8; VS Code: คลิกการเข้ารหัสในแถบสถานะ แล้วเลือก Save with Encoding) แล้วเปิดที่นี่อีกครั้ง หรือเปิดไฟล์ในเบราว์เซอร์ ดูซอร์ส แล้ววางที่นี่ เพราะเบราว์เซอร์ถอดรหัสด้วย charset ของหน้านั้นไว้แล้ว

**ทำไมฟอร์มหรือลิงก์ที่เปิดแท็บใหม่ไม่ทำงานในพรีวิว?**

แซนด์บ็อกซ์ไม่อนุญาตให้ส่งฟอร์มหรือเปิดป๊อปอัปเลย แม้จะเปิดรันสคริปต์ไว้ก็ตาม การกดส่งจึงไม่ส่งอะไรออกไป และลิงก์ target="_blank" กับการเรียก window.open() จะถูกบล็อก วิธีนี้ป้องกันไม่ให้หน้าที่วางส่งข้อมูลหรือเปิดเว็บไซต์อื่น ลิงก์ทั่วไปจะเปิดภายในกรอบพรีวิว และเว็บไซต์ที่ไม่ยอมให้แสดงในกรอบจะว่างเปล่าหรือถูกปฏิเสธ หากต้องการตรวจฟอร์ม ให้อ่าน action, method และช่องข้อมูลในซอร์ส ปุ่มตรวจสอบยังแสดงทุกลิงก์ target="_blank" ที่ไม่มี rel="noopener" ด้วย ส่วนการส่งจริงให้ทดสอบบนเซิร์ฟเวอร์สำหรับพัฒนาของคุณเอง

## เพิ่มเติมใน เครื่องมือนักพัฒนา

- [เครื่องคำนวณซับเน็ต IP](https://discuvr.org/ip-subnet-calculator/?hl=th)
- [เข้ารหัส / ถอดรหัส](https://discuvr.org/encode-decode/?hl=th)
- [ตัวแปลงไทม์สแตมป์ Unix](https://discuvr.org/timestamp-converter/?hl=th)
- [เครื่องมือสร้างไดอะแกรมระบบ](https://discuvr.org/system-diagram/?hl=th)

## มักใช้ร่วมกับ

- [เปรียบเทียบข้อความ](https://discuvr.org/text-diff/?hl=th)
- [การสแกนความปลอดภัยเว็บไซต์](https://discuvr.org/security-scan/?hl=th)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.