Compartir a través de

Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes)

Puede usar DevTools como entorno de desarrollo integrado (IDE) en el explorador. Para guardar las modificaciones en los archivos de origen de la página web, agregue la carpeta de código fuente de la página web en la pestaña Área de trabajo de la herramienta Orígenes . A continuación, puede editar y guardar archivos HTML, CSS y JS en el editor de la herramienta Orígenes (o en la herramienta Origen rápido en el panel Vista rápida en la parte inferior de DevTools).

Puede crear, copiar, cambiar el nombre y eliminar archivos de origen desde la pestaña Área de trabajo .

Use la pestaña Área de trabajo de la herramienta Orígenes para mostrar y editar el contenido de una carpeta del equipo desde la herramienta Orígenes . Los cambios realizados en los archivos de un área de trabajo se guardan en el equipo.

La manera típica de configurar un área de trabajo es configurarlo para mostrar los archivos de origen del código front-end del sitio web. De este modo, usa DevTools tanto para inspeccionar el sitio web como para realizar cambios en sus archivos de origen. De este modo, los cambios que realice se guardan en el equipo, en lugar de perderse al actualizar la página.

Consulta también:

Información general de la característica del área de trabajo de DevTools

Un área de trabajo de DevTools le permite ver el código fuente del sitio web que se encuentra en el equipo y realizar cambios en él, desde la herramienta Orígenes , para que los cambios se conserven en las actualizaciones de la página.

Este es un escenario típico para usar un área de trabajo:

  1. Tenga el código fuente de su sitio web en el equipo.

  2. Ejecute un servidor web local (como npx http-server) desde el directorio de código fuente, para que el sitio sea accesible en una dirección URL de desarrollo local como http://localhost:8080.

  3. Abra http://localhost:8080 en Microsoft Edge.

  4. Use la pestaña Área de trabajo de la herramienta Orígenes en DevTools para cambiar el código fuente del sitio web, incluidos los archivos CSS, HTML y JavaScript.

  5. Vuelva a cargar la página web para ver los cambios.

El sitio web puede usar un sistema de compilación que necesita ejecutar para poder ver los cambios. Los desarrolladores web suelen usar un sistema de compilación que supervisa los cambios guardados en los archivos de código fuente. Al guardar un cambio en un archivo de código fuente, el sistema de compilación compila esos cambios y, a continuación, actualiza automáticamente la página en el explorador.

Si usa este tipo de sistema de compilación automatizada, al realizar un cambio en un archivo de origen en la herramienta Orígenes y guardarlo, verá automáticamente los cambios aplicados a la página web representada.

Limitaciones de la característica del área de trabajo con código fuente transformado

Si usa un marco moderno, es posible que transforme el código fuente de un formato que sea fácil de mantener en un formato optimizado para ejecutarse lo más rápido posible. La pestaña Área de trabajo de la herramienta Orígenes normalmente puede asignar el código optimizado al código fuente original mediante mapas 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. Si tiene problemas al usar áreas de trabajo con el marco de trabajo que prefiera o identifica los pasos específicos del marco necesarios, póngase en contacto con él para usarlo abriendo un problema en el repositorio MicrosoftEdge/DevTools .

Edición de CSS mediante la pestaña Estilos de la herramienta Elementos, cuando se usa la pestaña Área de trabajo de la herramienta Orígenes

Si usa un área de trabajo, en algunos casos puede editar CSS en la pestaña Estilos de la herramienta Elementos y guardar los cambios en el archivo asignado en el disco:

  • Las modificaciones que realice en la pestaña Estilos de la herramienta Elementosse guardan en el archivo CSS del disco, si DevTools ha asignado una hoja de estilos en la página web y el archivo del área de trabajo, como por un mapa de origen o por contenido coincidente.

    Si usa un marco de trabajo del sistema de compilación automática, los cambios se guardan en el archivo de origen si DevTools pudo asignar la hoja de estilos al archivo del área de trabajo mediante un mapa de origen.

    Dependiendo del sistema o marco de compilación automatizado que use, DevTools puede guardar los cambios en el disco, si no hay ningún paso de compilación o si hay un paso de compilación y un mapa de origen. La pestaña Estilos se asigna al archivo CSS del disco, por lo que las modificaciones de la pestaña Estilos se guardan en el disco.

  • Las modificaciones que realice en la pestaña Estilos de la herramienta Elementosno se guardarán en el archivo CSS del disco, si la hoja de estilos no está asignada a un archivo de área de trabajo. La edición de CSS en la pestaña Estilos de la herramienta Elementos perderá los cambios; los cambios no se guardan en el disco.

Si usa un área de trabajo, edite css en la herramienta Orígenes (no en la herramienta Elementos ), ya que los archivos de origen que edite podrían compilarse o compilarse mediante un script de compilación antes de que el servidor local los atienda. Al editar en la herramienta Elementos , es posible que esté editando la versión compilada y compilada del archivo, no el archivo de origen.

Cuando se usa un área de trabajo:

  1. Edite el archivo en la herramienta Orígenes .
  2. Guarde el cambio.
  3. Vuelva a compilar. Algunos sistemas de compilación lo hacen automáticamente, cuando detectan un cambio.
  4. Vuelva a cargar la página. Algunos servidores lo hacen automáticamente cuando detectan un cambio.

Limitaciones de la pestaña Estilos de la herramienta Elementos

Es posible que el uso de la pestaña Estilos de la herramienta Elementos no siempre funcione en todos los escenarios. Supongamos que el proyecto usa un marco o un preprocesador para escribir CSS, donde no escribe directamente CSS, pero escribe el equivalente de CSS mediante un lenguaje diferente y una estructura de archivos diferente. Este tipo de proyecto podría usar un sistema de compilación que, a continuación, traduce, compila y combina el código similar a CSS en algo que el explorador puede entender.

Este tipo de proyecto podría generar mapas de origen, de modo que DevTools le permite ver y editar los archivos de origen en la pestaña Estilos de la herramienta Elementos. Pero en algunos casos, es posible que no funcione o que el proyecto no use mapas de origen.

Cuando esto sucede, los cambios realizados en la pestaña Estilos de la herramienta Elementos no se guardan en los archivos del área de trabajo. En ese caso, edite los archivos de origen en la herramienta Orígenes en su lugar. En el escenario anterior, los archivos que usan un idioma diferente están visibles en la pestaña Área de trabajo de la herramienta Orígenes y puede editar los archivos de origen allí.

A continuación, en segundo plano, los cambios guardados deben volver a compilarse y compilarse (lo que puede ocurrir automáticamente) y, a continuación, los cambios se ven en la página web representada después de una actualización de página (lo que puede ocurrir automáticamente).

Las invalidaciones locales son 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.

Invalidaciones locales guarda los cambios realizados en una página web en una carpeta de su elección y los organiza en una estructura de carpetas que coincide con la dirección URL de los recursos invalidados.

La característica Invalidaciones almacena una copia de los recursos de la página web que edita en DevTools. Al actualizar la página, Microsoft Edge carga la copia modificada localmente de los archivos en lugar de los archivos del servidor.

Consulta también:

Las modificaciones del árbol DOM de la herramienta Elements se pierden después de la actualización

Para realizar cambios en un archivo de origen HTML, debe usar la pestaña Área de trabajo de la herramienta Orígenes, en lugar de la herramienta Elementos.

Limitaciones de las modificaciones del árbol DOM de la herramienta >Elements:

En la herramienta Elementos , es posible cambiar la representación DOM del documento HTML, que el motor del explorador construyó cuando cargó la página. Sin embargo, los cambios en dom no se pueden volver a asignar a los archivos de origen HTML. 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.

Consulta también:

Limitaciones de la pestaña Página de la herramienta >Orígenes:

La pestaña Página de la herramienta Orígenes no permite guardar los cambios en el sistema de archivos.

  • No se puede editar un archivo HTML que se abre a través de la pestaña Página .
  • Se puede editar un archivo CSS o JS que se abre a través de la pestaña Página , pero las modificaciones no se conservan en las actualizaciones de la página web.

En los pasos siguientes se muestra que las modificaciones en el árbol DOM de la herramienta Elementos no se conservan en las actualizaciones de página:

  1. Configure la demostración Áreas de trabajo como se describe en tutorial del área de trabajo (pestaña Área de trabajo de la herramienta Orígenes).

  2. En DevTools, seleccione la herramienta Elementos (</>).

  3. 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, I Love Cake:

    Intento de cambiar HTML desde el árbol DOM en la herramienta Elementos

  4. Seleccione la herramienta Orígenes , haga clic con el botón index.htmlderecho y, a continuación, seleccione Abrir en la carpeta contenedora.

    se abre Explorador de archivos o Finder.

  5. Abra el index.html archivo que se encuentra en /Demos/workspace/ el directorio en un editor de texto, como Visual Studio Code. El cambio que acaba de realizar no aparece; el encabezado sigue leyendo "DevTools Workspaces Demo", en lugar de "I Love Cake".

  6. 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 a partir del archivo sin cambios index.html que se encuentra en el /Demos/workspace/ directorio.

Por qué no se guardan las modificaciones del árbol DOM

El cambio del árbol DOM en elements, según la sección anterior, no funciona.

  • El árbol de nodos que ve en la herramienta Elementos representa el DOM de la página.

  • Para mostrar una página, un explorador captura HTML a través de la red, analiza el CÓDIGO HTML y, a continuación, lo convierte en un árbol de nodos DOM.

  • Si la página tiene JavaScript, javaScript puede agregar, eliminar o cambiar nodos DOM. CSS también puede cambiar el DOM a través de la content propiedad .

  • Con el tiempo, el explorador usa el DOM para determinar qué contenido debe presentar a los usuarios del explorador.

  • Por lo tanto, el estado final de la página que ven los usuarios puede ser muy diferente del HTML que el explorador capturó.

  • Esto dificulta que DevTools resuelva dónde se debe guardar un cambio realizado en la herramienta Elementos , ya que el DOM se ve afectado por HTML, JavaScript y CSS.

En resumen, el árbol DOM, que ha construido el motor del explorador, es diferente del documento HTML que se descargó del servidor.

Hacer que los puntos verdes "asignados" aparezcan en los archivos

Si los puntos "asignados" verdes dejan de aparecer en los archivos de DevTools, como en la pestaña Área de trabajo ; o si la herramienta Cambios no muestra los cambios esperados:

  • Con DevTools mostrado, haga clic con el botón largo o haga clic con el botón derecho en el botón Actualizar de Microsoft Edge y, a continuación, seleccione Actualización rígida (Ctrl+Mayús+R).

    Un punto verde "asignado" junto a un archivo en DevTools 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 /Demos/workspace/ directorio. El servidor debe devolver el nuevo archivo que agregue en DevTools para que se indique como asignado.

Si agrega un nuevo .js archivo en el área de trabajo y desea que aparezca un círculo verde de "sincronización" en el archivo agregado .js y que el archivo se represente en la herramienta Cambios :

  1. Haga referencia al archivo agregado .js en el archivo HTML, como la línea <script src="test.js"></script> dentro de la <body> etiqueta.

  2. Asegúrese de que hay código en el .js archivo, como la línea console.log('hello from test.js');.

  3. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS). El cambio se guarda y el asterisco desaparece.

  4. Con DevTools mostrado, haga clic con el botón largo o haga clic con el botón derecho en el botón Actualizar de Microsoft Edge y, a continuación, seleccione Actualización rígida (Ctrl+Mayús+R).

Consulta también:

Consulte también

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.

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