Keep your client-side code readable and debuggable even after you've combined, minified or compiled it. Use source maps to map your source code to your compiled code in the Sources panel.
Get started with preprocessors
Source maps from preprocessors cause DevTools to load your original files in addition to your minified ones.
Chrome will actually run your minified code but the Sources panel will show you the code you author. You can set breakpoints and step through code in source files and all the errors, logs, and breakpoints will automatically map.
This gives you the appearance of debugging the code as you wrote it, as opposed to code that is served by your development server and executed by the browser.
To use source maps in the Sources panel:
- Use only the preprocessors that can produce source maps.
- Verify that your web server can serve source maps.
Use a supported preprocessor
Common preprocessors used in combination with source maps include but aren't limited to:
- Transpilers: Babel
- Compilers: TypeScript and Dart
- Minifiers: terser
- Bundlers and development servers: Webpack, Vite, esbuild, and Parcel
For an extended list, see Source maps: Languages, tools, and other info.
Enable source maps in Settings
In 
Settings > Preferences > Sources, make sure to check 
JavaScript source maps.
Check if source maps loaded successfully
See Developer Resources: View and load source maps manually.
Debugging with source maps
With source maps ready and enabled, you can do the following:
- Open your website's sources in the Sources panel.
To focus only on the code you author, group authored and deployed files in the file tree. Then expand the
Authored section and open your original source file in the Editor.