Softonic

ตัวดูผลเรนเดอร์ HTML

ขั้นตอน 1 / 2
ถัดไป

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

วิธีพรีวิว HTML

  1. 1

    วาง HTML ของคุณ

    ใส่เอกสารทั้งฉบับหรือชิ้นส่วนหลวม ๆ ลงในช่องต้นฉบับ สิ่งที่คุณวางคือสิ่งที่ถูกเรนเดอร์เป๊ะ ๆ ตามที่เขียนไว้

  2. 2

    คลิกเรนเดอร์

    ตัวดูจะเขียน HTML ของคุณลงในไอเฟรมที่แยกส่วนและแสดงผลลัพธ์บนหน้าเว็บทันที

  3. 3

    อ่านพรีวิว

    เฟรมวาดมาร์กอัปของคุณอย่างที่เบราว์เซอร์ทำ ทั้งหัวเรื่อง ตาราง รายการ สไตล์อินไลน์ และ SVG ปรากฏครบ

  4. 4

    ปรับแล้วเรนเดอร์อีกครั้ง

    แก้ต้นฉบับแล้วเรนเดอร์ซ้ำได้เท่าที่ต้องการ เพื่อเทียบว่าแต่ละเวอร์ชันหน้าตาเป็นอย่างไร

ทำไมเฟรมจึงถูกแยกส่วน

HTML ที่วางเข้ามาอาจมีอะไรก็ได้ ทั้งแท็ก <script> เล่ห์แบบ <img onerror="..."> ฟอร์มที่ส่งข้อมูลไปที่ไหนสักแห่ง หรือ <iframe> ที่โหลดเว็บอื่น เพื่อไม่ให้สิ่งเหล่านั้นแตะต้องหน้าเว็บ พรีวิวจะถูกเขียนลงใน <iframe sandbox> ที่มีแอตทริบิวต์ sandbox ว่างเปล่า ซึ่งเป็นการตั้งค่าที่เข้มงวดที่สุดเท่าที่มี ในโหมดนี้เบราว์เซอร์จะปิดกั้นทั้งการรันสคริปต์ การส่งฟอร์ม ป็อปอัป การนำทางระดับบนสุด และการเข้าถึงต้นทางเดียวกันพร้อมกัน คุณจึงเห็นผลลัพธ์เชิงภาพโดยไม่ให้อำนาจใด ๆ แก่มาร์กอัป

เพราะสคริปต์ไม่เคยทำงาน ทุกอย่างที่พึ่งพา JavaScript (เว็บคอมโพเนนต์ที่ไฮเดรตตอนโหลด กราฟที่วาดตัวเอง เฟรมเวิร์กที่ mount ลงใน <div> เปล่า) จะแสดงเพียงมาร์กอัปแบบสถิตเท่านั้น ไม่ใช่ผลลัพธ์ที่มาจากสคริปต์ นี่คือการแลกเปลี่ยนโดยตั้งใจ เลือกพรีวิวที่ปลอดภัยและคาดเดาได้แทนที่จะเป็นแบบโต้ตอบ

สิ่งที่ตัวดูเรนเดอร์ได้ดี

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

การใช้งานที่ดีสำหรับเครื่องมือนี้

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

สิ่งที่ต้องระวัง

  • URL แบบสัมพัทธ์ รูปภาพและสไตล์ชีตที่อ้างอิงด้วยพาธสัมพัทธ์อย่าง /assets/logo.png ไม่มีเซิร์ฟเวอร์ให้แก้ค่าอ้างอิง จึงจะไม่โหลด ใช้ URL แบบสัมบูรณ์ https:// หรือ URI data: หากต้องการให้รูปปรากฏ
  • ทรัพยากรภายนอก ฟอนต์ สไตล์ชีต และรูปภาพที่โหลดจากเว็บอื่นขึ้นอยู่กับว่าเว็บเหล่านั้นอนุญาตหรือไม่ บางแห่งส่งเฮดเดอร์ที่ปิดกั้นการโหลดภายในเฟรม
  • ไม่มีสคริปต์ หากมาร์กอัปของคุณมีชีวิตได้ด้วย JavaScript เท่านั้น พรีวิวจะแสดงสถานะก่อนสคริปต์ทำงาน นั่นเป็นเรื่องที่คาดไว้ ไม่ใช่ข้อบกพร่อง

คำถามที่พบบ่อย

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

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

พาธสัมพัทธ์ไม่มีสิ่งที่ให้แก้ค่าอ้างอิง และบางโฮสต์ส่งเฮดเดอร์ที่ห้ามรูปของตนโหลดภายในเฟรม ใช้ URL แบบสัมบูรณ์ https:// หรือฝังรูปเป็น URI data:

ได้ วางเอกสารทั้งฉบับ (doctype, <head>, <body> และทุกอย่าง) แล้วมันจะเรนเดอร์ตามที่เขียนไว้ ชิ้นส่วนหลวม ๆ ก็ใช้ได้เช่นกัน ส่วนที่เหลือเบราว์เซอร์เติมให้

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

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig จากกฎการเยื้อง การจบบรรทัด และชุดอักขระของคุณ แล้วเพิ่มเซกชันที่ถูกต้องให้ทุกภาษาในรีโพซิทอรี ทั้ง Python, Go, YAML, Makefile และอื่น ๆ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือนี้มีให้บริการในภาษาอื่น