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

Kayce Basques
Kayce Basques
X GitHub Error
Sofia Emelianova
Sofia Emelianova
GitHub

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 realizas en las Herramientas para desarrolladores en el código fuente que se almacena en la computadora.

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:

  • El código fuente del sitio está 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 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 fácil de mantener a uno optimizado para ejecutarse lo más rápido posible. Por lo general, Workspace puede asignar el código optimizado a tu código fuente original con la ayuda de mapas fuente.

La comunidad de Herramientas para desarrolladores trabaja para admitir las capacidades proporcionadas por los mapas de origen en una variedad de frameworks y herramientas. Si tienes problemas cuando usas el espacio de trabajo con el framework que elegiste o si lo haces después de configurar algún elemento personalizado, inicia un subproceso 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 DevTools similar al espacio de trabajo. Usa anulaciones locales para simular contenido web o encabezados de solicitudes sin esperar cambios en el backend o cuando quieras experimentar con cambios en una página y necesites ver esos cambios en varias cargas de página, pero no te importa asignar los 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

    Durante el resto del 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.

    Se abrió la página de demostración alojada de forma local en Chrome.

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 Agrega Agregar carpeta y selecciona la carpeta. Las fuentes y, luego, a la pestaña Espacio de trabajo.

  3. En el mensaje de la parte superior, haz clic en Permitir para otorgarle permiso a DevTools para leer y escribir en el directorio.

    El botón Permitir en el mensaje

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.

En la pestaña Workspace, ahora se muestra una asignación entre los archivos locales y los de la red.

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.

    Visualización de styles.css en un editor de texto

  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.

    Establece la propiedad de color del elemento h1 en verde.

    El punto 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. Vuelve a cargar la página. El color del elemento <h1> sigue configurado como tu color favorito. Esto funciona porque, cuando realizaste el cambio, las 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 de elementos

  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.

    Se está intentando cambiar el código HTML desde el árbol del DOM del panel Elements.

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

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

Opcional: Por qué no funciona

  • 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 JavaScript, este puede agregar, borrar o cambiar nodos del 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 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 código HTML de !== del árbol del DOM.

Cambia el código HTML desde el panel Fuentes

Si quieres guardar un cambio en el código HTML de la página, hazlo desde 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 y ChromeOS) para guardar el cambio.

  5. Vuelve a cargar la página. Vuelve a cargar la página. El elemento <h1> sigue mostrando el texto nuevo.

    Cambiando el código HTML desde el panel Sources.

  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 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 Quick Source.

    Abrir la pestaña Fuente rápida a través del menú de comandos

    En la pestaña, se muestra el contenido de index.html, que es el último archivo que editaste en el panel Fuentes. La pestaña Fuente rápida te brinda 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 y ChromeOS) para abrir el diálogo Abrir archivo.

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

    Apertura de la secuencia de comandos a través del diálogo Open File

  6. Observa el vínculo Edit and save files in a workspace en la demostración. Se diseña periódicamente.

  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. Vuelve a cargar la página. El vínculo de la página ahora está en cursiva.

El vínculo de la página ahora está en cursiva.

Próximos pasos

Puedes configurar varias carpetas en un lugar 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.