Editar archivos con áreas de trabajo (pestaña Sistema de archivos)

Use la pestaña Sistema de archivos de la herramienta Orígenes para definir un área de trabajo, para guardar los cambios de DevTools en los archivos de código fuente en lugar de solo en una copia transitoria de los archivos devueltos por el servidor web.

En este tutorial se proporciona práctica en la configuración y el uso de un área de trabajo en DevTools. Después de agregar archivos a un área de trabajo, los cambios realizados en el código fuente mediante DevTools se guardan en el equipo local. Estos cambios se conservan en todas las actualizaciones de página.

Para actualizar los conocimientos de las tecnologías usadas, consulte los artículos siguientes:

• Use HTML, CSS y JavaScript para compilar una página web. Consulte Introducción a la web

• Use DevTools para realizar cambios básicos en CSS. Consulte Introducción a la visualización y cambio de CSS

• Ejecute un servidor web HTTP local. Ve:

  • Mediante Node.js (que se usa para este tutorial): configure un servidor localhost en Instalación de la extensión DevTools para Visual Studio Code.

  • Uso de Python: Ejecución de un servidor HTTP local simple en ¿Cómo se configura un servidor de pruebas local?

Introducción

Un área de trabajo de DevTools le permite guardar los cambios que realice en una copia local del código fuente en el mismo archivo del equipo, de modo que los cambios se conserven en las actualizaciones de la página. Este es un escenario típico para usar un área de trabajo:

• Tiene el código fuente del sitio web de demostración en el escritorio.

• Está ejecutando un servidor web local desde el directorio de código fuente, para que el sitio sea accesible en localhost:8080. Nota: Si usa la opción de servidor de Python, el número de puerto predeterminado es 8000.

• Ha abierto localhost:8080 en Microsoft Edge y usa DevTools para cambiar el código fuente del sitio web, que incluye los archivos CSS, HTML y JavaScript.

Los pasos del tutorial que se indican a continuación le guiarán por esta configuración del entorno.

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. Normalmente, un área de trabajo puede volver a asignar el código optimizado al código fuente original mediante asignaciones de origen para JavaScript y CSS. Sin embargo, hay muchas variaciones en la forma en que cada marco usa mapas de origen.

DevTools no admite todas las variaciones del marco; por ejemplo, la característica Áreas de trabajo (pestaña Sistema de archivos) no funciona con el marco Crear React aplicación.

Si tiene problemas al usar áreas de trabajo con el marco de trabajo que prefiera, o bien identifica los pasos específicos del marco necesarios, inicie un subproceso en la lista de correo de Chrome DevTools o formule una pregunta en Stack Overflow para intercambiar información con el resto de la comunidad de DevTools.

Característica relacionada: Invalidaciones

Invalidaciones es una característica de DevTools similar a un área de trabajo. Puede usar una invalidación cuando desee experimentar con cambios en una página web y debe mostrar los cambios en las cargas de página web, pero no le importa asignar los cambios al código fuente de la página web. Sin embargo, los cambios no se guardan al actualizar la página web.

La característica Invalidaciones le permite almacenar una copia local de los archivos de página web en el servidor. Al actualizar la página, Microsoft Edge carga la copia local de los archivos en lugar de los archivos del servidor. Para obtener más información sobre las invalidaciones, consulte Invalidación de recursos de página web con copias locales (pestaña Invalidaciones).

Creación del directorio de archivos de origen

Configuraremos los archivos de demostración y, a continuación, configuraremos DevTools.

1. En otra ventana o pestaña, vaya al código fuente de demostración áreas de trabajo.

2. Cree un app directorio, como ~/Desktop/app o C:\Users\myusername\app\. Copie index.html, ../shared/img/logo.png, README.md, script.jsy styles.css del código fuente de demostración en app el directorio. En el resto del tutorial, este directorio se conoce como ~/Desktop/app o C:\Users\myusername\app\, aunque puede usar una ruta de acceso diferente.

3. Si aún no lo ha hecho, instale Node.js y npm. Para obtener más información, vea Instalar Node.js y el Administrador de paquetes de nodo (npm) en Instalación de la extensión DevTools para Visual Studio Code.

4. Vaya a un símbolo del sistema, como el shell de Git Bash o el panel Terminal de Microsoft Visual Studio Code.

5. Vaya al app directorio que creó, como ~/Desktop/app o C:/Users/myusername/app. Si usa el shell de Git Bash, se trata de un shell de UNIX, por lo que incluso en Windows, debe encapsular una ruta de acceso de directorio que tenga barras diagonales inversas entre comillas o, de lo contrario, usar barras diagonales en lugar de barras diagonales inversas.

6. Ejecute uno de los siguientes comandos para iniciar el servidor web:
   Node.js opción:

   # Node.js option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   npx http-server  # Node.js
   

   Para obtener más información y opciones, vea Iniciar el servidor (npx http-server) en Instalación de la extensión DevTools para Visual Studio Code.

   # Python 2 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m http.server  # Python 3
   

7. Abra una pestaña en Microsoft Edge y vaya a la versión hospedada localmente del sitio. Debería poder acceder a él mediante localhost:8080:

   

   Otra dirección URL equivalente común es http://0.0.0.0:8080. El número de puerto predeterminado para la opción de servidor de Python es 8000. El número de puerto exacto puede ser diferente.

Definición de un área de trabajo en DevTools

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS) para abrir la consola de DevTools:

   

2. Haga clic en la pestaña Orígenes ().

3. En el panel Navegador (a la izquierda), haga clic en la pestaña Sistema de archivos (que se agrupa con la pestaña Página ):

   

4. Haga clic en Agregar carpeta al área de trabajo. se abre Explorador de archivos o Finder.

5. Vaya al /app/ directorio que ha creado. Por ejemplo, en el cuadro de texto Carpeta: , escriba la ruta de acceso, como ~/Desktop/app o C:\Users\myusername\app\. A continuación, haga clic en el botón Seleccionar carpeta .

   DevTools le pregunta si debe conceder a DevTools acceso completo al app directorio.

6. Haga clic en el botón Permitir para conceder permiso a DevTools para leer y escribir en el directorio.

   En la pestaña Sistema de archivos hay iconos de página que tienen un punto verde, para index.html, script.jsy styles.css. El punto verde indica que DevTools ha establecido una asignación entre un recurso de red de la página que se recibe del servidor web y el archivo de origen local en el app directorio:

   

Editar CSS y guardar los cambios en el archivo de origen

Para realizar un cambio en el archivo CSS y guardarlo en el disco:

1. En la herramienta Orígenes , en la pestaña Sistema de archivos (agrupada con la pestaña Página ), seleccione styles.css esta opción para abrirla en el panel del editor. La color propiedad del h1 elemento se establece en fuchsia:

   

2. Seleccione la herramienta Elementos () y, a continuación, en el árbol DOM, expanda el <body> elemento y, a continuación, seleccione el <h1> elemento.

   El panel Estilos muestra las reglas CSS que se aplican al <h1> elemento . El icono de archivo asignado () situado junto a styles.css:1 es una página con un punto verde. El punto verde significa que los cambios realizados en esta regla CSS se asignan styles.css en el app directorio:

   

3. Cambie el valor de la color propiedad del <h1> elemento a naranja. Para ello, seleccione el <h1> elemento en el árbol DOM. En la regla CSS para h1, haga clic en fuchsia, empiece a escribir naranja y, a continuación, seleccione naranja en la lista de colores:

   

4. Abra la copia de styles.css que está en el app directorio en un editor de texto, como Visual Studio Code. La color propiedad ahora se establece en el nuevo color, que es naranja en este ejemplo. El cambio no solo se realizó en la copia del archivo devuelto desde el servidor web; el cambio también se realizó en el archivo asignado en el app directorio del área de trabajo.

5. Actualiza la página.

El color del <h1> elemento sigue estando establecido en el nuevo color. El cambio permanece en una actualización, ya que al realizar el cambio, DevTools guardó el cambio en el disco. Al actualizar la página, el servidor local sirvió la copia modificada del archivo desde el disco.

Propina: También puede cambiar el color haciendo clic en la muestra de color fucshia para abrir el selector de color para seleccionar un nuevo color. El valor HEX para el color que elija es el nombre del color.

Editar HTML y guardar los cambios en el archivo de origen

En la herramienta Elementos , es posible cambiar el etiquetado HTML en una copia del archivo devuelto por el servidor. Sin embargo, para guardar las modificaciones en un archivo de origen local, debe usar la herramienta Orígenes en lugar de la herramienta Elementos .

Cambiar el árbol DOM en la herramienta Elementos no guarda los cambios

Puede realizar cambios en el contenido HTML mediante el árbol DOM de la herramienta Elementos , pero los cambios realizados en el árbol DOM no se guardan en el disco y solo afectan a la sesión actual del explorador.

Los pasos siguientes muestran que las modificaciones en el árbol DOM no se conservan en las actualizaciones de página:

1. Continuando desde arriba, seleccione la herramienta Elementos .

2. En el árbol DOM, en el <h1> elemento , seleccione la cadena DevTools Workspaces Demode texto , elimínela, escriba la cadena I Love Cakede texto y presione Entrar. La página web representada muestra el nuevo texto del encabezado:

   

3. Abra el index.html archivo que se encuentra en app el directorio en un editor de texto, como Visual Studio Code. El cambio que acaba de realizar no aparece; el encabezado sigue leyendo "Demostración de áreas de trabajo de DevTools".

4. En el explorador, actualice la página de demostración. La página vuelve al encabezado original, "Demostración de áreas de trabajo de DevTools", porque se descartó el árbol DOM con la edición y el DOM se volvió a crear desde el archivo sin cambios index.html en app el directorio del área de trabajo.

El cambio de HTML desde la herramienta Orígenes guarda los cambios

Si desea guardar un cambio en el HTML de la página web, edite el HTML en la herramienta Orígenes con un área de trabajo definida (en la pestaña Sistema de archivos ), en lugar de cambiar el HTML en el árbol DOM de la herramienta Elementos .

1. Continuando desde arriba, haga clic en la pestaña Orígenes (

2. En el panel Navegador de la izquierda, seleccione index.html. Se abre el código HTML de la página.

3. Reemplace por <h1>DevTools Workspaces Demo</h1><h1>I Love Cake</h1>, en la lista de archivos (en lugar del árbol DOM de la herramienta Elementos ).

4. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS) para guardar el cambio.

5. Actualiza la página. El encabezado de la página representada cambia a "I Love Cake", porque esa cadena se guardó en el index.html directorio asignado app :

   

6. Abra la copia de index.html que está en el app directorio en un editor de texto, como Visual Studio Code.

   El <h1> elemento contiene el nuevo texto, ya que realizó el cambio mediante el editor de la herramienta Orígenes para editar index.html y, a continuación, guardó el cambio, y ese archivo se asignó en un área de trabajo (la pestaña Sistema de archivos ), indicado por un punto verde en el icono del archivo.

Editar JavaScript y guardar los cambios en el archivo de origen

El lugar principal para usar el editor de código de DevTools es la herramienta Orígenes . Pero a veces es necesario acceder a otras herramientas, como la herramienta Elementos o la consola, al editar archivos. La herramienta De 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 de DevTools junto con otras herramientas:

1. Continuando desde arriba, seleccione la herramienta Elementos (

2. Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS) para abrir el menú Comando.

3. En el símbolo del sistema de ejecución , empiece a escribir rápidamente y, a continuación, seleccione Mostrar origen rápido:

   

   En la parte inferior de la ventana DevTools, se abre la herramienta Origen rápido , que muestra el contenido de index.html, porque es el último archivo que editó en la herramienta Orígenes . Si es necesario, haga clic en Expandir vista rápida y asegúrese de que la herramienta Elementos está seleccionada.

4. Presione Ctrl+P (Windows, Linux) o Comando+P (macOS) para mostrar el símbolo del sistema Abrir archivo del menú Comando:

   

5. Empiece a escribir script y, a continuación, seleccione script.js que se encuentra en el directorio app/ .

   La lista de archivos se muestra en la herramienta De origen rápido . En la página web de demostración representada, el hipervínculo Editar archivos con áreas de trabajo no tiene el estilo cursiva.

6. Use la herramienta De origen rápido para agregar el código siguiente a la parte inferior de script.js:

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

7. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS) para guardar el cambio.

8. Actualiza la página. Si es necesario, haga clic y mantenga presionado el botón Actualizar y, a continuación, seleccione Actualizar de forma rígida. El hipervínculo Editar archivos con áreas de trabajo de la página ahora está en cursiva:

   

Ver también

• Abra una carpeta de demostración en la herramienta Orígenes y edite un archivo en Código de ejemplo para DevTools.

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á creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.