Отладка приложения в Firebase Studio,Отладка приложения в Firebase Studio,Отладка приложения в Firebase Studio,Отладка приложения в Firebase Studio

Firebase Studio предлагает несколько различных способов отладки вашего приложения прямо из рабочей области. Для веб-приложений и приложений Flutter веб-консоль и Lighthouse напрямую интегрированы в рабочую область. Приложения Flutter предлагают предварительный просмотр для Android и в Интернете для выборочной проверки и тестирования вашего приложения во время написания кода.

Более широкая отладка на основе точек останова также доступна для большинства распространенных языков через встроенную консоль отладки и расширяется с помощью расширений отладчика из OpenVSX . Для отладки вашего внешнего веб-кода (например, JavaScript) на основе точек останова вы можете продолжать использовать встроенные инструменты разработчика вашего браузера, такие как Chrome DevTools .

Предварительный просмотр вашего приложения

Firebase Studio включает предварительный просмотр веб-приложений (Chrome) и приложений Flutter (Android, Chrome) в рабочем пространстве . Предварительные версии Android и Chrome поддерживают горячую перезагрузку и горячее обновление, а также предлагают полные возможности эмулятора.

Дополнительные сведения о предварительном просмотре Firebase Studio см. в разделе Предварительный просмотр вашего приложения .

Используйте встроенную веб-консоль для предварительного просмотра в Интернете.

Минимизированная консольная планка в веб -сайте Firebase Studio предварительный просмотр

Встроенная веб-консоль помогает диагностировать проблемы в вашем приложении непосредственно из предварительной версии в Интернете. Вы можете получить доступ к веб-консоли на панели веб-предварительного просмотра Firebase Studio , развернув панель внизу.

Обратите внимание, что эта функция является экспериментальной и по умолчанию не включена. Чтобы включить его, выполните следующие действия и поделитесь своим отзывом после того, как опробуете его:

  1. Добавьте веб-консоль в рабочую область Firebase Studio :

    1. Откройте «Настройки» , щелкнув или нажав Ctrl + , (в Windows/Linux/ChromeOS) или Cmd + , (в MacOS).
    2. Найдите параметр Firebase Studio : Web Dev Tools и включите его. Если вы редактируете файл settings.json напрямую, вы можете добавить "IDX.webDevTools": true .
    3. Обновите окно браузера, чтобы перезагрузить рабочую область Firebase Studio .
  2. Откройте веб-предварительный просмотр в Firebase Studio : откройте палитру команд ( Cmd+Shift+P на Mac или Ctrl+Shift+P в ChromeOS, Windows или Linux) и выберите Firebase Studio : Показать веб-предварительный просмотр .

  3. По умолчанию панель веб-консоли свернута внутри панели веб-предварительного просмотра. Нажмите на панель или перетащите ее вверх, чтобы развернуть.

Панель веб-консоли в веб-предварительном просмотре Firebase Studio работает аналогично другим консолям, например той, которая доступна в Chrome DevTools :

  • Ошибки JavaScript и операторы console.log будут появляться там по мере использования приложения.
    • В случае ошибок и предупреждений вы также можете получить помощь от Gemini , нажав кнопку « Понять эту ошибку» справа от сообщения об ошибке.
  • Вы можете оценить произвольный JavaScript в контексте предварительного просмотра в Интернете, используя панель подсказок внизу.

Запустите Lighthouse для предварительного просмотра в Интернете

Lighthouse проверяет ваше приложение на основе выбранных вами категорий аудита и возвращает отчет с выводами и предложениями. Вы можете запускать отчеты Lighthouse непосредственно из веб-предварительного просмотра в Firebase Studio .

  1. Откройте веб-предварительный просмотр в Firebase Studio : откройте палитру команд ( Cmd+Shift+P на Mac или Ctrl+Shift+P в ChromeOS, Windows или Linux) и выберите Firebase Studio : Показать веб-предварительный просмотр .

  2. Нажмите кнопку изображение проверки скорости икона Запустите значок Lighthouse на панели инструментов веб-предварительного просмотра.

  3. изображение панели маяка в Firebase Студия На панели «Маяк» выберите нужные категории аудита. Вы можете выбирать из отчетов по аудиту производительности , доступности , соответствия передовым практикам , SEO и производительности прогрессивных веб-приложений . Нажмите «Страница анализа» , чтобы создать отчеты.

    Создание отчетов может занять несколько минут.

  4. После того как отчеты появятся на панели Lighthouse, вы сможете просмотреть результаты для каждой категории аудита или переключаться между категориями аудита, щелкая оценку и название категории.

Используйте консоль отладки

Firebase Studio включает встроенную консоль отладки из Code OSS. Используйте эту консоль для отладки приложения с помощью готовых отладчиков для большинства распространенных языков программирования или добавьте расширение отладки из OpenVSX .

Чтобы настроить процесс отладки, вы также можете добавить файл .vscode/launch.json в свою рабочую область и указать пользовательские конфигурации запуска. Дополнительные сведения об использовании файлов конфигурации запуска для настройки отладки см. в разделе Конфигурация отладки кода Visual Studio .

Отладка с помощью Gemini

Вы можете использовать Gemini в Firebase для отладки кода с помощью чата в рабочей области Code или App Prototyping agent .

Хотя Gemini может писать за вас код, иногда он также может выдавать ошибки. При обнаружении ошибки он попытается ее исправить. Если вы обнаружите, что не удается решить проблему, учитывая сообщение об ошибке, вы можете попробовать некоторые из следующих методов:

  • Опишите проблему. В интерфейсе чата как можно более четко и кратко опишите проблему, с которой вы столкнулись. Хотя Gemini может иметь доступ к контексту, например к сообщениям об ошибках и журналам, он может не понимать весь контекст. Описание поведения вместе с сообщением об ошибке может помочь Gemini быстрее исправить ошибки.

  • Задавайте конкретные вопросы: не бойтесь задавать Gemini прямые вопросы о вашем коде. Например: «Что может быть причиной исключения нулевого указателя в этой функции?» или «Как я могу предотвратить это состояние гонки?»

  • Разбейте сложные проблемы. Если вы столкнулись со сложной проблемой, разбейте ее на более мелкие, более управляемые части. Попросите Gemini помочь вам отладить каждую часть отдельно и продумать проблемы шаг за шагом.

  • Используйте ограничения кода. При совместном использовании фрагментов кода используйте ограничения кода, чтобы гарантировать правильное форматирование кода. Это облегчает Gemini чтение и понимание вашего кода.

  • Итерируйте и совершенствуйте: Близнецы не всегда могут предложить идеальное решение с первой попытки. Просмотрите ответы, задайте уточняющие вопросы и при необходимости предоставьте дополнительную информацию.

  • Избегайте зацикливания подсказок: если Близнецы зацикливаются или не могут ответить на ваш вопрос, попробуйте перефразировать подсказку или предоставить дополнительный контекст. Иногда простое изменение формулировки вопроса может помочь Близнецам понять, о чем вы спрашиваете.

    Если перефразирование вашего приглашения не устраняет петлю, попробуйте следующие методы:

    • Начните новый чат. Если вы используете Gemini в чате Firebase в рабочей области Code , начните новый сеанс чата, чтобы сбросить контекст Gemini . Это может помочь освободиться от любых заблуждений или предположений, которые Близнецы могли сделать в предыдущем разговоре.

    • Приведите контрпримеры. Если Близнецы делают неверные предположения, приведите контрпримеры, которые помогут им понять правильное поведение.