การแมปแหล่งที่มาเป็นเครื่องมือสำคัญในการพัฒนาเว็บสมัยใหม่ที่ทำให้แก้ไขข้อบกพร่องได้ง่ายขึ้นมาก หน้านี้จะสำรวจข้อมูลพื้นฐานเกี่ยวกับแผนที่แหล่งที่มา วิธีสร้าง และวิธีในการปรับปรุงประสบการณ์การแก้ไขข้อบกพร่อง
ความต้องการการแมปแหล่งที่มา
เว็บแอปในช่วงแรกๆ สร้างขึ้นโดยมีความซับซ้อนต่ำ นักพัฒนาซอฟต์แวร์ทำให้ไฟล์ HTML, CSS และ JavaScript ทำงานบนเว็บได้โดยตรง
เว็บแอปที่ทันสมัยและซับซ้อนมากขึ้นอาจต้องการเครื่องมือที่หลากหลายในขั้นตอนการพัฒนา เช่น
- ภาษาและตัวประมวลผล HTML ล่วงหน้า ได้แก่ Pug, Nunjucks, มาร์กดาวน์
- CSS Preprocessor: SCSS, LESS, PostCSS
- เฟรมเวิร์ก JavaScript: Angular, React, Vue, Svelte
- เฟรมเวิร์กเมตา JavaScript: Next.js, Nuxt, Astro
- ภาษาโปรแกรมระดับสูง ได้แก่ TypeScript, Dart, CoffeeScript
![ภาพรวมโดยย่อเกี่ยวกับเครื่องมือต่างๆ](https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=6&hl=th)
เครื่องมือเหล่านี้ต้องมีกระบวนการบิลด์เพื่อแปลงโค้ดเป็น 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 เพื่อจับคู่เส้นและตำแหน่งในไฟล์ที่คอมไพล์เข้ากับไฟล์ต้นฉบับที่เกี่ยวข้อง คุณดูการแมปนี้ได้โดยใช้โปรแกรมสร้างภาพแผนที่แหล่งที่มา เช่น ภาพแผนที่แหล่งที่มา หรือการแสดงภาพแผนที่แหล่งที่มา
![การแสดงแผนที่แหล่งที่มา](https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=6&hl=th)
คอลัมน์สร้างทางด้านซ้ายจะแสดงเนื้อหาที่บีบอัด และคอลัมน์ต้นฉบับจะแสดงแหล่งที่มาต้นฉบับ
วิดีโอ Visualizer จะใส่รหัสสีแต่ละบรรทัดในคอลัมน์ต้นฉบับด้วยรหัสที่เกี่ยวข้องในคอลัมน์สร้าง
ส่วนการแมปจะแสดงการแมปโค้ดที่ถอดรหัสแล้ว เช่น คำว่า 65 -> 2:2
หมายถึง
- โค้ดที่สร้างขึ้น: คำว่า
const
เริ่มต้นที่ตำแหน่ง 65 ในเนื้อหาที่บีบอัด - รหัสต้นฉบับ: คำว่า
const
เริ่มต้นที่บรรทัดที่ 2 และคอลัมน์ที่ 2 ในเนื้อหาต้นฉบับ
![รายการการแมป](https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=6&hl=th)
65 -> 2:2
วิธีนี้ช่วยให้นักพัฒนาซอฟต์แวร์ระบุความสัมพันธ์ระหว่างโค้ดที่ลดขนาดและโค้ดต้นฉบับได้อย่างรวดเร็ว ซึ่งทำให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่นยิ่งขึ้น
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เบราว์เซอร์จะใช้แผนที่แหล่งที่มาเหล่านี้เพื่อช่วยให้คุณระบุปัญหาการแก้ไขข้อบกพร่องได้อย่างรวดเร็วในเบราว์เซอร์
![เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ใช้การแมปแหล่งที่มา](https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=6&hl=th)
ส่วนขยายการแมปแหล่งที่มา
การแมปแหล่งที่มารองรับฟิลด์ส่วนขยายที่กำหนดเองซึ่งเริ่มต้นด้วยคำนำหน้า x_
ตัวอย่างเช่น ช่องส่วนขยาย x_google_ignoreList
ที่ Chrome DevTools เสนอ ดู x_google_ignoreList
เพื่อดูข้อมูลเพิ่มเติมว่าส่วนขยายเหล่านี้ช่วยให้คุณโฟกัสที่โค้ดได้อย่างไร
ข้อเสียของการแมปแหล่งที่มา
อย่างไรก็ตาม การแมปแหล่งที่มาอาจไม่สมบูรณ์ตามที่ต้องการเสมอไป
ในตัวอย่างแรกของเรา ตัวแปร greet
ได้รับการเพิ่มประสิทธิภาพในระหว่างกระบวนการบิลด์ แม้ว่าค่าดังกล่าวจะฝังอยู่ในเอาต์พุตสตริงสุดท้ายโดยตรงก็ตาม
![ไม่ได้แมปคำทักทายตัวแปร](https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=6&hl=th)
greet
ในโค้ดเดิมหายไปจากการแมปในกรณีนี้ เมื่อคุณแก้ไขข้อบกพร่องของโค้ด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อาจไม่สามารถอนุมานและแสดงค่าที่แท้จริงได้ ข้อผิดพลาดประเภทนี้ทำให้การตรวจสอบและวิเคราะห์โค้ดทำได้ยากขึ้น
![ไม่ได้กำหนดคำทักทายของตัวแปร](https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=6&hl=th)
greet
ซึ่งเป็นปัญหาที่ต้องได้รับการแก้ไขภายในการออกแบบแผนที่แหล่งที่มา โซลูชันหนึ่งที่สามารถทำได้คือรวมข้อมูลขอบเขตในการแมปแหล่งที่มาในลักษณะเดียวกับที่ภาษาโปรแกรมอื่นๆ ดำเนินการกับข้อมูลการแก้ไขข้อบกพร่อง
อย่างไรก็ตาม วิธีนี้ทำให้ทั้งระบบนิเวศต้องทำงานร่วมกันเพื่อปรับปรุงข้อกำหนดและการติดตั้งใช้งานการแมปแหล่งที่มา หากต้องการติดตามผลการปรับปรุงความสามารถในการแก้ไขข้อบกพร่องอย่างต่อเนื่องด้วยแผนที่แหล่งที่มา โปรดดูข้อเสนอสำหรับ Source Maps v4 ใน GitHub