Editar archivos con Áreas de trabajo

  • Artículo
  • Tiempo de lectura: 6 minutos

Este tutorial proporciona prácticas para configurar y usar un área de trabajo. Después de agregar archivos a un área de trabajo, los cambios realizados en el código fuente dentro de DevTools se guardan en el equipo local y se conservan después de actualizar la página web.

Importante

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

Información general

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

  • Tiene el código fuente del 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 .
  • Se abrió localhost:8080 en Microsoft Edge y está usando DevTools para cambiar el CSS del sitio.

Con Workspaces habilitado, los cambios CSS que realices en DevTools se guardan en el código fuente del escritorio.

Limitaciones

Si usa un marco moderno, probablemente transforme el código fuente de un formato fácil de mantener en un formato optimizado para ejecutarse lo más rápido posible.

Las áreas de trabajo normalmente pueden asignar el código optimizado al código fuente original con la ayuda de mapas de origen. Pero hay mucha variación entre marcos sobre cómo cada marco usa mapas de origen. Devtools no admite todas las variaciones.

Se sabe que las áreas de trabajo no funcionan con el siguiente marco.

  • Crear React app

Invalidaciones locales es otra característica de DevTools similar a Workspaces. Usa Invalidaciones locales cuando quieras experimentar con los cambios en una página web y debes mostrar los cambios en las cargas de páginas web, pero no te importa asignar los cambios al código fuente de la página web.

Paso 1: Configurar

Complete las siguientes acciones para obtener experiencia práctica con Workspaces.

Configurar la demostración

  1. Abra la demostración.

    Un proyecto de glitch

  2. Cree un app directorio en el escritorio. Guarde copias de los archivos del workspaces-demo directorio en el app directorio. Para el resto del tutorial, el directorio se conoce como ~/Desktop/app .

  3. Inicie un servidor web local en ~/Desktop/app . A continuación se muestra un código de ejemplo para iniciar, pero SimpleHTTPServer puede usar el 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. Debe tener acceso a ella mediante una dirección URL como localhost:8080 o http://0.0.0.0:8080 . El número de puerto exacto puede ser diferente.

    La demostración

Configurar DevTools

  1. Seleccione Control + Shift + J (Windows, Linux) o Command + Option + J (macOS) para **** abrir el panel Consola de DevTools.

    Panel consola

  2. Vaya a la herramienta Orígenes.

  3. En el panel Navegador (a la izquierda), elija la pestaña Sistema de archivos.

    Ficha Sistema de archivos

  4. Elija Agregar carpeta al área de trabajo.

  5. Escriba ~/Desktop/app.

  6. Elija Permitir para conceder permiso a DevTools para leer y escribir en el directorio. En la pestaña Sistema de archivos, ahora aparece un punto verde junto a , y index.html script.js styles.css . Un punto verde indica que DevTools ha establecido una asignación entre un recurso de red de la página y el archivo en ~/Desktop/app .

    La pestaña Sistema de archivos ahora indica una asignación entre los archivos locales y los de red

Paso 2: Guardar un cambio css en disco

  1. Abra styles.css .

    Nota

    La color propiedad de los elementos se establece en h1 fuchsia .

    Ver styles.css en un editor de texto

  2. Elija la herramienta Elementos.

  3. Cambia el valor de la color propiedad del elemento a tu color <h1> favorito. Recuerde que debe elegir el elemento en el árbol DOM para mostrar las reglas CSS que se le aplican <h1> en el panel Estilos. **** El punto verde junto styles.css:1 a significa que cualquier cambio que realice se asigna a ~/Desktop/app/styles.css .

    El indicador verde de que el archivo está vinculado

  4. Abra styles.css de nuevo en un editor de texto. La color propiedad ahora está establecida en el color favorito.

  5. Actualiza la página. El color del <h1> elemento aún está establecido en el color favorito. El cambio permanece en una actualización, porque al realizar el cambio DevTools guardó el cambio en el disco. Después, al actualizar la página, el servidor local sirvió la copia modificada del archivo desde el disco.

Paso 3: Guardar un cambio HTML en disco

Cambiar HTML desde el Panel de elementos

Puede realizar cambios en el html desde el Panel de elementos, pero los cambios realizados en el árbol DOM no se guardan en el disco y solo tienen efecto en la sesión del explorador actual.

El árbol DOM no es html.

Cambiar HTML desde la herramienta Orígenes

Si desea guardar un cambio en el HTML de la página web, use la herramienta Orígenes.

  1. Vaya a la herramienta Orígenes.

  2. En el panel Navegador (a la izquierda), elija la pestaña Página.

  3. Elija (índice). Se abre el CÓDIGO HTML de la página.

  4. Reemplace <h1>Workspaces Demo</h1> por <h1>I ❤️ Cake</h1> . Revise la siguiente figura.

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

  6. Actualiza la página. El <h1> elemento sigue mostrando el texto nuevo después de actualizar la página.

    Cambiar HTML desde la herramienta Orígenes

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

Paso 4: Guardar un cambio de JavaScript en disco

El lugar principal para usar el editor de código de DevTools es la herramienta Orígenes. Pero a veces es necesario tener acceso a otras herramientas, como la herramienta Elementos o el panel Consola, mientras se editan archivos. La herramienta Origen rápido le proporciona solo el editor de la herramienta Orígenes, mientras que cualquier herramienta está abierta.

Para abrir el editor de código DevTools junto con otras herramientas, haga lo siguiente:

  1. Vaya a la herramienta Elementos.

  2. Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS). Se abre el menú comando.

  3. Escriba Quick Source y, a continuación, elija Mostrar origen rápido. En la parte inferior de la ventana DevTools, aparece la herramienta Origen rápido, que muestra el contenido de , que es el último archivo que editó index.html en la herramienta Orígenes.

    Abra la herramienta Origen rápido mediante el menú Comando

  4. Seleccione Control + P (Windows, Linux) o Command + P (macOS) para abrir el cuadro de diálogo Abrir archivo. Revise la siguiente figura.

  5. Escriba script , luego elija app/script.js.

    Abra script.js mediante el cuadro de diálogo Abrir archivo

    Nota

    El Save Changes To Disk With Workspaces vínculo de la demostración tiene un estilo regular.

  6. Agregue el siguiente código a la parte inferior de script.js mediante la herramienta 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 ahora está en cursiva.

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

Pasos siguientes

Usa lo que has aprendido en este tutorial para configurar áreas de trabajo en tu propio proyecto.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.