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

Kayce Basques

Sofia Emelianova

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

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

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

Descripción general

El espacio de trabajo te permite guardar un cambio que realices en DevTools 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 de escritorio.
• Ejecutas 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 usas las herramientas para desarrolladores para cambiar el CSS del sitio.

Con el lugar de trabajo habilitado, los cambios de CSS que realices en DevTools se guardarán en el código fuente en tu escritorio.

Limitaciones

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

La comunidad de DevTools trabaja para admitir las funciones que proporcionan los mapas de origen en una variedad de frameworks y herramientas. Si tienes problemas mientras usas un espacio de trabajo con el framework que elijas o lo haces funcionar después de una configuración personalizada, inicia una conversación en la lista de distribución o formula una pregunta en Stack Overflow para compartir tu conocimiento con el resto de la comunidad de DevTools.

Función relacionada: Anulaciones locales

Las anulaciones locales son otra función de DevTools similar al espacio de trabajo. Usa anulaciones locales para simular el contenido web o los encabezados de solicitud sin esperar a que se realicen cambios en el backend o cuando quieras experimentar con cambios en una página y necesites ver esos cambios en las cargas de página, pero no te preocupes por asignar tus cambios al código fuente de la página.

Paso 1: Configuración

Completa este instructivo para obtener experiencia práctica con un espacio 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
   

   En 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 alojada de forma local del sitio. 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 DevTools

1. Abre DevTools en la página de demostración alojada de forma local.

2. Navega a Sources > Workspace 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 de Fuentes.
   • Haz clic en el vínculo Seleccionar carpeta y selecciona la carpeta.
   • Haz clic en Agregar carpeta y selecciona la carpeta.

3. En el mensaje de la parte superior, haz clic en Permitir para otorgarle permiso a DevTools para leer y escribir en 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 significan que DevTools 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 está configurada como fuchsia.

   

2. Cierra el editor de texto.

3. En DevTools, haz clic en la pestaña Elements.

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 el á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 Styles 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 como tu color favorito. Esto funciona porque, cuando realizaste el cambio, DevTools lo guardó 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. La pruebas ahora para no perder tiempo más adelante tratando de averiguar 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. No se verá el cambio que acabas de hacer.

4. Vuelve a cargar la página. La página volverá 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 código HTML desde el panel Elementos. Puedes omitir esta sección si no te interesa saber el motivo.

• El árbol de nodos que ves en el panel Elements 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 DOM.
• Si la página tiene algún código JavaScript, este puede agregar, borrar o cambiar nodos DOM. CSS también puede cambiar el DOM a través de la propiedad content.
• El navegador usa el DOM para determinar qué contenido debe presentar a los usuarios.
• 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 DevTools resuelva 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.

Cambia el código HTML desde el panel Fuentes

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

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 y ChromeOS) para guardar el cambio.

5. Vuelve a cargar la página. El elemento <h1> sigue mostrando 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

El panel Sources también es el lugar para realizar cambios en JavaScript. Sin embargo, a veces, necesitas acceder a otros paneles, como el panel Elementos o el panel Consola, mientras realizas cambios en tu sitio. Hay una forma de tener el panel Fuentes abierto junto con otros paneles.

1. Abre la pestaña Elementos.
2. Presiona Comando+Mayúsculas+P (Mac) o Control+Mayúsculas+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 DevTools, 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 Quick Source te brinda el editor del panel Sources para que puedas editar archivos mientras tienes otros paneles abiertos.

4. Presiona Comando + P (Mac) o Control + P (Windows, Linux y 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 diseño con regularidad.

7. Agrega el siguiente código al final de script.js en la pestaña Quick Source.

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

8. Presiona Comando + S (Mac) o Control + S (Windows, Linux y 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

Correcto: ¡Felicitaciones! Ahora sabes cómo guardar en las fuentes los cambios que realizas en DevTools en tu sitio web alojado de forma local.

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

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