การแมปแหล่งที่มาเป็นเครื่องมือที่สำคัญในการพัฒนาเว็บสมัยใหม่ ง่ายขึ้นอย่างมาก หน้านี้จะสำรวจพื้นฐานของแผนที่แหล่งที่มา และวิธีที่เครื่องมือดังกล่าวปรับปรุงประสบการณ์การแก้ไขข้อบกพร่อง
ความจำเป็นในการแมปแหล่งที่มา
เว็บแอปในช่วงแรกๆ นั้นสร้างขึ้นโดยมีความซับซ้อนต่ำ นักพัฒนาซอฟต์แวร์ใช้งาน HTML, CSS, และไฟล์ JavaScript ไปยังเว็บได้โดยตรง
เว็บแอปที่ทันสมัยและซับซ้อนมากขึ้นอาจต้องใช้เครื่องมือหลายอย่าง เวิร์กโฟลว์การพัฒนา เช่น
- ภาษาเทมเพลตและ HTML Preprocessor: Pug, Nunjucks มาร์กดาวน์
- ตัวประมวลผล CSS ล่วงหน้า: SCSS, น้อยกว่า PostCSS
- เฟรมเวิร์ก JavaScript: Angular, React, Vue, Svelte
- เฟรมเวิร์กเมตาของ JavaScript: Next.js, Nuxt, Astro
- ภาษาโปรแกรมระดับสูง TypeScript ลูกดอก 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
รวม พัสดุ และ
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 base64
เพื่อแมปเส้นและตำแหน่งในไฟล์ที่คอมไพล์แล้วกับต้นฉบับที่เกี่ยวข้อง
คุณสามารถดูการแมปนี้โดยใช้เครื่องมือแสดงข้อมูลผ่านภาพแผนที่แหล่งที่มา เช่น
source-map-visualization หรือ
การแสดงภาพการแมปแหล่งที่มา
คอลัมน์สร้างแล้วทางด้านซ้ายจะแสดงเนื้อหาที่บีบอัด และ original จะแสดงแหล่งที่มาต้นฉบับ
วิดีโอ Visualizer จะใส่รหัสสีแต่ละบรรทัดในคอลัมน์ต้นฉบับพร้อมด้วย ที่เกี่ยวข้องกันในคอลัมน์สร้างขึ้น
ส่วนการแมปจะแสดงการแมปที่ถอดรหัสแล้วของโค้ด ตัวอย่างเช่น พารามิเตอร์
รายการ 65 -> 2:2 หมายถึง:
- โค้ดที่สร้าง: คำว่า
constเริ่มต้นที่ตำแหน่ง 65 ในเนื้อหาที่บีบอัด - โค้ดต้นฉบับ: คำว่า
constเริ่มต้นที่บรรทัดที่ 2 และคอลัมน์ 2 ในเนื้อหาต้นฉบับ
65 -> 2:2ซึ่งจะช่วยให้นักพัฒนาซอฟต์แวร์ระบุความสัมพันธ์ระหว่างโค้ดที่ลดขนาดลงได้อย่างรวดเร็ว และโค้ดต้นฉบับ ทำให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่นยิ่งขึ้น
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เบราว์เซอร์จะใช้แผนที่แหล่งที่มาเหล่านี้ เพื่อช่วยคุณในการระบุ แก้ไขข้อบกพร่องอย่างรวดเร็วในเบราว์เซอร์
ส่วนขยายการแมปแหล่งที่มา
การแมปแหล่งที่มารองรับช่องส่วนขยายที่กำหนดเองซึ่งขึ้นต้นด้วย x_ หนึ่ง
เช่น ช่องส่วนขยาย x_google_ignoreList ที่ Chrome เสนอ
เครื่องมือสำหรับนักพัฒนาเว็บ โปรดดู x_google_ignoreList
เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ส่วนขยายเหล่านี้ช่วยให้คุณมุ่งเน้นไปที่โค้ดได้
ข้อด้อยของการแมปแหล่งที่มา
อย่างไรก็ตาม การแมปแหล่งที่มาอาจไม่สมบูรณ์อย่างที่คุณต้องการ
ในตัวอย่างแรกของเรา ตัวแปร greet ได้รับการเพิ่มประสิทธิภาพระหว่างการสร้าง
แม้ว่าจะฝังค่าของกระบวนการโดยตรงในเอาต์พุตสตริงสุดท้ายก็ตาม
greet ตัวแปรต้นฉบับ
ไม่พบรหัสในการแมปในกรณีนี้ เมื่อคุณดีบักโค้ด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อาจไม่สามารถ อนุมานและแสดงค่าจริงได้ ข้อผิดพลาดประเภทนี้สามารถทำให้โค้ด ตรวจสอบและวิเคราะห์ได้ยากขึ้น
greetนี่เป็นปัญหาที่จำเป็นต้องแก้ไขในการออกแบบการแมปแหล่งที่มา หนึ่ง วิธีแก้ปัญหาที่เป็นไปได้ก็คือ ใส่ข้อมูลขอบเขตไว้ในการแมปแหล่งที่มาในส่วน เช่นเดียวกับภาษาโปรแกรมอื่นๆ กับข้อมูลการแก้ไขข้อบกพร่อง
อย่างไรก็ตาม วิธีนี้ต้องอาศัยทั้งระบบนิเวศในการร่วมมือกันเพื่อปรับปรุง ข้อกำหนดและการใช้งานการแมปแหล่งที่มา เพื่อติดตามการดำเนินการอย่างต่อเนื่องใน ซึ่งปรับปรุงความสามารถในการแก้ไขข้อบกพร่องด้วยการแมปแหล่งที่มา โปรดดูข้อเสนอสำหรับ แหล่งที่มา Maps เวอร์ชัน 4 ใน GitHub