Source maps 是一種用于調(diào)試和錯(cuò)誤追蹤的技術(shù)，它能夠?qū)嚎s、混淆、轉(zhuǎn)換后的代碼映射回原始的、易于閱讀的源代碼。

當(dāng)開發(fā)者在編寫 JavaScript、CSS 或者其他前端代碼時(shí)，經(jīng)常會(huì)使用工具對(duì)代碼進(jìn)行壓縮、混淆和轉(zhuǎn)換等處理，以減小文件大小并提高加載速度。然而，這些處理后的代碼往往難以理解和調(diào)試，因?yàn)樗鼈円呀?jīng)與原始的源代碼存在很大差異。

這時(shí)，就可以使用 source maps 技術(shù)。Source maps 是一種包含了源代碼與處理后代碼之間映射關(guān)系的文件。它記錄了處理后代碼中的每個(gè)位置與源代碼中的對(duì)應(yīng)位置之間的映射關(guān)系，包括行號(hào)、列號(hào)以及源文件路徑等信息。

當(dāng)出現(xiàn)錯(cuò)誤或需要進(jìn)行調(diào)試時(shí)，開發(fā)者可以使用 source maps 技術(shù)將處理后的代碼映射回原始的源代碼。調(diào)試器或開發(fā)者工具會(huì)讀取 source maps 文件，根據(jù)其中的映射關(guān)系將錯(cuò)誤或調(diào)試信息準(zhǔn)確地定位到源代碼中的對(duì)應(yīng)位置。這樣，開發(fā)者就可以像調(diào)試原始代碼一樣，方便地查找錯(cuò)誤和進(jìn)行調(diào)試。

Source maps 廣泛應(yīng)用于前端開發(fā)中，特別是在使用諸如 Babel、TypeScript、Webpack 等工具進(jìn)行代碼轉(zhuǎn)換和打包時(shí)。它大大提高了開發(fā)效率和代碼調(diào)試的便捷性，幫助開發(fā)者快速定位和修復(fù)問題。