Breakpoints и debugging

Основы breakpoints

Breakpoints в Fresh используются для остановки выполнения кода в конкретной точке, что позволяет анализировать состояние приложения на момент остановки. В отличие от традиционных SPA-фреймворков, Fresh использует серверный рендеринг (SSR) и минимальный клиентский JavaScript, поэтому работа с breakpoints охватывает как серверный, так и клиентский код.

Ключевые моменты:

  • Серверные breakpoints применяются к обработчикам маршрутов и серверным функциям. Они позволяют исследовать поток данных, обработку запросов и генерацию HTML.
  • Клиентские breakpoints используются в скриптах, загружаемых на фронтенд. Они помогают отлаживать события DOM, взаимодействие с API и динамическое обновление элементов.

В среде Deno, на которой базируется Fresh, breakpoints можно устанавливать через встроенный отладчик deno run --inspect или подключаясь через Chrome DevTools.

Установка breakpoints

  1. В VS Code:

    • Установить конфигурацию запуска для Deno:

      {
  "name": "Run Fresh Server",
  "type": "pwa-node",
  "request": "launch",
  "program": "${workspaceFolder}/main.ts",
  "runtimeExecutable": "deno",
  "runtimeArgs": ["run", "--inspect-brk", "--allow-net", "--allow-read", "main.ts"],
  "attachSimplePort": 9229
}

    • Вставить breakpoint на нужной строке в серверном обработчике или компоненте.

  2. Через DevTools:

    • Запустить Fresh с флагом --inspect.
    • Открыть chrome://inspect и подключиться к Node-подобной среде Deno.
    • Перейти к нужному файлу и установить breakpoint.

Отладка SSR-компонентов

Fresh использует концепцию islands architecture, где интерактивные компоненты изолированы. Отладка SSR-компонентов требует понимания жизненного цикла рендеринга:

  • handler маршрута — точка входа, где формируются props для компонентов.
  • render компонент — синхронная функция, генерирующая HTML.
  • Breakpoints в этих местах позволяют проверить корректность данных и работу шаблонов.

Пример:

export const handler: Handlers = {
  GET(req, ctx) {
    const data = fetchData(); // breakpoint здесь позволяет проверить data
    return ctx.render({ data });
  },
};

Установка breakpoint на строке const data = fetchData(); позволяет проверить содержимое data перед передачей в компонент.

Отладка клиентских компонентов

Клиентские компоненты в Fresh подключаются с помощью директивы client.ts. Их отладка аналогична стандартному фронтенд-отлаживанию:

  • Подключение DevTools к браузеру.
  • Breakpoints в методах жизненного цикла компонента (onMount, onCleanup).
  • Логирование и инспекция props, состояний и событий DOM.

Пример клиентского компонента:

/** @jsx h */
import { h } from "preact";
import { useEffect, useState } from "preact/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // breakpoint здесь помогает отследить initial render
    console.log("Mounted with count", count);
  }, []);

  return (
    <button onCl ick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Breakpoints в useEffect позволяют контролировать поведение при монтировании компонента и отслеживать изменения состояния.

Логирование и инспекция

Даже при наличии breakpoints, логирование остаётся важным инструментом:

  • console.log, console.error, console.table для проверки структуры данных.
  • Deno.inspect() для глубокого анализа объектов.
  • Использование DevTools для просмотра стеков вызовов и переменных.

Советы по эффективной отладке

  • Минимизировать область остановки — ставить breakpoints только в критических местах.
  • Использовать conditional breakpoints — они активируются только при выполнении определённого условия.
  • Проверять SSR и клиентский код отдельно — ошибки часто возникают на границе этих двух слоёв.
  • Следить за асинхронными вызовами — промисы и fetch-запросы могут пропустить обычный breakpoint, поэтому стоит использовать await и асинхронные точки остановки.

Отладка маршрутов и API

Fresh позволяет создавать API-маршруты через обработчики. Breakpoints здесь помогают:

  • Проверить корректность данных запроса (req).
  • Проследить поток выполнения логики обработки.
  • Убедиться в правильности формируемого ответа (Response).

Пример:

export const handler: Handlers = {
  POST(req) {
    const body = await req.json(); // breakpoint здесь
    if (!body.name) throw new Error("Name missing");
    return new Response(JSON.stringify({ success: true }));
  },
};

В этом случае breakpoint позволяет увидеть содержимое body и отследить возможные ошибки до формирования ответа.

Инструменты интеграции

Fresh совместим с большинством стандартных инструментов отладки:

  • VS Code Debugger.
  • Chrome DevTools.
  • Deno Inspector CLI.
  • Локальные логи через console и Deno.writeTextFileSync.

Эффективное использование breakpoints в сочетании с логированием и инспекцией данных обеспечивает полное понимание работы приложения и позволяет быстро находить ошибки как на серверной, так и на клиентской стороне.

Оглавление