คลายโค้ด HTML ที่ย่อออนไลน์
เปลี่ยนซอร์สหน้าเว็บที่ย่อแล้วเป็นมาร์กอัปที่อ่านง่าย แท็กถูกเยื้องตามระดับการซ้อน แอตทริบิวต์ถูกจัดวางอย่างเหมาะสม และสคริปต์กับสไตล์ที่ฝังอยู่จะถูกจัดรูปแบบไปพร้อมเอกสาร
ทำไมซอร์สหน้าเว็บจึงอ่านยาก
ตัว minifier ของ HTML ยุบช่องว่างระหว่างแท็ก ลบคอมเมนต์ ตัดแท็กปิดที่ละได้ และลบเครื่องหมายคำพูดรอบค่าแอตทริบิวต์ที่ไม่จำเป็นต้องมี ระบบเทมเพลตฝั่งเซิร์ฟเวอร์เพิ่มความซับซ้อนอีก เพราะหน้าที่ประกอบจากส่วนย่อยหลายสิบไฟล์จะถูกส่งมาเป็นข้อมูลต่อเนื่องที่ไม่สะท้อนการแบ่งไฟล์ต้นทาง เมื่อเปิดซอร์สเว็บไซต์ที่ใช้งานจริง คุณจึงมักพบเอกสารที่มีเพียงไม่กี่บรรทัดยาวมาก และต้องนับวงเล็บมุมด้วยสายตาเพื่อหาแท็กปิดของส่วนใดส่วนหนึ่ง
โครงสร้างคือสิ่งสำคัญ
HTML มีโครงสร้างแบบต้นไม้ซึ่งอ่านได้ยากเมื่อแสดงทุกอย่างเป็นแนวราบ การเยื้องตามระดับการซ้อนทำให้เห็นรูปทรงของเอกสารทันที ทั้งจุดที่ส่วนหัวจบลง container ที่ครอบเนื้อหาหลัก ความลึกของคอมโพเนนต์ และองค์ประกอบที่ขาดแท็กปิด ซอร์สที่จัดรูปแบบแล้วจึงมีประโยชน์ต่อการตรวจลำดับหัวเรื่อง ตรวจมาร์กอัปที่เฟรมเวิร์กสร้าง หรือศึกษาว่าเว็บไซต์อื่นจัดโครงสร้างส่วนที่คุณสนใจอย่างไร
จัดรูปแบบสคริปต์และสไตล์ที่ฝังอยู่ได้ด้วย
หน้าเว็บจริงมักมีมากกว่ามาร์กอัป ทั้งโค้ดวิเคราะห์ข้อมูล ข้อมูลมีโครงสร้าง JSON-LD ออบเจ็กต์กำหนดค่า และ critical CSS ซึ่งฝังอยู่ในเอกสารและถูกย่อไปด้วย ตัวจัดรูปแบบใช้ตัวแยกวิเคราะห์ที่เหมาะสมกับแต่ละบล็อก ทำให้ JavaScript ที่ย่อในแท็ก script กลับมาอ่านง่าย และ CSS ในแท็ก style ก็ถูกจัดรูปแบบด้วย โดยยังอยู่ภายในเอกสารที่เยื้องอย่างเป็นระเบียบ
คำนึงถึงแท็กที่ไวต่อช่องว่าง
การเยื้อง HTML เปลี่ยนช่องว่างระหว่างแท็ก และบางตำแหน่งช่องว่างมีความหมาย ตัวจัดรูปแบบคำนึงถึงเรื่องนี้ โดยรักษาเนื้อหาของ pre และ textarea และจัดองค์ประกอบแบบ inline อย่างระมัดระวัง เพื่อไม่ให้เพิ่มหรือลบช่องว่างที่ปรากฏรอบข้อความ คุณจึงอ่านเอกสารได้ง่ายขึ้นพร้อมรักษาลักษณะการแสดงผลของหน้าเว็บ
คำถามที่พบบ่อย
วางซอร์สของทั้งหน้าเว็บได้หรือไม่?
ได้ คัดลอกซอร์สจาก view-source ในเบราว์เซอร์ หรือบันทึกหน้าเว็บแล้วเปิดไฟล์ เครื่องมือจะจัดรูปแบบเอกสารทั้งหมด รวมทั้ง head, body, สคริปต์ที่ฝังอยู่ และข้อมูลมีโครงสร้าง
การจัดรูปแบบจะเปลี่ยนการแสดงผลของหน้าเว็บหรือไม่?
โดยปกติไม่ควรเปลี่ยน องค์ประกอบที่ไวต่อช่องว่างอย่าง pre และ textarea จะถูกเก็บรักษา และเนื้อหาแบบ inline จะถูกจัดการอย่างระมัดระวัง อย่างไรก็ตาม ควรจัดรูปแบบสำเนาเพื่ออ่านและตรวจสอบ และทดสอบผลลัพธ์ก่อนนำกลับไปใช้บนระบบจริงเสมอ
ใช้กับเทมเพลตอย่าง Twig หรือ Blade ได้หรือไม่?
ได้บางส่วน มาร์กอัปปกติจัดรูปแบบได้ แต่แท็กเทมเพลตที่มีไวยากรณ์เฉพาะอาจทำให้ตัวแยกวิเคราะห์ HTML สับสน เครื่องมือนี้ออกแบบมาสำหรับ HTML ที่เบราว์เซอร์ได้รับจริง มากกว่าซอร์สเทมเพลตที่ใช้สร้าง HTML นั้น