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

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. Нажмите на раскрывающийся список и выберите «Выключить» . Автосохранение теперь отключено.