Ответ
Для отладки production-версии можно использовать source maps. Они позволяют видеть исходный код вместо минифицированного. Включите их в сборке (webpack, vite и т.д.) и загрузите в браузер.
Пример настройки source maps в webpack:
module.exports = {
devtool: 'source-map',
// остальная конфигурация
}Также полезные инструменты:
- Chrome DevTools → Sources → Page → Ctrl+P для поиска файлов
- Локальное проксирование через Charles/Fiddler для подмены файлов
- Добавление
?v=timestampк URL ресурсов для обхода кеша
Для React/Vue приложений можно использовать расширения DevTools, которые показывают компоненты в их исходном виде.
Ответ 18+ 🔞
О, слушай, смотри, вот реально больная тема — отладка продакшена. Ну как, блядь, искать баг, когда у тебя вместо кода одна сплошная минифицированная каша? Ты смотришь в девтулзы, а там a.min.js, и в нём строчка на три километра, и ты нихуя не понимаешь, где твоя функция handleSubmit сломалась.
Так вот, есть же, блядь, волшебная штука — source maps! Это, ёпта, как рентген для твоего сжатого кода. Ты в браузере видишь не эту ебучую минифицированную портянку, а свои родные, красивые исходники, с отступами, с названиями переменных, со всем, блядь, пиздецом. Просто включаешь их в сборке.
Смотри, например, в вебпаке это делается одной строчкой, в рот меня чих-пых:
module.exports = {
devtool: 'source-map', // Вот этот волшебный ключик, ёбана!
// остальная конфигурация
}Собрал проект с этой опцией — и рядом с твоим bundle.js появится файлик bundle.js.map. Браузер его подхватит и начнёт показывать тебе всё, как есть. Красота!
А ещё, блядь, полезные фишки, которые жизнь облегчат:
- Chrome DevTools → Вкладка Sources. Там жмёшь
Ctrl+P(илиCmd+Pна маке) и ищешь свой исходный файл по имени, прямо как в редакторе. Удобно, сука, до охуения! - Локальное проксирование (типа Charles или Fiddler). Если тебе кажется, что баг в каком-то конкретном файле на проде, можно, блядь, незаметно подменить его на свою локальную версию и посмотреть, починится ли. Хитрая жопа, но работает.
- Кеш — враг отладки. Чтобы браузер не тащил старые файлы, к урлам ресурсов можно прикручивать
?v=timestamp. Типаapp.js?v=1698765432. Браузер видит новый URL и качает свежачок, а не из своего зажопья.
Ну и для модных фреймворков. Если у тебя React или Vue, поставь себе официальные DevTools расширения для браузера. Они, блядь, тебе всё дерево компонентов в красивом виде покажут, с пропсами и стейтом. Это уже не отладка, а наслаждение, ёпта.
Короче, не мучайся, не пытайся читать минифицированный код — это путь в никуда. Включай source maps и дебажь с комфортом, как бог.