Bun использует протокол инспектора WebKit. Для включения отладки при запуске кода с Bun используйте флаг --inspect. Для демонстрации рассмотрим следующий простой веб-сервер.

Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("Hello, world!");
  },
});

---

Запустим этот файл с флагом --inspect.

Это автоматически запускает WebSocket-сервер на доступном порту, который можно использовать для интроспекции запущенного процесса Bun. Различные инструменты отладки могут подключаться к этому серверу для обеспечения интерактивной отладки.

Bun размещает веб-отладчик на debug.bun.sh. Это модифицированная версия Web Inspector Interface от WebKit, которая будет знакома пользователям Safari.

bun --inspect server.ts

------------------ Bun Inspector ------------------
Прослушивание:
  ws://localhost:6499/0tqxs9exrgrm

Проверка в браузере:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

---

Откройте предоставленный URL debug.bun.sh в браузере для начала сеанса отладки. Из этого интерфейса вы сможете просматривать исходный код запущенного файла, устанавливать точки останова и выполнять код с помощью встроенной консоли.

---

Установим точку останова. Перейдите на вкладку Sources; вы должны увидеть код из предыдущего примера. Щёлкните на номере строки 3, чтобы установить точку останова на нашем операторе console.log(req.url).

---

Затем посетите http://localhost:3000 в вашем веб-браузере. Это отправит HTTP-запрос на наш локальный веб-сервер. Будет казаться, что страница не загружается. Почему? Потому что программа приостановила выполнение в точке останова, которую мы установили ранее.

Обратите внимание, как изменился пользовательский интерфейс.

---

В этот момент мы можем сделать многое для интроспекции текущей среды выполнения. Мы можем использовать консоль внизу для выполнения произвольного кода в контексте программы, с полным доступом к переменным в области видимости в нашей точке останова.

---

С правой стороны панели Sources мы можем увидеть все локальные переменные, находящиеся в области видимости, и углубиться для просмотра их свойств и методов. Здесь мы инспектируем переменную req.

---

В верхнем левом углу панели Sources мы можем управлять выполнением программы.

---

Вот шпаргалка, объясняющая функции кнопок управления потоком.

• Продолжить выполнение скрипта — продолжить выполнение программы до следующей точки останова или исключения.
• Step over — программа продолжится до следующей строки.
• Step into — если текущий оператор содержит вызов функции, отладчик «войдёт» в вызванную функцию.
• Step out — если текущий оператор является вызовом функции, отладчик завершит выполнение вызова, затем «выйдет» из функции в место, где она была вызвана.