DevTools

deno desktop предоставляет единый DevTools: один сеанс Chrome DevTools, подключающийся к обоим изолятам V8 внутри вашего приложения: среде выполнения Deno (обработчикам, привязкам и коду верхнего уровня) и рендереру (JavaScript на стороне webview). Один список выбора в Console, одна панель Sources с обоими потоками и один сеанс отладки.

Запуск сеанса инспектора

deno desktop --inspect main.ts

Затем откройте chrome://inspect (или edge://inspect). Приложение появится в списке целей. Нажмите «inspect», и DevTools откроется с подключенными обоими изолятами.

Поведение при запуске управляется тремя флагами:

Адрес прослушивания по умолчанию — 127.0.0.1:9229; укажите --inspect=host:port, чтобы переопределить его.

deno desktop --inspect=127.0.0.1:9230 main.ts
deno desktop --inspect-brk main.ts
deno desktop --inspect-wait main.ts

Что отображается в DevTools

После подключения в интерфейсе DevTools отображаются:

• Sources: оба изолята отображаются на боковой панели Threads. Устанавливайте точки останова, выполняйте пошаговую отладку и проверяйте стек вызовов в каждом из них.
• Console: список выбора цели в верхней части панели позволяет переключаться между Renderer (webview) и Deno (средой выполнения). Вывод в Console для каждого изолята помечен соответствующей меткой.
• Network: запросы, исходящие из webview (его fetch, XMLHttpRequest, загрузка изображений). Запросы, отправленные со стороны Deno через fetch, сейчас здесь не отображаются.
• Performance / Memory: создавайте профили для каждого изолята отдельно; переключайтесь между ними с помощью того же списка выбора цели.

Карты исходного кода учитываются с обеих сторон. Файлы TypeScript в среде выполнения Deno отображаются с исходными номерами строк; JavaScript webview, собранный в пакет, связывается с исходным кодом, если сборщик создает карты.

Сеансы только для рендерера или только для Deno

Чтобы отлаживать только одну сторону, используйте конечные точки для отдельных целей из списка целей DevTools или вызовите Deno.BrowserWindow.openDevtools() из своего кода:

win.openDevtools(); // both isolates (default)
win.openDevtools({ deno: false }); // renderer only
win.openDevtools({ renderer: false }); // Deno runtime only

openDevtools() открывает окно DevTools внутри приложения. Это удобно, если вы хотите выпустить отладочную сборку со встроенной инспекцией и не использовать chrome://inspect.

Как это работает

deno desktop запускает мультиплексор CDP (Chrome DevTools Protocol), объединяющий оба инспектора V8:

             ┌──────────────────────────────────┐
DevTools     │  CDP Multiplexer (Deno CLI)      │
(one ws)  ◄─►│  /json/version  /json/list       │
             │  /unified  /deno  /cef           │
             └─────┬─────────────────┬──────────┘
                   │                 │
           Deno V8 inspector   Renderer V8 inspector
           (deno_core CDP)     (CEF remote-debugging)

Мультиплексор представляется как одна «цель браузера» CDP с двумя дочерними целями: целью «page» для рендерера и целью «worker» для среды выполнения Deno. Встроенная поддержка нескольких целей в DevTools делает все остальное — используется тот же механизм, что и для отладки iframe и worker в открытом вебе.

Изменения протокола CDP, форк DevTools и модификации интерфейса не требуются.

Поддержка бэкендов

Единый DevTools реализован для бэкенда CEF. Для других бэкендов:

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

Отладка на границе привязки

Когда вызов bindings.foo() со стороны webview обращается к обработчику на стороне Deno, обе стороны сейчас отображаются как отдельные трассировки стека. Корреляция между контекстами выполнения (автоматическое объединение вызова рендерера со стеком обработчика Deno) запланирована на будущее. Пока что можно вручную переключать потоки на панели Sources, чтобы отслеживать выполнение.

Практический подход: во время разработки добавляйте к обеим сторонам привязки совпадающие сообщения в Console:

win.bind("readSettings", async () => {
  console.log("[bindings:readSettings] enter");
  const data = await readSettings();
  console.log("[bindings:readSettings] exit");
  return data;
});

В единой Console обе строки отображаются для цели «Deno» и сопоставляются с вызовом bindings.readSettings() рендерера, видимым для цели «Renderer».

Известные ограничения

• Бэкенд WebView не интегрирован с DevTools.
• Панель Network рендерера не отображает вызовы fetch на стороне Deno.
• Пошаговый переход между контекстами выполнения (нажатие на вызов bindings.foo() с переходом к обработчику Deno) пока не реализован; переключайте потоки вручную.
• --inspect-brk приостанавливает оба изолята перед навигацией. Каждый изолят возобновляется независимо, поэтому может потребоваться нажать «Resume» для каждого потока.