แผนที่แหล่งที่มาคืออะไร

ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องของเว็บด้วยการแมปแหล่งที่มา

เยเซลิน เยน

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

ความต้องการการแมปแหล่งที่มา

เมื่อวันก่อนๆ เราสร้างเว็บแอปพลิเคชันด้วย HTML, CSS และ JavaScript เพียงอย่างเดียว และนำไฟล์เดียวกันไปไว้บนเว็บ

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

• ภาษาและตัวประมวลผล HTML ล่วงหน้า: Pug, Nunjucks และ มาร์กดาวน์
• โปรเซสเซอร์ CSS ล่วงหน้า: SCSS, LESS, PostCSS
• เฟรมเวิร์ก JavaScript ได้แก่ Angular, React, Vue, Svelte
• เฟรมเวิร์กเมตา JavaScript: Next.js, Nuxt, Astro
• ภาษาโปรแกรมระดับสูง: TypeScript, Dart, CoffeeScript
• และอื่นๆ อีกมากมาย รายการจะดำเนินต่อไปก็ได้

เครื่องมือเหล่านี้ต้องมีกระบวนการบิลด์เพื่อแปลงโค้ดเป็น HTML มาตรฐาน, JavaScript และ CSS ที่เบราว์เซอร์เข้าใจได้ นอกจากนี้ เพื่อเพิ่มประสิทธิภาพ แนวทางปฏิบัติทั่วไปในการบีบอัด (เช่น การใช้ Terser เพื่อลดขนาดและแก้ไข JavaScript) และรวมไฟล์เหล่านี้เข้าด้วยกัน การลดขนาด และทำให้ไฟล์มีประสิทธิภาพมากขึ้นสำหรับเว็บ

ตัวอย่างเช่น การใช้เครื่องมือบิลด์ เราสามารถแปลงและบีบอัดไฟล์ TypeScript ต่อไปนี้ลงใน JavaScript บรรทัดเดียว คุณเล่นการสาธิตในที่เก็บ GitHub ของฉันได้

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

เวอร์ชันที่บีบอัดจะเป็น:

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

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

กำลังสร้างการแมปแหล่งที่มา

แผนที่แหล่งที่มาคือไฟล์ที่มีชื่อลงท้ายด้วย .map (เช่น example.min.js.map และ styles.css.map) ซึ่งสามารถสร้างโดยเครื่องมือสร้างส่วนใหญ่ เช่น Vite, webpack, Rollup, Parcel, esbuild และอื่นๆ

เครื่องมือบางอย่างอาจประกอบด้วยแผนที่แหล่งที่มาโดยค่าเริ่มต้น ขณะที่เครื่องมืออื่นๆ อาจต้องมีการกำหนดค่าเพิ่มเติมเพื่อสร้างแผนที่แหล่งที่มา

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

ทำความเข้าใจการแมปแหล่งที่มา

ไฟล์แผนที่แหล่งที่มาเหล่านี้มีข้อมูลสำคัญเกี่ยวกับการแมปโค้ดที่คอมไพล์เข้ากับโค้ดต้นฉบับ ทำให้นักพัฒนาซอฟต์แวร์แก้ไขข้อบกพร่องได้อย่างง่ายดาย นี่คือตัวอย่างของการแมปแหล่งที่มา

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

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

แง่มุมที่สําคัญที่สุดของการแมปแหล่งที่มาคือช่อง mappings ซึ่งจะใช้สตริงที่เข้ารหัส VLQ ฐาน 64 เพื่อจับคู่เส้นและตำแหน่งในไฟล์ที่คอมไพล์เข้ากับไฟล์ต้นฉบับที่เกี่ยวข้อง แสดงภาพการแมปนี้ได้โดยใช้โปรแกรมสร้างภาพแผนที่แหล่งที่มา เช่น ภาพแผนที่แหล่งที่มาและการแสดงภาพแผนที่แหล่งที่มา

คอลัมน์สร้างทางด้านซ้ายจะแสดงเนื้อหาที่บีบอัด และคอลัมน์ต้นฉบับจะแสดงแหล่งที่มาต้นฉบับ

รหัสสีของ Visualizer แต่ละบรรทัดในคอลัมน์ต้นฉบับ และโค้ดที่สอดคล้องกันในคอลัมน์สร้าง

ส่วนการแมปจะแสดงการแมปโค้ดที่ถอดรหัสแล้ว ตัวอย่างเช่น ข้อความ 65-> 2:2 หมายถึง

• โค้ดที่สร้างขึ้น: คำว่า const เริ่มต้นที่ตำแหน่ง 65 ในเนื้อหาที่บีบอัด
• รหัสต้นฉบับ: คำว่า const เริ่มต้นที่บรรทัดที่ 2 และคอลัมน์ที่ 2 ในเนื้อหาต้นฉบับ

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

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

รูปภาพแสดงวิธีที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ใช้การแมปแหล่งที่มาและแสดงการแมประหว่างไฟล์ต่างๆ

ส่วนขยายการแมปแหล่งที่มา

ส่วนขยายที่สนับสนุนการแมปแหล่งที่มา ส่วนขยายคือช่องที่กำหนดเองที่ขึ้นต้นด้วยรูปแบบการตั้งชื่อ x_ ตัวอย่างหนึ่งคือช่องส่วนขยาย x_google_ignoreList ที่ Chrome DevTools เสนอ โปรดดู x_google_ignoreList เพื่อเรียนรู้เพิ่มเติมว่าส่วนขยายเหล่านี้ช่วยให้คุณโฟกัสที่โค้ดได้อย่างไร

อาจยังไม่สมบูรณ์

ในตัวอย่างของเรา ตัวแปร greet ได้รับการเพิ่มประสิทธิภาพในระหว่างกระบวนการบิลด์ ระบบฝังค่าไว้ในเอาต์พุตสตริงสุดท้ายโดยตรง

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

ปัญหานี้แก้ไขได้อย่างแน่นอน หนึ่งในวิธีคือการรวมข้อมูลขอบเขตไว้ในการแมปแหล่งที่มาเหมือนที่ภาษาโปรแกรมอื่นๆ ทำกับข้อมูลการแก้ไขข้อบกพร่อง

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

เราต้องการปรับปรุงแผนที่แหล่งที่มาและทำให้การแก้ไขข้อบกพร่องเป็นเรื่องยุ่งยากน้อยลง