1. Inicio
  2. Cómo Empezar
  3. Modo de vista previa
  1. Inicio
  2. Usar Blocs
  3. Interfaz
  4. Modo de vista previa

Modo de vista previa

Aunque Blocs ofrece una representación muy precisa de su sitio final tal como lo diseña, hay ocasiones en las que es posible que deba obtener una vista previa rápida de su sitio para verificar y probar otros aspectos del diseño, como interacciones, FX de desplazamiento y animaciones. Blocs tiene varias opciones de vista previa integradas que están diseñadas para ayudarlo a probar su sitio de una manera más natural y completa.

Consejo para principiantes

Modo de vista previa en Blocs no solo le permite obtener una vista previa de HTML localmente, sino que también admite la vista previa de PHP. Siempre que una página tenga la tipo de archivo establecido en PHP en el configuración de página, la vista previa mostrará cualquier código PHP agregado a través del Widget de código , en tiempo real, del progreso de cada afiliado.

En la vista previa de la aplicación

La vista previa en la aplicación le permite obtener una vista previa de su sitio como lo haría en un navegador web, sin tener que salir de la pantalla principal. Blocs solicitud. Para ingresar al modo de vista previa, simplemente click izquierdo el botón de reproducción ubicado a la derecha del control de punto de interrupción, o alternativamente con el atajo de teclado ⌃V.

Cambio de puntos de interrupción

Además del modo de diseño, el modo de vista previa también tiene acceso a la controles de punto de interrupción. Estos controles se pueden usar para cambiar rápida y fácilmente entre diferentes tamaños de pantalla, con el fin de verificar las características de respuesta de su sitio.

Herramientas de desarrollo

La vista previa de la aplicación también le brinda acceso a las potentes herramientas de inspección para desarrolladores de WebKit. Las herramientas de inspección son una excelente manera de inspeccionar el código de su sitio y depurar cualquier problema potencial que esté encontrando. Se puede acceder a ellos usando el botón de menú en la parte superior izquierda del marco de vista previa.

O alternativamente simplemente clic derecho cualquier elemento en una página (mientras está en modo de vista previa) y seleccionando Inspeccionar.

Vista previa en el navegador

Además de en la vista previa de la aplicación, Blocs también le permite obtener una vista previa rápida de su sitio con cualquiera de los navegadores que haya instalado en su Mac. Para obtener una vista previa de su sitio en un navegador, simplemente haga clic derecho el botón de vista previa y seleccione un navegador en el menú emergente.

Puede leer más sobre la vista previa en los navegadores. esta página.

¿Problemas?

Si tiene problemas con el modo de vista previa o simplemente no funciona, le recomendamos leer este guía para resolver problemas.

Vista previa de la red local

La Blocs También se puede acceder al servidor de vista previa desde cualquier dispositivo en la misma red que su Mac. Cuando está en modo de vista previa, hay un botón con un antena símbolo ubicado en la parte superior izquierda del marco principal de la aplicación. Al hacer clic en este botón se abrirá un menú emergente con dos opciones.

Vista previa de caída aérea

La primera opción le permitirá compartir rápida y fácilmente la URL de vista previa con otros dispositivos en la misma red local a través de Air Drop. Las URL que se comparten mediante Air Drop se abren automáticamente en el navegador web del dispositivo receptor.

¿Problemas?

Si encuentra que las opciones de Air Drop no están disponibles o su dispositivo no aparece como disponible, tenemos esta guía dedicada a la solución de problemas eso puede ayudarte a resolver el problema.

Copiar URL de vista previa

El segundo botón copiará la URL de la red local al portapapeles de su Mac. Ingresar esta URL en un navegador web en cualquier dispositivo que esté conectado a la misma red que su Mac le permitirá obtener una vista previa y probar su sitio en el dispositivo real.

Actualizado el 12 de diciembre de 2023

¿Le resultó útil este artículo?

Artículos Relacionados