Cómo editar y guardar archivos en un espacio de trabajo

Kayce Basques

Sofia Emelianova

En este instructivo, se ofrece la oportunidad de practicar la configuración de un lugar de trabajo para que puedas usarlo en tus propios proyectos. Workspace te permite guardar los cambios que realizas dentro de Herramientas para desarrolladores en el código fuente que se almacena en tu computadora.

Precaución: Antes de comenzar este instructivo, debes saber cómo hacer lo siguiente:

• Usar HTML, CSS y JavaScript para crear una página web
• Usa las Herramientas para desarrolladores para realizar cambios básicos en CSS.
• Ejecuta un servidor web HTTP local.

Descripción general

El espacio de trabajo te permite guardar un cambio que realices en Herramientas para desarrolladores en una copia local del mismo archivo en tu computadora. Por ejemplo, supongamos:

• Tienes el código fuente del sitio en tu computadora de escritorio.
• Estás ejecutando un servidor web local desde el directorio del código fuente para que se pueda acceder al sitio en localhost:8080.
• Tienes localhost:8080 abierto en Google Chrome y estás usando las Herramientas para desarrolladores para cambiar la CSS del sitio.

Con el espacio de trabajo habilitado, los cambios de CSS que realices en Herramientas para desarrolladores se guardarán en el código fuente de tu escritorio.

Limitaciones

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

La comunidad de Herramientas para desarrolladores trabaja para admitir las capacidades que proporcionan los mapas de origen en diversos frameworks y herramientas. Si tienes problemas mientras usas un espacio de trabajo con el framework que prefieras o si logras que funcione después de una configuración personalizada, inicia una conversación 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.

Función relacionada: Anulaciones locales

Las anulaciones locales son otra función de las Herramientas para desarrolladores similar al espacio de trabajo. Usa anulaciones locales para simular contenido web o encabezados de solicitudes sin esperar a los cambios del backend o cuando quieras experimentar con cambios en una página, y necesitas ver esos cambios entre las cargas de páginas, pero no te importa asignar los cambios al código fuente de la página.

Paso 1: Configuración

Completa este instructivo para adquirir experiencia práctica en un lugar de trabajo.

Configura la demostración

1. Clona este repositorio de demostración en algún directorio de tu computadora. Por ejemplo, a ~/Desktop.

2. Inicia un servidor web local en ~/Desktop/devtools-workspace-demo. A continuación, se muestra un código de muestra para iniciar SimpleHTTPServer, pero puedes usar el servidor que prefieras.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   Durante el resto de este instructivo, este directorio se denominará /devtools-workspace-demo.

3. Abre una pestaña en Google Chrome y ve a la versión del sitio alojada localmente. Deberías poder acceder a él a través de una URL como localhost:8000. El número de puerto exacto puede ser diferente.

   

Cómo configurar Herramientas para desarrolladores

1. Abre Herramientas para desarrolladores en la página de demostración alojada de forma local.

2. Navega a Fuentes > Espacio de trabajo y configura un lugar de trabajo en la carpeta devtools-workspace-demo que clonaste. Puedes hacerlo de varias maneras:

   • Arrastra y suelta la carpeta en el Editor en Fuentes.
   • Haz clic en el vínculo seleccionar carpeta y selecciona la carpeta.
   • Haz clic en Agregar carpeta y selecciónala.

3. En la ventana de la parte superior, haz clic en Allow para que Herramientas para desarrolladores pueda leer y escribir el directorio.

   

En la pestaña Espacio de trabajo, ahora hay un punto verde junto a index.html, script.js y styles.css. Estos puntos verdes indican que Herramientas para desarrolladores estableció una asignación entre los recursos de red de la página y los archivos en devtools-workspace-demo.

Paso 2: Guarda un cambio de CSS en el disco

1. Abre /devtools-workspace-demo/styles.css en un editor de texto. Observa cómo la propiedad color de los elementos h1 se establece en fuchsia.

   

2. Cierra el editor de texto.

3. En Herramientas para desarrolladores, haz clic en la pestaña Elementos.

4. Cambia el valor de la propiedad color del elemento <h1> a tu color favorito. Para ello, sigue estos pasos:

   1. Haz clic en el elemento <h1> en Árbol del DOM.
   2. En el panel Estilos, busca la regla de CSS h1 { color: fuchsia } y cambia el color a tu favorito. En este ejemplo, el color se establece en verde.

   

   El punto verde junto a styles.css:1 en el panel Estilos significa que cualquier cambio que realices se asignará a /devtools-workspace-demo/styles.css.

5. Vuelve a abrir /devtools-workspace-demo/styles.css en un editor de texto. La propiedad color ahora está configurada con tu color favorito.

6. Vuelve a cargar la página. El color del elemento <h1> sigue configurado en tu color favorito. Esto funciona porque cuando hiciste el cambio y Herramientas para desarrolladores lo guardaron en el disco. Luego, cuando volviste a cargar la página, tu servidor local entregó la copia modificada del archivo desde el disco.

Paso 3: Guarda un cambio HTML en el disco

Intenta cambiar el código HTML desde el panel Elementos.

Advertencia: El flujo de trabajo que estás a punto de probar no funciona. Lo estás probando ahora para no perder tiempo tratando de descubrir por qué no funciona.

1. Abre la pestaña Elementos.

2. Haz doble clic en el contenido de texto del elemento h1, que dice Workspaces Demo, y reemplázalo por I ❤️ Cake.

   

3. Abre /devtools-workspace-demo/index.html en un editor de texto. El cambio que acabas de hacer no está ahí.

4. Vuelve a cargar la página. La página vuelve a su título original.

Opcional: Por qué no funciona

Nota: En esta sección, se describe por qué no funciona el flujo de trabajo de Intenta cambiar el HTML desde el panel Elementos. Puedes omitir esta sección si no te interesa el motivo.

• El árbol de nodos que se muestra en el panel Elementos representa el DOM de la página.
• Para mostrar una página, un navegador recupera el código HTML a través 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. CSS también puede cambiar el DOM mediante 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 código HTML que recuperó el navegador.
• Esto dificulta que las Herramientas para desarrolladores resuelvan dónde se debe guardar un cambio realizado en el panel Elements, ya que el DOM se ve afectado por HTML, JavaScript y CSS.

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

Cómo cambiar el código HTML desde el panel Sources

Si deseas guardar un cambio en el código HTML de la página, hazlo en el panel Fuentes.

1. Navega a Fuentes > Página.
2. Haz clic en (índice). Se abrirá el código HTML de la página.
3. Reemplaza <h1>Workspaces Demo</h1> por <h1>I ❤️ Cake</h1>.
4. Presiona Comando + S (Mac) o Control + S (Windows, Linux o ChromeOS) para guardar el cambio.

5. Vuelve a cargar la página. El elemento <h1> aún muestra el texto nuevo.

   

6. Abre /devtools-workspace-demo/index.html. El elemento <h1> contiene el texto nuevo.

Paso 4: Guarda un cambio de JavaScript en el disco

En el panel Sources, también puedes realizar cambios en JavaScript. Sin embargo, a veces necesitas acceder a otros paneles, como Elements o Console, mientras realizas cambios en tu sitio. Hay una forma de tener el panel Fuentes abierto junto a otros paneles.

1. Abre la pestaña Elementos.
2. Presiona Comando + Mayúscula + P (Mac) o Ctrl + Mayúscula + P (Windows, Linux y ChromeOS). Se abrirá el menú de comandos.

3. Escribe QS y, luego, selecciona Mostrar fuente rápida. En la parte inferior de la ventana de Herramientas para desarrolladores, ahora hay una pestaña Fuente rápida.

   

   La pestaña muestra el contenido de index.html, que es el último archivo que editaste en el panel Sources. La pestaña Código rápido te proporciona el editor del panel Fuentes, para que puedas editar archivos mientras tienes otros paneles abiertos.

4. Presiona Comando + P (Mac) o Control + P (Windows, Linux o ChromeOS) para abrir el diálogo Abrir archivo.

5. Escribe script y, luego, selecciona devtools-workspace-demo/script.js.

   

6. Observa el vínculo Edit and save files in a workspace en la demostración. Se le aplica estilo con regularidad.

7. Agregue el siguiente código al final de script.js en la pestaña Fuente rápida.

   document.querySelector('a').style = 'font-style:italic';
   

8. Presiona Comando + S (Mac) o Control + S (Windows, Linux o ChromeOS) para guardar el cambio.

9. Vuelve a cargar la página. El vínculo de la página ahora está en cursiva.

Próximos pasos

Listo: ¡Felicitaciones! Ahora sabes cómo guardar en las fuentes los cambios que realices en Herramientas para desarrolladores en tu sitio web alojado localmente.

Puedes configurar varias carpetas en un lugar de trabajo. Todas estas carpetas se enumeran en Configuración > Espacio de trabajo.

A continuación, aprenderás a usar las Herramientas para desarrolladores para cambiar el CSS y depurar JavaScript.