คลายโค้ดที่ย่อและจัดรูปแบบให้อ่านง่ายออนไลน์

คลายโค้ดที่ย่อตามรูปแบบที่ต้องการ

แต่ละรูปแบบมีหน้าเฉพาะ พร้อมรายละเอียดที่สำคัญสำหรับภาษานั้น:

• คลายโค้ด JavaScript ที่ย่อJavaScript
• คลายโค้ด CSS ที่ย่อCSS
• คลายโค้ด HTML ที่ย่อHTML
• คลายโค้ด XML ที่ย่อXML
• คลายโค้ด JSON ที่ย่อJSON

การย่อโค้ดคืออะไร?

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

ผลลัพธ์ด้านขนาดไฟล์เห็นได้ชัด ไฟล์บันเดิล JavaScript ที่ย่อแล้วมักเล็กกว่าซอร์สต้นฉบับ 30 ถึง 70 เปอร์เซ็นต์ จึงส่งข้อมูลผ่านเครือข่ายน้อยลง แสดงผลครั้งแรกเร็วขึ้น และช่วยให้ค่า Core Web Vitals ดีขึ้น เว็บไซต์ที่ใช้งานจริงส่วนใหญ่จึงส่ง JS, CSS และ HTML ที่ย่อแล้วให้เบราว์เซอร์ ข้อแลกเปลี่ยนคือไฟล์ที่ดาวน์โหลดมาอาจกลายเป็นข้อความแน่น ๆ บรรทัดเดียวที่อ่านแทบไม่ได้ เมื่อต้องทำความเข้าใจ ดีบัก หรือตรวจสอบว่าไฟล์นั้นทำอะไร คุณจึงต้องคลายโค้ดที่ย่อให้มีรูปแบบอ่านง่ายก่อน

เครื่องมือคลายโค้ดที่ย่อนี้ทำอะไรได้บ้าง?

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

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

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

รูปแบบโค้ดที่รองรับ

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

• JavaScript รองรับ ES6 และไวยากรณ์ใหม่กว่า โมดูล โค้ดแบบ async และ JSX เหมาะกับบันเดิลที่สร้างด้วย webpack, Vite, esbuild หรือ Terser
• CSS รองรับไวยากรณ์สมัยใหม่ custom properties, media queries และกฎแบบซ้อน เหมาะกับสไตล์ชีตที่คอมไพล์จาก Tailwind, Sass หรือ PostCSS
• HTML รวมถึงบล็อก script และ style ภายในเอกสาร ซึ่งจะถูกจัดรูปแบบไปพร้อมกับมาร์กอัป แทนที่จะปล่อยให้เป็นบรรทัดยาว
• XML รวมถึง sitemap, ฟีด RSS, ไฟล์ SVG, SOAP envelope และไฟล์กำหนดค่าที่ไม่มีการขึ้นบรรทัดใหม่เลย
• JSON รวมถึงข้อมูลตอบกลับจาก API ที่ซ้อนหลายระดับ ไฟล์ manifest ของแพ็กเกจ ไฟล์กำหนดค่า และข้อมูลในบันทึก log

เมื่อใดที่ควรใช้เครื่องมือคลายโค้ดที่ย่อ

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

• ดีบักข้อผิดพลาดบนระบบจริง เมื่อ stack trace ชี้ไปที่บรรทัด 1 คอลัมน์ 24815 ของบันเดิล การจัดรูปแบบไฟล์ช่วยให้เห็นเลขบรรทัดที่ใช้อ้างอิงและค้นหาฟังก์ชันที่เกิดข้อผิดพลาดได้ง่ายขึ้น
• ตรวจสอบสคริปต์จากผู้ให้บริการภายนอก ก่อนเพิ่มแท็กวิเคราะห์ข้อมูล วิดเจ็ตแชต หรือสคริปต์พันธมิตรลงในเว็บไซต์ ลองคลายโค้ดแล้วอ่านว่าสคริปต์เก็บข้อมูลอะไร ติดต่อโดเมนใด และเขียนอะไรลงพื้นที่จัดเก็บ
• อ่านสไตล์ชีตที่คอมไพล์แล้ว เฟรมเวิร์กแบบ utility สร้าง CSS ขนาดใหญ่ในบรรทัดเดียว การจัดรูปแบบช่วยให้ไล่ลำดับ cascade ค้นหากฎที่มีผลจริง และเข้าใจว่าทำไมกฎที่คุณเขียนทับจึงไม่ทำงาน
• ตรวจสอบข้อมูลตอบกลับจาก API ข้อมูล JSON ที่คัดลอกจากแท็บ Network อาจอ่านได้ยากจนกว่าจะจัดรูปแบบ เมื่อจัดแล้ว โครงสร้าง ระดับการซ้อน และฟิลด์ที่หายไปจะเห็นได้ชัดภายในไม่กี่วินาที
• เรียนรู้จากโค้ดที่ใช้งานจริง การอ่านว่าไลบรารีที่ออกแบบมาดีแก้ปัญหาอย่างไรช่วยพัฒนาทักษะได้รวดเร็ว และการจัดรูปแบบไฟล์ช่วยให้คุณอ่านและติดตามแนวคิดเหล่านั้นได้อย่างสะดวก

วิธีใช้ LFUnminify

นำโค้ดเข้าเครื่องมือได้สามวิธี คือวางลงในช่องด้านซ้ายโดยตรง คลิกเลือกไฟล์เพื่อนำเข้าไฟล์จากเครื่อง หรือใช้วิธีลากไฟล์มาวางในพื้นที่รับข้อมูล หากต้องการตรวจไฟล์จากเว็บไซต์ที่ใช้งานจริง ให้เปิดผ่าน view-source หรือ DevTools ของเบราว์เซอร์ แล้วคัดลอกมาวางที่นี่ หรือบันทึกไฟล์ .js, .css, .html, .xml หรือ .json แล้วเปิดด้วยปุ่มเลือกไฟล์

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

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

โค้ดของคุณอยู่บนเครื่องของคุณเสมอ

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

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

ทำไม LFUnminify จึงใช้ฟรี?

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

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

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