Configura espacios de trabajo para guardar los cambios en los archivos fuente

Kayce Basques

Sofia Emelianova

Configura un lugar de trabajo para guardar los cambios que realices en las Herramientas para desarrolladores en los archivos fuente de tu computadora. Puedes conectar automáticamente una carpeta del espacio de trabajo a las Herramientas para desarrolladores entregando un archivo de configuración, o bien puedes agregar manualmente una ubicación del espacio de trabajo en el panel Fuentes.

Descripción general

Una conexión automática (o manual) a una carpeta del espacio de trabajo te permite guardar un cambio que realices en las Herramientas para desarrolladores en una copia local del mismo archivo en tu computadora. Por ejemplo, supongamos lo siguiente:

• Tienes el código fuente de tu sitio en tu computadora.
• Ejecutas un servidor web local desde el directorio del código fuente, de modo que se pueda acceder al sitio en localhost:PORT y que también entregue un archivo JSON simple con metadatos (se describe más adelante).
• Tienes localhost:PORT abierto en Google Chrome y estás usando las Herramientas para desarrolladores para cambiar el CSS del sitio.

Cuando se conecta una carpeta del espacio de trabajo, los cambios que realizas en los archivos CSS, HTML y JavaScript en el panel Fuentes se guardan en el código fuente de tu computadora. Sin embargo, las Herramientas para desarrolladores no guardan los cambios que realizas en el DOM en el panel Elementos.

Además, las Herramientas para desarrolladores suelen poder volver a asignar el código optimizado al código fuente original con la ayuda de los mapas de orígenes.

Genera metadatos para una conexión

Para permitir que DevTools descubra tu carpeta del lugar de trabajo automáticamente, genera un UUID aleatorio de la versión 4 y colócalo en el siguiente archivo JSON:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Luego, coloca el archivo JSON en path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Por último, ejecuta tu servidor HTTP local y asegúrate de que también entregue el archivo JSON.

Como alternativa, puedes omitir este paso y configurar manualmente una conexión de carpeta.

Cómo conectar una carpeta del espacio de trabajo

Nota: En este paso y en los siguientes, se usa la demostración de carpetas automáticas del espacio de trabajo para mostrar la función.

Para conectar una carpeta, haz lo siguiente:

1. En Chrome, navega a tu página alojada de forma local (en este ejemplo, en localhost:8000) y abre las Herramientas para desarrolladores.

2. En Fuentes > Espacio de trabajo, haz clic en Conectar junto a tu carpeta.

   

3. Cuando se te solicite, haz clic en Editar archivos para permitir que las Herramientas para desarrolladores accedan a tu carpeta.

   

4. Una vez que se conecte, podrás abrir la carpeta en la pestaña Espacios de trabajo.

   

En la pestaña Workspace, verás un punto verde junto a los archivos HTML, CSS y JavaScript. Estos puntos verdes significan que las Herramientas para desarrolladores establecieron una asignación entre los recursos de red de la página y los archivos de la carpeta.

Guarda un cambio en la carpeta de origen

Puedes guardar los cambios en cualquier archivo CSS, HTML y JavaScript de la carpeta del espacio de trabajo conectado.

Guarda los cambios en el CSS

Sugerencia: Con una carpeta del espacio de trabajo conectada, el panel de asistencia de IA puede guardar automáticamente los cambios de CSS en tus fuentes.

Para guardar los cambios en el CSS, haz lo siguiente:

1. Abre un archivo CSS de la carpeta del espacio de trabajo conectado en Fuentes > Espacios de trabajo.

2. Realiza un cambio en tu CSS.

   Nota: Los cambios se aplican a la página publicada, pero no a la fuente.

3. Guarda el cambio, por ejemplo, presionando Ctrl/Cmd + S, y observa el cambio aplicado en el archivo de origen. En el panel Fuentes, verás un punto verde junto al nombre del archivo.

   Nota: No es necesario que vuelvas a cargar la página para aplicar y guardar los cambios de CSS.

Para conocer el flujo de trabajo, mira el video:

Guarda los cambios en el HTML.

Para guardar los cambios en HTML, haz lo siguiente:

1. Abre un archivo HTML de la carpeta de tu espacio de trabajo conectado en Fuentes > Espacios de trabajo.

2. Realiza un cambio en tu HTML.

   Nota: Los cambios aún no se aplican a la página publicada ni a la fuente.

3. Guarda el cambio, por ejemplo, presionando Ctrl/Cmd + S, y observa el cambio aplicado en el archivo de origen. En el panel Fuentes, verás un punto verde junto al nombre del archivo.

4. Vuelve a cargar la página para que se aplique el cambio.

Para conocer el flujo de trabajo, mira el video:

Nota: Puedes aplicar y guardar un cambio de HTML desde el panel Sources, pero no desde el panel Elements.

¿Por qué no puedes cambiar el código HTML desde el panel Elementos?

• El árbol de nodos que ves en el panel Elementos representa el DOM de la página.
• Para mostrar una página, un navegador recupera el código HTML de la red, lo analiza y, luego, lo convierte en un árbol de nodos del DOM.
• Si la página tiene JavaScript, este puede agregar, borrar o cambiar nodos del DOM. El CSS también puede cambiar el DOM con la propiedad content.
• Con el tiempo, el navegador usa el DOM para determinar qué contenido debe presentar a los usuarios del navegador.
• Por lo tanto, el estado final de la página que ven los usuarios puede ser muy diferente del HTML que recuperó el navegador.
• Esto dificulta que las Herramientas para desarrolladores resuelvan dónde se debe guardar un cambio realizado en el panel Elementos, ya que el DOM se ve afectado por HTML, JavaScript y CSS.

En resumen, el árbol del DOM !== HTML.

Guarda los cambios en JavaScript

Para guardar los cambios en JavaScript, haz lo siguiente:

1. Abre un archivo JavaScript de la carpeta de tu espacio de trabajo conectado en Fuentes > Espacios de trabajo.

2. Realiza un cambio en tu código de JavaScript.

   Nota: Los cambios aún no se aplican a la página publicada ni a la fuente.

3. Guarda el cambio, por ejemplo, presionando Ctrl/Cmd + S, y observa el cambio aplicado en el archivo de origen. En el panel Fuentes, verás un punto verde junto al nombre del archivo.

4. Si tu servidor HTTP local escucha los cambios en los archivos fuente activos y vuelve a cargar la página automáticamente, verás los cambios aplicados una vez que los guardes en las Herramientas para desarrolladores. De lo contrario, vuelve a implementar tu servidor local.

Para conocer el flujo de trabajo, mira el video:

Sugerencia: Cuando cambias JavaScript, a veces necesitas acceder a otros paneles, como el panel Elementos o Consola. Para ello, puedes usar el panel lateral y reordenar los paneles.

Quita una conexión de carpeta del espacio de trabajo

Para quitar una conexión de carpeta del espacio de trabajo, en Fuentes > Espacio de trabajo, haz clic con el botón derecho en la carpeta, selecciona Quitar del espacio de trabajo en el menú desplegable y haz clic en Quitar.

Nota: Si cambias o borras el UUID de la carpeta en el archivo JSON de metadatos, también se desconectará la carpeta.

Cómo conectar manualmente una carpeta del espacio de trabajo

1. Abre las Herramientas para desarrolladores en tu página alojada de forma local.

2. En Fuentes > Espacio de trabajo, haz clic en Agregar carpeta manualmente. Luego, selecciona una carpeta con tus archivos de origen.

   

   Nota: También puedes arrastrar la carpeta al panel Sources.

3. Luego, sigue los pasos 3 y 4 de Cómo conectar una carpeta del espacio de trabajo.

Limitaciones

Si usas un framework moderno, es probable que transforme tu código fuente de un formato que sea fácil de mantener a un formato optimizado para ejecutarse lo más rápido posible. Por lo general, una conexión de carpeta del espacio de trabajo puede volver a asignar el código optimizado al código fuente original con la ayuda de los mapas de origen.

La comunidad de Herramientas para desarrolladores trabaja para admitir las funciones que proporcionan los mapas de fuentes en una variedad de frameworks y herramientas. Si tienes problemas cuando usas un espacio de trabajo con el framework que elegiste o si logras que funcione después de realizar una configuración personalizada, inicia un hilo en la lista de distribución o haz una pregunta en Stack Overflow para compartir tus conocimientos con el resto de la comunidad de Herramientas para desarrolladores.

Próximos pasos

Puedes administrar todas las carpetas ya configuradas en Configuración > Espacio de trabajo.

A continuación, aprende a usar las Herramientas para desarrolladores para cambiar CSS y depurar JavaScript.

Consulta también

Las anulaciones locales son otra función de Herramientas para desarrolladores similar que te permite simular contenido web o encabezados de la solicitud. De esta manera, puedes experimentar libremente con los cambios en una página sin esperar a que el backend se ponga al día. Con las anulaciones locales, los cambios persisten en las cargas de página, pero no se asignan al código fuente de tu página.