Tutorial del área de trabajo (herramienta Orígenes, pestaña Área de trabajo)

Siga los pasos siguientes para usar DevTools como un IDE. Por ejemplo, puede realizar modificaciones en la página web en la pestaña Área de trabajo de la herramienta Orígenes o guardar los cambios en los archivos de origen en el disco.

Puede leer o seguir estos pasos que muestran cómo configurar y usar un área de trabajo en DevTools. Después de configurar un área de trabajo, los cambios que realice en los archivos del área de trabajo, mediante DevTools, se guardan en el equipo local.

Paso 1: Clone el repositorio de demostraciones de Edge en la unidad local

En primer lugar, configure un directorio local que contenga los archivos de origen de la página web, como la página web de demostración de Workspaces.

Clone el repositorio de MicrosoftEdge / Demos en la unidad local, incluida la carpeta de /workspaces/ demostración, como se indica a continuación:

1. Si aún no lo ha hecho, descargue git e instálelo.

2. Vaya al repositorio de MicrosoftEdge / Demos en una nueva ventana o pestaña.

3. Haga clic en el botón desplegable Código y, a continuación, haga clic en el botón Copiar URL en el portapapeles .

   La dirección URL se copia en el portapapeles: https://github.com/MicrosoftEdge/Demos.git

   O bien, si tiene instalado GitHub Desktop, haga clic en Abrir con GitHub Desktop para clonar el repositorio y omita el paso del símbolo del sistema siguiente.

   O bien, puede usar el panel Control de código fuente de Visual Studio Code para clonar el repositorio y omitir el siguiente paso del símbolo del sistema.

4. Abra un símbolo del sistema, como git bash.

5. Clone el repositorio en la unidad local e introduzca la cadena de URL que copió del repositorio de GitHub. Si usa el símbolo del sistema de git bash:

   # Example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Para obtener más información sobre cómo clonar un repositorio, consulte:

• Clonar un repositorio : documentación de GitHub

Continúa con la sección siguiente.

Paso 2: Iniciar el servidor localhost en el directorio de archivos de origen de la página web

1. Si aún no lo ha hecho, instale una versión actualizada de Node.js y npm desde Node.js.

   Vea también:

   • Instalar el Administrador de paquetes de nodos y Node.js (npm) en Instalación de la extensión de DevTools para Visual Studio Code.

2. Vaya a un símbolo del sistema, como el shell de git bash o el panel Terminal en Microsoft Visual Studio Code.

3. Cambie al Demos directorio del directorio del workspaces repositorio:

   cd ~/GitHub/Demos/workspaces
   pwd
   

   Un directorio que se usa con la pestaña Área de trabajo de la herramienta Orígenes puede tener cualquier nombre. Este directorio de demostración se denomina /workspaces/.

4. Crea una rama de trabajo llamada "test" y cámbiala (para evitar alterar los archivos de la demostración en la rama "main"):

   git checkout -b test
   

   Eso es equivalente a:

   git branch test
   git switch test
   

5. Ejecute uno de los siguientes comandos para iniciar el servidor web:

   # Node.js option
   npx http-server
   

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

   # Python 2 option
   cd ~/GitHub/demos/workspaces
   python -m SimpleHTTPServer
   

   # Python 3 option
   cd ~/GitHub/demos/workspaces
   python -m http.server
   

6. Abra una pestaña en Microsoft Edge y vaya a la versión hospedada localmente del sitio. Por lo general, accedes a ella yendo alocalhost:8080:

   

   Otra 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.

   Se abrirá la página web de demostración de DevTools Workspaces .

   (El vínculo de la última demostración podría decir "Editar archivo con áreas de trabajo" o "Editar y guardar archivos en un área de trabajo (herramienta Orígenes, pestaña Área de trabajo)").

Vea también:

• Ejecución de un servidor HTTP local simple en ¿Cómo se configura un servidor de pruebas local? en MDN - muestra Python.

Continúa con la sección siguiente.

Paso 3: Agregar una carpeta Área de trabajo en la herramienta Orígenes

Después, defina un área de trabajo en DevTools:

1. Haga clic con el botón derecho en la página web de demostración de DevTools Workspaces hospedada localmente y seleccione Inspeccionar. O bien, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).

   Se abre DevTools.

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

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

   

4. Haga clic en el botón Agregar carpeta .

   Se abre el cuadro de diálogo Seleccionar carpeta .

5. Vaya al directorio clonado /Demos/workspace/ que creó. Por ejemplo, en el cuadro de texto Carpeta: , escriba la ruta de acceso, como C:\Users\localAccount\GitHub\Demos\workspaces\.

6. Haga clic en el botón Seleccionar carpeta .

   DevTools le preguntará si conceder a DevTools acceso completo al /workspaces/ directorio.

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

   En la pestaña Área de trabajo hay iconos de página que tienen un punto verde "asignado", para index.html, script.jsy styles.css. El punto verde "asignado" 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 /Demos/workspace/ el directorio:

   

Continúa con la sección siguiente.

Paso 4: Guardar un cambio de CSS en el disco (a través de la pestaña Estilos de la herramienta Elementos)

A continuación, edite CSS y guarde los cambios en el archivo de origen. Aquí usamos la pestaña Estilos de la herramienta Elementos, asistida por los controles de su interfaz de usuario, aunque podríamos editar directamente el archivo CSS en el editor de archivos de la pestaña Espacio de trabajo de la herramienta Orígenes.

Para realizar un cambio en el archivo CSS y guardarlo en disco mediante la pestaña Estilos de la herramienta Elementos:

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

   

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

   El panel Estilos muestra las reglas CSS que se aplican al <h1> elemento. El icono del archivo asignado () situado junto a styles.css:1 es una página con un punto verde "asignado". El punto verde "asignado" significa que cualquier cambio que realice en esta regla CSS se asignará en styles.css el /Demos/workspace/ directorio:

   

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

   

4. Seleccione la herramienta Orígenes , haga clic styles.csscon el botón derecho y seleccione Abrir en la carpeta contenedora.

   Se abre el Explorador de archivos o el Finder.

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

6. Actualice la página.

El color del <h1> elemento aún está establecido en el nuevo color. El cambio permanece durante una actualización, ya que cuando realizó el cambio, DevTools guardó el cambio en el disco. Al actualizar la página, el servidor local proporcionó la copia modificada del archivo desde el disco.

Propina: También puedes cambiar el color haciendo clic en la muestra de color fucshia para abrir el Selector de colores y elegir un nuevo color. El valor HEX del color que elija es el nombre del color.

Continúa con la sección siguiente.

Paso 5: Guardar un cambio de HTML en el disco (a través de la pestaña Área de trabajo de la herramienta Orígenes)

A continuación, edite HTML y guarde los cambios en el archivo de origen. Para guardar los cambios en el archivo HTML de la página web, agregue la carpeta de código fuente en la pestaña Área de trabajo de la herramienta Orígenes y, a continuación, edite el HTML en la herramienta Orígenes. (Los cambios en el archivo de origen no se realizan simplemente cambiando el HTML en el árbol DOM en la herramienta Elementos ).

La pestaña Área de trabajo de DevTools es similar a usar un editor para editar el archivo de origen HTML, pero permite editar el archivo de origen HTML directamente en DevTools.

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

2. En el panel Navegador de la izquierda, en la pestaña Área de trabajo (agrupada con la pestaña Página ), seleccione index.html.

   La pestaña index.html se abre en la herramienta Orígenes .

3. En la <h1> etiqueta, reemplace "Demostración de áreas de trabajo de DevTools" por "I Love Cake".

   Aparecerá un asterisco junto a index.html.

4. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS).

   El cambio se guarda y el asterisco desaparece.

   Realizó el cambio en la lista de archivos, en lugar de en el árbol DOM de la herramienta Elementos .

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

   

6. En la herramienta Orígenes , haga clic index.htmlcon el botón derecho en y seleccione Abrir en la carpeta contenedora.

   Se abre el Explorador de archivos o el Finder.

7. Abra la copia que está en su /Demos/workspace/ directorio en un editor de index.html texto, como Visual Studio Code.

   El <h1> elemento contiene el nuevo texto, "I Love Cake", porque realizó el cambio utilizando el editor de la herramienta Orígenes para editar index.html y luego guardar el cambio, y ese archivo se asignó en un área de trabajo (la pestaña Área de trabajo ), indicado por un punto verde "asignado" en el icono del archivo.

   Muchos desarrolladores no escriben HTML directamente, sino que utilizan enfoques como:

   • Un lenguaje del lado servidor, como Java, Python o PHP.
   • Un generador de sitios, como Eleventy.
   • Un marco del lado cliente que usa código JavaScript.
   • Un lenguaje de marcado distinto de HTML, como Markdown.

   Esto significa que, en la práctica, pocos desarrolladores cambian los archivos HTML en la pestaña Área de trabajo. La mayoría de los desarrolladores producen archivos HTML mediante un tipo diferente de archivo de origen, como un archivo de origen JS del componente de React, y luego se vuelven a compilar y volver a cargar (lo que puede ocurrir automáticamente).

8. Haga clic largo o haga clic con el botón derecho en el botón Actualizar en Microsoft Edge y, a continuación, seleccione Actualización completa (Ctrl+Mayús+R).

   En la pestaña Área de trabajo , aparecen puntos verdes "asignados" en todos los archivos HTML, CSS y JS.

Continúa con la sección siguiente.

Paso 6: Guardar un cambio de JavaScript en disco

Continuando desde arriba, a continuación, editará el archivo JavaScript de la demostración del área de trabajo y guardará los cambios en el archivo de origen. Para guardar las ediciones en un archivo fuente JavaScript, puede usar DevTools como un IDE, después de agregar la carpeta de código fuente en la pestaña Área de trabajo de la herramienta Orígenes . Después, puede editar y guardar el archivo JavaScript en el editor de la herramienta Orígenes .

En la página web de demostración representada, para aplicar estilo al hipervínculo Editar y guardar archivos en un espacio de trabajo (pestaña Área de trabajo de la herramienta Orígenes) con cursiva:

1. En DevTools, seleccione la herramienta Orígenes y, después, seleccione la pestaña Área de trabajo , que se agrupa con la pestaña Página .

2. En la pestaña Área de trabajo , seleccione script.js.

   script.js se abre en una pestaña dentro del panel del editor de la herramienta Orígenes .

3. En el panel del editor, agregue el código siguiente a la parte inferior de script.js:

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

   Aparecerá un asterisco en la script.js pestaña.

4. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS).

   script.js se guarda y el asterisco se quita de la script.js pestaña.

5. Actualice la página.

6. Si ya no hay un punto verde "asignado" en el archivo HTML, JS o CSS, haga clic largo o haga clic con el botón derecho en el botón Actualizar en Microsoft Edge y, a continuación, seleccione Actualización completa (Ctrl+Mayús+R).

   El hipervínculo Editar archivos con áreas de trabajo (o Editar y guardar archivos en un área de trabajo (herramienta Orígenes, pestaña Área de trabajo)) en la página ahora está en cursiva:

   

Continúa con la sección siguiente.

Paso 7: Agregar un archivo .js mediante DevTools

1. En la herramienta Orígenes , en la pestaña Área de trabajo , haga clic con el botón derecho en la /workspaces/ carpeta y, a continuación, seleccione el elemento de menú Nuevo archivo .

   Se agrega un archivo con el nombre NewFile :

   

2. Haga clic NewFile con el botón derecho en la pestaña Área de trabajo y, a continuación, seleccione Cambiar nombre.

3. Cambie el nombre del archivo a test.js.

4. En test.js, agregue la línea: console.log('hello from test.js');

5. En la herramienta Orígenes , en la pestaña Espacio de trabajo , seleccione index.html.

6. En index.html, debajo de la línea <script src="./script.js" defer></script>, agregue la línea: <script src="./test.js" defer></script>

7. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS).

   index.html se guarda.

8. Haga clic largo o haga clic con el botón derecho en el botón Actualizar en Microsoft Edge y, a continuación, seleccione Actualización completa (Ctrl+Mayús+R).

   En la pestaña Área de trabajo , aparecen puntos verdes "asignados" en todos los archivos HTML, CSS y JS:

   

Con esto se completa el tutorial.

Si deseas revertir las ediciones en /workspace/ tu carpeta, puedes usar comandos de git en un símbolo del sistema, o usar GitHub Desktop, para revertir los cambios en la rama actual, como "main" o "test".

Vea también

• Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes)
• Introducción a cómo ver y cambiar CSS
• Introducción a la depuración de JavaScript

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.