Houd uw code aan de clientzijde leesbaar en foutopsporingsbaar, zelfs nadat u deze hebt gecombineerd, verkleind of gecompileerd. Gebruik bronkaarten om uw broncode toe te wijzen aan uw gecompileerde code in het paneel Bronnen .
Ga aan de slag met preprocessors
Bronkaarten van preprocessors zorgen ervoor dat DevTools uw originele bestanden laadt naast uw verkleinde bestanden.
Chrome voert uw verkleinde code daadwerkelijk uit, maar het Bronnenpaneel toont u de code die u schrijft. U kunt breekpunten instellen en de code in bronbestanden doorlopen, waarna alle fouten, logboeken en breekpunten automatisch in kaart worden gebracht.
Hierdoor lijkt het alsof u fouten in de code opspoort terwijl u deze schrijft, in tegenstelling tot code die door uw ontwikkelserver wordt aangeboden en door de browser wordt uitgevoerd.
Bronkaarten gebruiken in het Bronnenpaneel :
- Gebruik alleen de preprocessors die bronkaarten kunnen produceren.
- Controleer of uw webserver bronkaarten kan leveren.
Gebruik een ondersteunde preprocessor
Veel voorkomende preprocessors die worden gebruikt in combinatie met bronkaarten omvatten, maar zijn niet beperkt tot:
- Transpilers: Babel
- Compilers: TypeScript en Dart
- Minifiers: kortaf
- Bundelaars en ontwikkelingsservers: Webpack , Vite , esbuild en Parcel
Zie Bronkaarten: talen, hulpmiddelen en andere informatie voor een uitgebreide lijst.
Schakel bronkaarten in Instellingen in
In 
Instellingen > Voorkeuren > Bronnen , vink dit zeker aan 
JavaScript-bronkaarten .
Controleer of de bronkaarten succesvol zijn geladen
Zie Hulpbronnen voor ontwikkelaars: Bronkaarten handmatig bekijken en laden .
Foutopsporing met bronkaarten
Als de bronkaarten gereed en ingeschakeld zijn , kunt u het volgende doen:
- Open de bronnen van uw website in het paneel Bronnen .
Om u alleen te concentreren op de code die u schrijft, groepeert u geschreven en geïmplementeerde bestanden in de bestandsboom . Breid dan de
Geschreven sectie en open uw originele bronbestand in de Editor .