Сравни способы достучаться из консоли до кода собранного сборщиком и объясни, когда выбирать каждый вариант.

До кода, собранного сборщиком, из консоли достучаются через source maps (отладка исходников), объекты в глобальной области, DevTools debugger, или экспорт в `window`. Выбор — по цели отладки.

Способы

Source Maps (основной)

Сборщик генерирует source maps, связывающие минифицированный код с исходниками. В DevTools видны и отлаживаются оригинальные файлы:

// webpack: devtool: 'source-map'; vite: build: { sourcemap: true }

• Когда: отладка исходного кода (breakpoints в оригинале, читаемые имена).

Глобальные объекты / window

Явно вынести нужное в window для доступа из консоли:

if (import.meta.env.DEV) {
  window.__store = store; // доступ из консоли в dev
}

• Когда: инспектировать состояние приложения (store, сервисы) вручную.

DevTools debugger

Breakpoints, debugger, пошаговый обход — работают с source maps по исходникам.

• Когда: пошаговая отладка логики.

DevTools Sources / Scope

Смотреть переменные в области видимости на паузе (даже без явного экспорта).

React/Redux DevTools

Инспектировать компоненты/стор без ручного экспорта.

Как выбирать

• Отладка исходного кода → source maps + debugger.
• Ручная инспекция состояния → экспорт в window (dev).
• Компоненты/стор → React/Redux DevTools.

Нюансы

Source maps в проде обычно не публикуют (или скрытые), чтобы не раскрывать исходники.

Коротко для собеседования

До собранного кода из консоли достучаться: source maps (отладка оригинальных исходников с breakpoints — основной способ), экспорт нужного в window (dev — инспекция store/сервисов вручную), DevTools debugger/Scope (переменные на паузе), React/Redux DevTools (компоненты/стор). Source maps связывают минифицированный код с исходниками; в проде их обычно не публикуют.