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, puedes practicar configurando un espacio de trabajo puedes usarla en tus propios proyectos. Workspace te permite guardar los cambios que realizas Herramientas para desarrolladores al código fuente que está almacenado en tu computadora.

Descripción general

Workspace te permite guardar un cambio realizado en Herramientas para desarrolladores en una copia local del mismo archivo en en tu computadora. Por ejemplo, supongamos:

  • El código fuente del sitio está 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 a las localhost:8080.
  • Tienes localhost:8080 abierto en Google Chrome y usas Herramientas para desarrolladores para cambiar la configuración o CSS.

Con el espacio de trabajo habilitado, los cambios de CSS que realizas en Herramientas para desarrolladores se guardan 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 sea fácil de mantener en un formato optimizado para ejecutarse lo más rápido posible. El lugar de trabajo es generalmente pueden volver a asignar el código optimizado a tu código fuente original con la ayuda de source Maps.

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 un lugar de trabajo con el framework que elijas o si lo haces Después de realizar 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 es otra función de Herramientas para desarrolladores similar al espacio de trabajo. Usa anulaciones locales para simular contenido web o encabezados de solicitudes sin esperar cambios en el backend. cuando quieres experimentar con cambios en una página y necesitas verlos en toda la página se carga, 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 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 incluye 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 localmente 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.

    La página de demostración alojada de forma local se abrió en Chrome.

Cómo configurar Herramientas para desarrolladores

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

  2. Navega a Fuentes > Workspace y configura uno en la carpeta devtools-workspace-demo que clonaste. Puedes hacerlo de varias maneras:

    • En Fuentes, arrastra y suelta la carpeta en el Editor.
    • 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 que aparece en la parte superior, haz clic en Allow para que las Herramientas para desarrolladores tengan permiso para leer y escribir en el directorio.

    El botón Permitir en el mensaje

En la pestaña Lugar 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.

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 h1 de elementos se establece en fuchsia.

    Se muestra style.css en un editor de texto.

  2. Cierra el editor de texto.

  3. En Herramientas para desarrolladores, 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.

    Establecer 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 como color favorito.

  6. Vuelve a cargar la página. Vuelve a cargar la página. El color del elemento <h1> todavía se mantiene en tu color favorito. Esto funciona porque, cuando hiciste 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 Elements.

  2. Haz doble clic en el contenido de texto del elemento h1, que dice Workspaces Demo, y reemplázalo con 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 vuelve 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 obtiene 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 puede También puedes cambiar el DOM mediante la propiedad content.
  • Con el tiempo, el navegador utiliza 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 navegador recuperado.
  • Esto dificulta que las Herramientas para desarrolladores resuelvan los cambios realizados en el panel Elements. se debe guardar, ya que el DOM se ve afectado por HTML, JavaScript y CSS.

En resumen, el código HTML de !== del árbol del DOM.

Cambiar HTML desde el panel Sources

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> todavía muestra 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. Pero, a veces, necesitas acceder a otros paneles, como el de Elements o el de Elements, mientras haces cambios a tu sitio. Existe una manera de que el panel Fuentes se abra junto con otros paneles.

  1. Abre la pestaña Elements.
  2. Presiona Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS). El menú de comandos se abre.

  3. Escribe QS y, luego, selecciona Mostrar fuente rápida. En la parte inferior de la ventana de Herramientas para desarrolladores, encontrarás en la pestaña Quick Source.

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

    La pestaña muestra el contenido de index.html, que es el último que editaste en el panel Fuentes. La pestaña Quick Source te ofrece el editor de la 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.

    Abriendo la secuencia de comandos mediante el cuadro de diálogo Abrir archivo.

  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 esas carpetas se enumeran en Configuración > Lugar de trabajo.

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