Firebase Studio предлагает несколько способов отладки вашего приложения непосредственно из рабочей области. Для веб-приложений и приложений Flutter веб-консоль и Lighthouse интегрированы непосредственно в рабочую область. Приложения Flutter предлагают предварительный просмотр для Android и веб-приложений, позволяющий выборочно проверять и тестировать приложение во время написания кода.
Для большинства распространенных языков программирования также доступна более функциональная отладка с использованием точек останова, которая осуществляется через встроенную консоль отладки и может быть расширена с помощью расширений отладчика от OpenVSX . Для отладки кода веб-интерфейса (например, JavaScript) с использованием точек останова вы можете продолжать использовать встроенные инструменты разработчика вашего браузера, такие как инструменты разработчика Chrome .
Предварительный просмотр вашего приложения
Firebase Studio включает в себя предварительный просмотр приложений в рабочей области для веб-приложений (Chrome) и приложений Flutter (Android, Chrome). Предварительный просмотр для Android и Chrome поддерживает горячую перезагрузку и обновление, а также предлагает полные возможности эмулятора.
Чтобы узнать больше о предварительном просмотре Firebase Studio , см. раздел «Предварительный просмотр вашего приложения» .
Используйте встроенную веб-консоль для предварительного просмотра веб-страниц.
Встроенная веб-консоль позволяет диагностировать проблемы в приложении непосредственно из веб-предварительного просмотра. Доступ к веб-консоли можно получить в панели веб-предварительного просмотра Firebase Studio развернув панель внизу.
Обратите внимание, что эта функция является экспериментальной и не включена по умолчанию. Чтобы включить её, выполните следующие действия и поделитесь своим отзывом после того, как попробуете её:
Добавьте веб-консоль в свою рабочую область Firebase Studio :
- Откройте «Настройки» , нажав на кнопку или нажав
Ctrl + ,(в Windows/Linux/ChromeOS) илиCmd + ,(в MacOS). - Найдите параметр Firebase Studio : Web Dev Tools и включите его. Если вы редактируете файл
settings.jsonнапрямую, вы можете добавить"IDX.webDevTools": true. - Обновите окно браузера, чтобы перезагрузить рабочую область Firebase Studio .
- Откройте «Настройки» , нажав на кнопку или нажав
Откройте предварительный просмотр веб-версии в Firebase Studio : откройте палитру команд (
Cmd+Shift+Pна Mac илиCtrl+Shift+Pна ChromeOS, Windows или Linux) и выберите Firebase Studio : Show Web Preview .По умолчанию панель веб-консоли свернута в панели предварительного просмотра веб-страницы. Щелкните по панели или перетащите ее вверх, чтобы развернуть.
Панель веб-консоли в предварительной версии Firebase Studio работает аналогично другим консолям, например, той, что доступна в инструментах разработчика Chrome :
- В этом месте будут появляться сообщения об ошибках JavaScript и
console.logпо мере использования вашего приложения.- В случае ошибок и предупреждений вы также можете обратиться за помощью в Gemini , выбрав кнопку « Понять эту ошибку» справа от сообщения об ошибке.
- Вы можете выполнить произвольный JavaScript-код в контексте предварительного просмотра веб-страницы, используя подсказку внизу экрана.
Запустите Lighthouse для предварительного просмотра веб-страниц.
Lighthouse проводит аудит вашего приложения на основе выбранных вами категорий аудита и возвращает отчет с результатами и рекомендациями. Вы можете запускать отчеты Lighthouse непосредственно из веб-версии в Firebase Studio .
Откройте предварительный просмотр веб-версии в Firebase Studio : откройте палитру команд (
Cmd+Shift+Pна Mac илиCtrl+Shift+Pна ChromeOS, Windows или Linux), выберите Firebase Studio : Show Web Preview .Нажмите
Значок запуска Lighthouse находится на панели инструментов предварительного просмотра веб-страницы. 
В панели Lighthouse выберите нужные категории аудита. Вы можете выбрать отчеты по аудиту производительности , доступности , соответствия передовым практикам , SEO и производительности прогрессивных веб-приложений . Нажмите «Анализировать страницу» , чтобы сгенерировать отчеты.На формирование отчетов может потребоваться несколько минут.
После того как отчеты появятся на панели Lighthouse, вы можете просмотреть результаты по каждой категории аудита или переключаться между категориями аудита, щелкнув по оценке и названию категории.
Воспользуйтесь консолью отладки.
Firebase Studio включает в себя встроенную консоль отладки из Code OSS. Используйте эту консоль для отладки вашего приложения с помощью готовых отладчиков для большинства распространенных языков программирования или добавьте расширение для отладки из OpenVSX .
Для настройки процесса отладки вы также можете добавить файл .vscode/launch.json в свою рабочую область и указать пользовательские конфигурации запуска. Подробнее об использовании файлов конфигурации запуска для настройки отладки см. в разделе «Конфигурация отладки Visual Studio Code» .
Отладка с помощью Gemini
Вы можете использовать Gemini в Firebase для отладки кода с помощью чата в рабочей области Code или App Prototyping agent .
Хотя Gemini может писать за вас код, иногда он также может выдавать ошибки. При обнаружении ошибки он попытается ее исправить. Если вы обнаружите, что он не может решить проблему, исходя из сообщения об ошибке, вы можете попробовать некоторые из следующих методов:
Опишите проблему: В интерфейсе чата опишите возникшую проблему как можно яснее и лаконичнее. Хотя Gemini может иметь доступ к контексту, такому как сообщения об ошибках и журналы, он может не понимать всей ситуации. Описание поведения вместе с сообщением об ошибке поможет Gemini быстрее исправлять ошибки.
Задавайте конкретные вопросы: не бойтесь задавать Gemini прямые вопросы о вашем коде. Например: «Что может вызывать исключение NullPointerException в этой функции?» или «Как предотвратить это состояние гонки?»
Разбивайте сложные проблемы на части: если вы имеете дело со сложной проблемой, разбейте ее на более мелкие, управляемые части. Попросите Gemini помочь вам отладить каждую часть отдельно и продумайте проблемы шаг за шагом.
Используйте блоки кода: при публикации фрагментов кода используйте блоки кода, чтобы убедиться в правильном форматировании кода. Это облегчит Gemini чтение и понимание вашего кода.
Последовательно совершенствуйте и уточняйте: Близнецы не всегда могут предложить идеальное решение с первой попытки. Проанализируйте ответы, задайте уточняющие вопросы и предоставьте дополнительную информацию по мере необходимости.
Избегайте зацикливания на подсказках: если Близнецы застряли в цикле или не могут ответить на ваш вопрос, попробуйте переформулировать подсказку или предоставить дополнительный контекст. Иногда простое переформулирование вопроса может помочь Близнецам понять, о чем вы спрашиваете.
Если изменение формулировки запроса не решает проблему зацикливания, попробуйте следующие методы:
Начните новый чат: Если вы используете Gemini в чате Firebase в своем рабочем пространстве Code , начните новую сессию чата, чтобы сбросить контекст Gemini . Это поможет избежать любых недоразумений или предположений, которые Gemini мог допустить в предыдущем разговоре.
Приведите контрпримеры: если Близнецы делают неверные предположения, приведите контрпримеры, чтобы помочь им понять правильное поведение.