Editar archivos con áreas de trabajo

Nota

El objetivo de este tutorial es proporcionar práctica práctica para configurar y usar áreas de trabajo, de modo que pueda usar áreas de trabajo en sus propios proyectos. Puede guardar los cambios en el código fuente, en el equipo local, que ha hecho dentro de DevTools después de habilitar las áreas de trabajo.

Importante

Requisitos previos: antes de comenzar con este tutorial, debe saber cómo realizar las siguientes acciones.

Introducción

Las áreas de trabajo le permiten guardar un cambio que realiza en DevTools en una copia local del mismo archivo de su equipo. Para este tutorial, debe tener la siguiente configuración en su equipo.

  • Tiene el código fuente de su sitio en el escritorio.
  • Está ejecutando un servidor Web local desde el directorio de código fuente, de modo que el sitio sea accesible en localhost:8080 .
  • Has abierto localhost:8080 en Microsoft Edge y estás usando DevTools para cambiar las CSS del sitio.

Con las áreas de trabajo habilitadas, los cambios de CSS que realice dentro de DevTools se guardan en el código fuente de su escritorio.

Limitaciones

Si está usando un marco moderno, probablemente transforme el código fuente desde un formato que sea fácil de mantener en un formato optimizado para ejecutarse lo antes posible.

Las áreas de trabajo suelen poder asignar el código optimizado de nuevo al código fuente original con la ayuda de mapas de origen. Sin embargo, hay una gran variedad de variaciones entre marcos que usan mapas de origen. DevTools simplemente admite todas las variantes.

Las áreas de trabajo no funcionan con el siguiente marco.

  • Crear una aplicación de reAct

Característica relacionada: reemplazos locales

Los reemplazos locales son otra característica de DevTools similar a las áreas de trabajo. Use reemplazos locales cuando desee experimentar con los cambios realizados en una página y necesite ver los cambios en todas las páginas, pero no le importa asignar los cambios al código fuente de la página.

Paso 1: configurar

Complete las acciones siguientes para obtener experiencia práctica con áreas de trabajo.

Configurar la demostración

  1. Abra la demostración.

    Un proyecto de problema

  2. Cree un app directorio en el escritorio. Guarde copias de los archivos desde el workspaces-demo directorio en el app directorio. En el resto del tutorial, se hace referencia al directorio como ~/Desktop/app .

  3. Inicie un servidor Web local en ~/Desktop/app . A continuación encontrará código de ejemplo para el inicio SimpleHTTPServer , pero puede usar cualquier servidor que prefiera.

    cd ~/Desktop/app
    python -m SimpleHTTPServer # Python 2
    
    cd ~/Desktop/app
    python -m http.server # Python 3
    
  4. Abra una pestaña en Microsoft Edge y vaya a la versión hospedada localmente del sitio. Debería poder acceder a ella usando una dirección URL como localhost:8080 o http://0.0.0.0:8080 . El número de Puerto exacto puede ser diferente.

    Un proyecto de problema

Configurar DevTools

  1. Seleccione Control + Shift + J \ (Windows, Linux ) o Command + Option + J \ (MacOS ) para abrir el panel de consola de DevTools.

    Un proyecto de problema

  2. Elija la pestaña orígenes .

  3. Elija la ficha filesystem .

    Un proyecto de problema

  4. Elija Agregar carpeta al área de trabajo.

  5. Escribe ~/Desktop/app.

  6. Elija permitir para dar a DevTools permiso de lectura y escritura en el directorio.
    En la ficha filesystem , ahora hay un punto verde junto a index.html , script.js y styles.css . Estos puntos verdes indican que DevTools ha establecido una asignación entre los recursos de red de la página y los archivos de ~/Desktop/app .

    Un proyecto de problema

Paso 2: guardar un cambio de CSS en disco

  1. Abra styles.css .

    Nota

    La color propiedad de h1 elementos se establece en fuchsia .

    Un proyecto de problema

  2. Elija la pestaña elementos .

  3. Cambie el valor de la color propiedad del <h1> elemento a su color favorito.
    Recuerde que debe elegir el <h1> elemento en el árbol DOM para ver las reglas CSS que se aplican en el panel estilos . El punto verde junto a styles.css:1 significa que todos los cambios que realice se asignan a ~/Desktop/app/styles.css .

    Un proyecto de problema

  4. styles.cssVuelva a abrir en un editor de texto. La color propiedad ya está configurada con su color favorito.

  5. Actualiza la página. El color del <h1> elemento se mantiene establecido en el color que prefiera. El cambio se mantiene durante una actualización, porque cuando realizó el cambio DevTools guardado el cambio en el disco. Y, después, cuando haya actualizado la página, el servidor local ha servido la copia modificada del archivo desde el disco.

Paso 3: guardar un cambio HTML en el disco

Cambiar HTML desde el panel elementos

Puede realizar cambios en el HTML desde el panel elemento, pero sus cambios en el árbol DOM no se guardan en el disco y solo afectan a la sesión actual del explorador.

El árbol DOM no es HTML.

Cambiar HTML desde el panel orígenes

Si desea guardar un cambio en el código HTML de la página, hágalo usando el panel fuentes .

  1. Elija la pestaña orígenes .

  2. Elija la pestaña Página .

  3. Elija (índice). Se abrirá el código HTML de la página.

  4. Reemplazar <h1>Workspaces Demo</h1> por <h1>I ❤️ Cake</h1> . Consulte la siguiente ilustración.

  5. Seleccione Control + S \ (Windows, Linux ) o Command + S \ (MacOS ) para guardar el cambio.

  6. Actualiza la página. El <h1> elemento aún muestra el nuevo texto.

    Un proyecto de problema

  7. Abra ~/Desktop/app/index.html . El <h1> elemento contiene el nuevo texto.

Paso 4: guardar un cambio de JavaScript en el disco

El panel orígenes también es el lugar donde se pueden realizar cambios en JavaScript. Sin embargo, a veces necesita acceder a otros paneles, como el panel elementos o el panel de consola , mientras realiza cambios en su sitio. Hay una forma de abrir el panel fuentes junto con otros paneles.

  1. Elija la pestaña elementos .

  2. Seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ). Se abrirá el menú de comandos .

  3. Escriba QS y, a continuación, elija Mostrar fuente rápida. En la parte inferior de la ventana de DevTools ahora hay una ficha de fuente rápida . La pestaña muestra el contenido de index.html , que es el último archivo editado en el panel fuentes . La pestaña origen rápido le ofrece el editor del panel fuentes , de modo que pueda editar archivos mientras tiene otros paneles abiertos.

    Un proyecto de problema

  4. Seleccione Control + P \ (Windows, Linux ) o Command + P \ (MacOS ) para abrir el cuadro de diálogo Abrir archivo . Consulte la siguiente ilustración.

  5. Escriba script y, a continuación, elija aplicación/script.js.

    Un proyecto de problema

    Nota

    El Save Changes To Disk With Workspaces vínculo de la demostración se ha estilo regularmente.

  6. Agregue el código siguiente en la parte inferior de script.js mediante la pestaña de origen rápido .

    console.log('greetings from script.js');
    document.querySelector('a').style = 'font-style:italic';
    
  7. Seleccione Control + S \ (Windows, Linux ) o Command + S \ (MacOS ) para guardar el cambio.

  8. Actualiza la página.

    Nota

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

    Un proyecto de problema

Pasos siguientes

Use lo que ha aprendido en este tutorial para configurar áreas de trabajo en su propio proyecto.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.