คลายโค้ด JavaScript ที่ย่อออนไลน์
วางไฟล์ .js ที่ย่อแล้ว บันเดิลจาก webpack หรือโค้ดบรรทัดเดียว แล้วรับ JavaScript ที่เยื้องอย่างเป็นระเบียบในช่องด้านขวา Prettier จัดรูปแบบให้ภายในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลดข้อมูลไปที่ใด
ทำไม JavaScript จึงกลายเป็นโค้ดที่อ่านยาก
กระบวนการบิลด์สมัยใหม่ย่อ JavaScript ก่อนนำไปใช้งานจริง Terser, esbuild, SWC และเครื่องมือประเภทเดียวกันตัดช่องว่างและคอมเมนต์ออก เปลี่ยนชื่อตัวแปรและฟังก์ชันภายในให้เหลืออักษรเดียว ยุบบล็อกที่ซ้อนกันเป็นนิพจน์ต่อเนื่อง แล้วรวมแอปพลิเคชันทั้งหมดให้เหลือหนึ่งหรือสองไฟล์ แอป React ที่เริ่มจากซอร์สไฟล์อ่านง่ายสามร้อยไฟล์จึงมาถึงเบราว์เซอร์เป็นบรรทัดเดียวขนาดหลายร้อยกิโลไบต์ โค้ดยังทำงานได้ตามเดิม แต่เมื่อต้องอ่านกลับกลายเป็นข้อความแน่น ๆ ที่ไม่มีโครงสร้างให้ไล่ตาม
สิ่งที่ได้กลับมาจากการจัดรูปแบบ
การจัดรูปแบบบันเดิลคืนองค์ประกอบที่ช่วยให้ค้นหาและไล่อ่านโค้ดได้ คำสั่งถูกแยกลงบรรทัดของตัวเอง ทำให้ตำแหน่งอย่างบรรทัด 1 คอลัมน์ 24815 ใน stack trace แกะรอยได้ง่ายขึ้น เมื่อเห็นระดับการซ้อน คุณจะแยกได้ว่าฟังก์ชันเริ่มและจบที่ใด เงื่อนไขควบคุมแขนงใด และสายของ callback เชื่อมต่อกันอย่างไร สตริง URL และชื่อ endpoint ก็กวาดตาหาได้สะดวก ซึ่งมักเป็นเป้าหมายหลักของการตรวจสอบสคริปต์จากภายนอก
รองรับไวยากรณ์สมัยใหม่
ตัวจัดรูปแบบแยกวิเคราะห์ JavaScript สมัยใหม่ได้ ไม่ได้จำกัดเฉพาะรูปแบบเก่า ทั้ง arrow functions, classes, async และ await, generators, optional chaining, nullish coalescing, template literals, destructuring, spread syntax, dynamic imports และ ES modules ล้วนจัดรูปแบบได้ รองรับ JSX ด้วย จึงมีประโยชน์เมื่อตรวจคอมโพเนนต์ React ที่ยังไม่ได้แปลง JSX ออก เนื่องจากใช้ Prettier ผลลัพธ์จึงเป็นไปตามแนวทางเดียวกับที่โปรแกรมแก้ไขโค้ดใช้จัดไฟล์ของคุณอยู่แล้ว
ข้อจำกัดที่ควรทราบ
การคลายโค้ดที่ย่อไม่ได้ย้อนคืนรายละเอียดซอร์สที่สูญหาย ตัว minifier ลบคอมเมนต์และเปลี่ยนชื่อตัวแปรไปแล้ว ไม่มีตัวจัดรูปแบบใดเดาได้ว่าตัวแปรชื่อ n เคยใช้ชื่อ remainingRetries หากโปรเจกต์เผยแพร่ source map ให้โหลดใน DevTools ของเบราว์เซอร์เพื่อเชื่อมกลับไปยังซอร์สต้นฉบับจริง ส่วนไฟล์ที่จงใจพรางโค้ดให้เข้าใจยากจะได้โครงสร้างที่อ่านสะดวกขึ้น แต่ความหมายและเจตนาของโค้ดอาจยังไม่ชัดเจน
คำถามที่พบบ่อย
คลายบันเดิลจาก webpack หรือ Vite ได้หรือไม่?
ได้ วางบันเดิลหรือเปิดไฟล์ด้วยปุ่มเลือกไฟล์ แล้วเครื่องมือจะจัดรูปแบบเช่นเดียวกับ JavaScript ทั่วไป บันเดิลขนาดใหญ่อาจใช้เวลาสองสามวินาที เพราะทำงานบนเครื่องของคุณเอง และเมื่อเยื้องโค้ดแล้วจะเห็นโครงสร้างของโมดูลได้ชัดขึ้น
เครื่องมือนี้แกะการพรางโค้ด JavaScript ได้หรือไม่?
เครื่องมือจัดรูปแบบโค้ดที่ถูกพรางให้อ่านง่ายขึ้นได้ แต่ไม่ได้ย้อนกระบวนการพรางโค้ด สตริงที่เข้ารหัส เส้นทางการควบคุมที่สร้างให้ซับซ้อน และโค้ดที่ไม่มีวันทำงานซึ่งถูกเพิ่มไว้โดยตั้งใจยังคงอยู่เช่นเดิม
การจัดรูปแบบจะทำให้โค้ดเสียหรือไม่?
ตัวจัดรูปแบบมุ่งรักษาพฤติกรรมของ JavaScript พร้อมปรับให้เป็นรูปแบบที่สม่ำเสมอ อาจมีการเปลี่ยนเครื่องหมายวรรคตอน เครื่องหมายคำพูด และการจัดวาง จึงไม่ได้เหมือนต้นฉบับทุกไบต์ ควรเก็บไฟล์ต้นฉบับ ตรวจผลลัพธ์ และรันทดสอบของโปรเจกต์ก่อนนำบันเดิลที่แก้ไขหรือจัดรูปแบบแล้วไปใช้ในระบบจริง