Mapy źródeł umożliwiają zachowanie czytelności i możliwości debugowania kodu nawet po jego połączeniu i zminifikowaniu bez wpływu na wydajność.
Gdy używasz różnych narzędzi do transpilacji, minifikacji i zbiorczego, wdrażany kod różni się od kodu, który został przez Ciebie napisany. Aby poprawić wydajność sieci, te narzędzia kompresują kod do pojedynczej linii, usuwają zbędne znaki i skracają zmienne.
Wiele narzędzi może generować mapy źródłowe, które będą towarzyszyć Twojemu kodowi.
Narzędzie Chrome DevTools odczytuje zarówno wdrożony kod, jak i mapy źródeł, i umożliwi debugowanie kodu w standardowy sposób, nawet z użyciem breakpoints.
Aby lepiej zrozumieć, jak działają mapy źródeł, skorzystaj z wizualizacji map źródeł.
Mapy źródeł mogą też zawierać rozszerzenia. Jeśli tworzysz narzędzia i ramy, rozważ ich obsługę. Zapoznaj się z artykułem Case Study: Better Angular Debugging with DevTools (Przykład: ulepszone debugowanie Angulara za pomocą Narzędzi dla deweloperów), w którym zespół Narzędzi dla deweloperów i Angular ulepszyli debugowanie w Narzędziach dla deweloperów, wprowadzając obsługę rozszerzenia x_google_ignoreList.
Więcej informacji znajdziesz w tych artykułach: