สำรวจ JavaScript Source Map
อัปโหลดหรือวาง source map (.map) ของ JavaScript แล้วดูทันทีว่าไฟล์ต้นทางใดกินพื้นที่ใน bundle มากที่สุด พร้อมสถิติ segment, name และ sourcesContent
Loading tool...
สำรวจ JavaScript Source Map คืออะไร?
JavaScript Source Map Explorer วิเคราะห์ไฟล์ source map เวอร์ชัน 3 ในเบราว์เซอร์ของคุณล้วน ๆ โดยถอดรหัส mappings แบบ base64 VLQ ด้วยโค้ดในตัวที่ไม่พึ่ง library ภายนอก แล้วรายงานว่าไฟล์ต้นทางใดกินไบต์มากที่สุดผ่าน sourcesContent, segment ชี้มาที่ source ไหนบ้าง, name ที่ใช้บ่อยที่สุด และสถิติ mappings โดยรวม เพราะทุกอย่างทำงานในเครื่อง คุณจึงตรวจสอบ build ภายในและโค้ดลิขสิทธิ์ได้อย่างปลอดภัย
ประโยชน์หลัก
- เห็นชัดว่าไฟล์ต้นทางใดครองพื้นที่ bundle มากที่สุด
- ไม่ต้องอัปโหลด — ปลอดภัยกับโค้ดลิขสิทธิ์และงานที่มี NDA
- ใช้ได้กับ map จาก webpack, Vite, esbuild, Rollup, SWC และ tsc
- การรวมผลแบบ constant-memory ทำให้ map ขนาดหลาย MB ยังลื่น
กรณีการใช้งาน
- •ตรวจว่า dependency ตัวไหนทำให้ main bundle บวมก่อน release
- •ยืนยันว่า production build ตัดหรือคง sourcesContent ตามตั้งใจ
- •เปรียบเทียบองค์ประกอบ bundle ก่อนและหลังทำ code splitting
- •สืบสาเหตุ stack trace ที่ถูก minify ด้วยการสำรวจ name และ source
วิธีวิเคราะห์ JavaScript source map
- โหลด source map: วาง JSON ของไฟล์ .map ลงช่องอินพุต หรือกด Choose .map file โดยไฟล์ถึง 50 MB จะถูกอ่านในเครื่องเท่านั้น ไม่มีการอัปโหลด
- อ่านส่วนสรุป: การ์ดหกใบแสดงจำนวน sources, names, segments, generated lines, ขนาด mappings และว่ามี sourcesContent หรือไม่ พร้อมค่า file, version และ sourceRoot
- หาตัวการที่กินพื้นที่: ตาราง Sources by contribution จัดอันดับไฟล์ต้นฉบับตามขนาดเนื้อหาและเปอร์เซ็นต์ share พร้อมแถบกราฟ เห็นทันทีว่าไลบรารีหรือโฟลเดอร์ใดกิน bundle มากที่สุด
- ดูรายละเอียด mapping และส่งออก: เทียบจำนวน mapped กับ unmapped segment และดู most-used names แล้วกด Download report เพื่อบันทึกรายงานฉบับเต็มเป็นไฟล์ข้อความ
คุณสมบัติหลัก
- ตัวถอดรหัส base64 VLQ สำหรับ mappings ของ source map เวอร์ชัน 3 โดยไม่พึ่ง dependency
- ขนาดไบต์และสัดส่วนราย source พร้อมแถบสัดส่วนภาพ
- สถิติ mappings: segment รวม, แมปแล้ว, ไม่แมป และที่มี name
- รายการ name ที่ใช้บ่อย กดคัดลอกได้ทันที
- รองรับ map ถึง 50 MB ด้วยการรวมผลแบบ constant-memory
- ทำงานฝั่ง client 100% — โค้ดลิขสิทธิ์ไม่ออกจากเบราว์เซอร์
คำถามที่พบบ่อย
เปอร์เซ็นต์ share ในตาราง sources หมายความว่าอะไร
ถ้าไฟล์มี sourcesContent ค่านี้คือสัดส่วนไบต์ UTF-8 จริงที่ไฟล์ต้นฉบับแต่ละไฟล์คิดเป็นใน bundle แต่ถ้าไม่มี sourcesContent เครื่องมือจะประมาณสัดส่วนจากจำนวน mapping segment แทน
mapped กับ unmapped segment ต่างกันอย่างไร
แต่ละรายการ VLQ ในฟิลด์ mappings คือหนึ่ง segment segment แบบ mapped ชี้กลับไปยังบรรทัดในไฟล์ต้นฉบับ ส่วนแบบ unmapped ซึ่งพบบ่อยในโค้ดที่ generate หรือ polyfill ไม่มีที่มา ถ้ามีมากมักแปลว่า bundle มีโค้ดที่ generate เพิ่มเยอะ
วิเคราะห์ source map ขนาดเท่าไรได้
รับไฟล์ได้ถึง 50 MB ทั้งจากการวางข้อความและปุ่ม Choose .map file ที่รับ .map หรือ .json โดยทุกอย่าง parse ในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด
รายการ names ใช้ทำอะไรได้บ้าง
Most-used names คือ identifier ที่การ mapping อ้างถึงบ่อยที่สุด กดชิปใดก็ได้เพื่อคัดลอก มีประโยชน์ตอน grep ใน bundle ที่ minify แล้วหรือเทียบกับผล profiler และกด Download report เพื่อบันทึกรายงานฉบับเต็มเป็นไฟล์ข้อความ