開發人員工具提示:什麼是來源對應?

蘇菲亞.艾梅里安諾瓦 (Sofia Emelianova)
Sofia Emelianova

來源對應可讓您即使在合併及壓縮程式碼後,仍能讀取及偵錯程式碼,且不影響效能。

使用各種轉譯器、壓縮器和整合器時,您部署的程式碼與您編寫的程式碼不同。為提升網路效能,這些工具會將程式碼壓縮成單行、移除不必要的字元並縮短變數。

已壓縮的程式碼和原始程式碼。

許多工具可以產生與程式碼搭配的來源對應。

來源對應。

Chrome 開發人員工具會讀取已部署的程式碼和來源對應,可讓您照常對程式碼進行偵錯,即使有中斷點也沒問題。

在編寫的來源檔案中使用開發人員工具中的中斷點。

如要進一步瞭解來源地圖的運作方式,請參閱來源地圖視覺化工具

此外,來源對應可以使用擴充功能。如果您建立了工具和架構,請考慮支援這些工具。請參閱個案研究:使用開發人員工具改善 Angular 偵錯功能,DevTools 團隊和 Angular 藉由支援 x_google_ignoreList 擴充功能,改善了開發人員工具的偵錯體驗。

詳情請參閱: