หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

เว็บแอปในช่วงแรกๆ สร้างขึ้นโดยมีความซับซ้อนต่ำ นักพัฒนาซอฟต์แวร์ทำให้ไฟล์ HTML, CSS และ JavaScript ทำงานบนเว็บได้โดยตรง

เว็บแอปที่ทันสมัยและซับซ้อนมากขึ้นอาจต้องการเครื่องมือที่หลากหลายในขั้นตอนการพัฒนา เช่น

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

ภาพรวมโดยย่อเกี่ยวกับเครื่องมือต่างๆ — ตัวอย่างเครื่องมือพัฒนาเว็บแอปที่พบได้ทั่วไป

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

เช่น การใช้เครื่องมือบิลด์ เราสามารถแปลงและบีบอัดไฟล์ 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 และสร้าง

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

/* 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

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

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

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

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

รายการการแมป — การแสดงภาพแผนที่ โฟกัสที่รายการ `65 -> 2:2`

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

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

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

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

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

ข้อเสียของการแมปแหล่งที่มา

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

ไม่ได้แมปคำทักทายตัวแปร — ตัวแปร `greet` ในโค้ดเดิมหายไปจากการแมป

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

ไม่ได้กำหนดคำทักทายของตัวแปร — เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไม่พบค่าสำหรับ `greet`

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

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