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

Project IDX позволяет предварительно просмотреть свою работу, визуализируя приложение в реальном времени вместе с редактором кода. Предварительный просмотр веб-страниц IDX отображает встроенный фрейм (iFrame) веб-сервера приложения и облачного эмулятора Android.

Включите и настройте среду предварительной версии

Чтобы просмотреть свое приложение в рабочей области, необходимо настроить среду предварительного просмотра.

  1. Включите предварительный просмотр в файле конфигурации .idx/dev.nix . IDX автоматически создает этот файл при создании нового рабочего пространства и включает все применимые среды предварительного просмотра на основе выбранного вами шаблона. Если файла нет в вашем репозитории кода IDX, создайте его. Установите для атрибута idx.previews значение true и добавьте атрибуты конфигурации, как показано в следующем примере:

    { pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

    Полный список атрибутов Nix в IDX см. в разделе Nix + IDX .

  2. Перестройте свою среду:

    • Запустите команду Project IDX: Hard Restart из палитры команд ( Cmd+Shift+P / Ctrl+Shift+P ).
    • Нажмите «Перестроить среду» в уведомлении об обновлении конфигурации среды .

    Когда вы перестраиваете среду после изменения файла dev.nix , в вашем рабочем пространстве появляется панель предварительного просмотра с вкладками Android и Интернет , в зависимости от того, что вы включили. Однако вам, возможно, придется подождать некоторое время, пока среда восстановится. Попробуйте закрыть рабочую область, а затем снова открыть ее с панели управления IDX .

Используйте предварительный просмотр приложений

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

Обновите предварительный просмотр для Интернета и Android.

IDX подключается к функциям горячей перезагрузки базовых платформ (таким как npm run start и flutter hot-reload ), чтобы обеспечить вам жесткий внутренний цикл разработки. В этом разделе описаны различные типы перезагрузок, которые помогут вам устранить неполадки, если поведение IDX по умолчанию не подходит для вашего варианта использования.

  • Автоматическая горячая перезагрузка : горячая перезагрузка выполняется автоматически при сохранении файла. Горячая перезагрузка, которую иногда называют горячей заменой модуля (или HMR), обновляет ваше приложение без перезагрузки страницы (для веб-приложений) или без перезапуска или переустановки приложения (для эмуляторов). Этот подход отлично подходит для сохранения активного состояния вашего приложения, но иногда может работать не так, как предполагалось.

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

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

Все параметры перезагрузки доступны либо с помощью панели инструментов предварительного просмотра, либо с помощью палитры команд ( Cmd+Shift+P на Mac или Ctrl+Shift+P на ChromeOS, Windows или Linux) в категории IDX .

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

  1. Нажмите значок перезагрузки , чтобы обновить страницу. Это вызывает полную перезагрузку. Для другого типа обновления щелкните стрелку рядом со значком перезагрузки, чтобы развернуть меню.

  2. Выберите в меню нужный вариант обновления: «Горячая перезагрузка» , «Полная перезагрузка» или «Жесткий перезапуск» .

    Панель инструментов предварительного просмотра находится в верхней части панели предварительного просмотра.

Настройте автосохранение и горячую перезагрузку.

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

Настроить автосохранение

  1. Откройте проект IDX.
  2. Нажмите значок «Настройки» . Появится окно настроек.
  3. Поиск файлов: автоматическое сохранение и убедитесь, что в поле установлено значение «afterDelay».
  4. Поиск файлов: задержка автоматического сохранения . Появится поле «Задержка автосохранения».
  5. Введите новый интервал задержки автосохранения, выраженный в миллисекундах. Изменения в вашей работе теперь автоматически сохраняются в соответствии с новой настройкой задержки автосохранения.

Отключить автосохранение

  1. Откройте проект IDX.
  2. Нажмите значок «Настройки» . Появится окно настроек.
  3. Поиск файлов: автоматическое сохранение .
  4. Нажмите на раскрывающийся список и выберите «Выключить» . Автосохранение теперь отключено.