Как дебажить CSS Modules в production?

Как дебажить CSS Modules в production?

Проблема

CSS Modules в production обычно минифицируются и обфусцируются, что затрудняет отладку:

/* На dev сервере видно так: */
.Button_btn__a1b2c { color: blue; }

/* В production то же самое имеет вид: */
._a1b2c { color: blue; }

Кроме того, обычно применяется tree-shaking и code splitting, что усложняет поиск нужных стилей.

1. Использование Source Maps

Самый надёжный способ - включить source maps в production (с осторожностью):

// next.config.js или webpack.config.js
module.exports = {
  productionBrowserSourceMaps: true, // Next.js
  // или для Webpack:
  mode: 'production',
  devtool: 'source-map', // Полный source map
  // или лучше:
  devtool: 'hidden-source-map', // Source map доступен, но не ссылается в коде
};

Затем в DevTools браузера:

1. Открываешь DevTools (F12)
2. Вкладка Sources
3. Видишь исходные CSS файлы
4. Можешь поставить breakpoints и отладить

Внешний стиль (минифицированный):
._a1b2c { color: blue; }
        ^
        Кликаешь -> видишь исходный файл:
Button.module.css:
.btn { color: blue; }

2. Инспекция элемента в DevTools

Простой способ - использовать Inspect Element:

1. DevTools -> Elements
2. Выбираешь элемент (лупа)
3. Видишь применённые стили справа
4. Наводишь на класс -> видишь имя файла (если source maps)

Если source maps не включены, видишь только минифицированное имя класса, но можешь:

• Посмотреть на applied styles
• Скопировать селектор
• Поискать в исходном коде

3. Добавление data-атрибутов для отладки

Практический способ - добавлять data-атрибуты в компоненты:

// Button.module.css
.btn {
  color: blue;
  padding: 10px;
}

// Button.tsx
import styles from './Button.module.css';

export function Button({ children }) {
  return (
    <button className={styles.btn} data-testid="button" data-component="Button">
      {children}
    </button>
  );
}

В DevTools:

<button
  class="_a1b2c"  <!-- минифицированный класс -->
  data-component="Button"  <!-- помогает найти компонент -->
  data-testid="button"  <!-- помогает идентифицировать -->
>

Теперь видишь, что это Button компонент, и можешь поискать файл Button.tsx.

4. Console API для отладки стилей

Скрипт в DevTools Console:

// Получить все стили элемента
const element = document.querySelector('[data-component="Button"]');
const styles = window.getComputedStyle(element);

console.log('Color:', styles.color);
console.log('Padding:', styles.padding);
console.log('Font size:', styles.fontSize);

// Все применённые классы
console.log('Classes:', element.className);

// Все стилевые правила для элемента
const rules = document.styleSheets;
for (let sheet of rules) {
  try {
    for (let rule of sheet.cssRules) {
      if (rule.selectorText && rule.selectorText.includes('a1b2c')) {
        console.log('Найдено правило:', rule.cssText);
      }
    }
  } catch (e) {
    // Cross-origin stylesheets
  }
}

5. Переменные CSS для production отладки

Вместо прямых значений используй CSS переменные:

/* Button.module.css */
:root {
  --button-color: blue;
  --button-padding: 10px;
  --button-border-radius: 4px;
}

.btn {
  color: var(--button-color);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
}

Преимущества:

• Легче менять стили в DevTools (меняешь переменную)
• Видишь значение сразу
• Можешь переопределить в Console

// В Console
document.documentElement.style.setProperty('--button-color', 'red');
// Все кнопки сразу становятся красными

6. Окружение с включённой отладкой

Создай отдельное окружение для отладки production стилей:

// .env.production-debug
NEXT_PUBLIC_DEBUG_STYLES=true

// Component.tsx
import styles from './Button.module.css';

const debugClassName = process.env.NEXT_PUBLIC_DEBUG_STYLES
  ? `${styles.btn} [Button.btn]` // Добавляем читаемый класс для отладки
  : styles.btn;

export function Button() {
  return <button className={debugClassName}>Клик</button>;
}

Результат в production-debug:

<button class="_a1b2c [Button.btn]">Клик</button>
<!-- Теперь видишь исходное имя класса даже в production -->

7. CSS-in-JS подход (Styled Components)

Альтернатива CSS Modules - Styled Components:

import styled from 'styled-components';

const StyledButton = styled.button`
  color: blue;
  padding: 10px;
  border-radius: 4px;
`;

export function Button() {
  return <StyledButton>Клик</StyledButton>;
}

Преимущества для отладки:

• Создаёт классы с читаемыми именами (sc-123abc)
• В DevTools видно точно где код
• Динамические стили видны в Console

// Можешь менять в Console
const button = document.querySelector('[class*="sc-"]');
button.style.color = 'red'; // Применится сразу

8. Логирование стилей при загрузке

Добавить логирование в процессе сборки:

// webpack.config.js plugin
class DebugCSSPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('DebugCSS', (compilation) => {
      compilation.hooks.finishModules.tap('DebugCSS', (modules) => {
        modules.forEach(module => {
          if (module.resource && module.resource.endsWith('.module.css')) {
            console.log(`Loaded: ${module.resource}`);
            console.log(`Classes:`, module.exports);
          }
        });
      });
    });
  }
}

9. Custom DevTools расширение

Создай расширение для Chrome DevTools:

// content.js
window.__DEBUG_CSS = {};

Document.querySelectorAll('[class*="_"]').forEach(el => {
  const className = el.className;
  const styles = window.getComputedStyle(el);
  window.__DEBUG_CSS[className] = {
    color: styles.color,
    padding: styles.padding,
    // ...
  };
});

console.log('CSS Debug:', window.__DEBUG_CSS);

В DevTools Console:

window.__DEBUG_CSS // Видишь все стили

10. Лучшие практики

Для облегчения отладки в production:

1. Используй source maps (хотя это увеличивает размер)
2. Добавляй data-атрибуты для идентификации
3. Используй CSS переменные для динамических значений
4. Документируй какие классы за что отвечают
5. Включай отладку в стейжинг окружении перед production
6. Используй Styled Components для более читаемого кода
7. Создавай отдельное production-debug окружение
8. Логируй стили при загрузке (в dev console)

Типичный сценарий отладки

1. Пользователь говорит "кнопка синяя вместо красной"
2. Открываешь DevTools -> Elements
3. Инспектируешь кнопку
4. Видишь класс "_a1b2c"
5. Если включены source maps -> видишь Button.module.css
6. Смотришь на applied styles
7. Нашёл проблему: color: blue вместо color: red
8. Проверяешь исходный файл Button.module.css
9. Видишь ошибку, исправляешь
10. Деплойишь

Заключение

Отладка CSS Modules в production - это комбинация нескольких подходов:

• Source maps для прямого доступа к исходным файлам
• Data-атрибуты для идентификации компонентов
• CSS переменные для динамического изменения
• DevTools для инспекции стилей
• Правильная архитектура для предотвращения проблем

Самый надёжный способ - включить source maps в production, но это требует больше бандвидта. Альтернатива - использовать Styled Components или Tailwind CSS, которые более отладчики дружественны.