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

Siga estos pasos para usar DevTools como IDE, como realizar modificaciones de páginas web en la pestaña Área de trabajo de la herramienta Orígenes y 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 realizados en los archivos del área de trabajo, mediante DevTools, se guardan en el equipo local.

Paso 1: Clonación del 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 Áreas de trabajo.

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

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

2. Vaya a 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 dirección URL al 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 siguiente paso del símbolo del sistema.

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

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

5. Clone el repositorio en la unidad local y escriba la cadena de dirección 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 la clonación de un repositorio, consulte:

• Clonación de un repositorio : documentos de GitHub.

Continúe 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:

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

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

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

   cd ~/GitHub/Demos/workspaces
   pwd
   

   Un directorio para usarlo 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. Cree una rama de trabajo denominada "test" y cambie a ella (para evitar modificar los archivos de la demostración en la rama "principal"):

   git checkout -b test
   

   Eso equivale 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, vea Iniciar el servidor (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. Normalmente, para acceder a él, vaya alocalhost: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.

   Se abre la página web de demostración de áreas de trabajo de DevTools .

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

Vea también:

• Ejecución de un servidor HTTP local sencillo en ¿Cómo configurar un servidor de pruebas local? en MDN: muestra Python.

Continúe con la sección siguiente.

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

A continuación, defina un área de trabajo en DevTools:

1. Haga clic con el botón derecho en la página web de demostración de áreas de trabajo de DevTools hospedada localmente y, a continuación, 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 Área 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 ha creado. 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 pregunta si debe 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 el /Demos/workspace/ directorio:

   

Continúe con la sección siguiente.

Paso 4: Guardar un cambio 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 sus controles de interfaz de usuario, aunque podríamos editar directamente el archivo CSS en el editor de archivos de la pestaña Área de trabajo de la herramienta Orígenes.

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

1. En la herramienta Orígenes , en la pestaña Área de trabajo (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 (); 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 "asignado". El punto verde "asignado" significa que los cambios realizados en esta regla CSS se asignan styles.css en 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 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. Seleccione la herramienta Orígenes , haga clic con el botón styles.cssderecho y, a continuación, seleccione Abrir en la carpeta contenedora.

   se abre Explorador de archivos o Finder.

5. Abra la copia de styles.css que está en el /Demos/workspace/ 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 /Demos/workspace/ directorio del área de trabajo.

6. Actualice 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.

Continúe con la sección siguiente.

Paso 5: Guardar un cambio 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 código HTML en la herramienta Orígenes. (Los cambios no se realizan en el archivo de origen simplemente cambiando el HTML en el árbol DOM de la herramienta Elementos ).

La pestaña Área de trabajo de DevTools es similar al uso de 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 (

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.

   Se abre la pestañaindex.html en la herramienta Orígenes .

3. En la <h1> etiqueta, reemplace "DevTools Workspaces Demo" por "I Love Cake".

   Aparece un asterisco junto a index.html.

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

   El cambio se guarda y el asterisco desaparece.

   Ha realizado 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 el index.html directorio asignado /Demos/workspace/ :

   

6. En la herramienta Orígenes , haga clic con el botón derecho en index.htmly, a continuación, seleccione Abrir en la carpeta contenedora.

   se abre Explorador de archivos o Finder.

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

   El <h1> elemento contiene el nuevo texto, "I Love Cake", porque realizó el cambio mediante el editor de la herramienta Sources para editar index.html y, a continuación, guardó el cambio, y ese archivo se asignó en un área de trabajo (la pestaña Área de trabajo), indicada por un punto verde "asignado" en el icono del archivo.

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

   • Un lenguaje del lado servidor, como Java, Python o PHP.
   • Un generador de sitio, como Undécimo.
   • 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 generan archivos HTML mediante un tipo diferente de archivo de origen, como un archivo de origen JS de componente React y, a continuación, recompilan y vuelven a cargar (lo que puede ocurrir automáticamente).

8. 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).

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

Continúe con la sección siguiente.

Paso 6: Guardar un cambio de JavaScript en el 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 de origen de 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 . A continuación, 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 área de trabajo (pestaña Área de trabajo de la herramienta Orígenes) con cursiva:

1. En DevTools, seleccione la herramienta Orígenes y, a continuación, 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 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';
   

   Aparece 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 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).

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

   

Continúe 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 denominado NewFile :

   

2. Haga clic con el botón NewFile 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 Área 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 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).

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

   

Esto completa el tutorial.

Si desea revertir las modificaciones en /workspace/ la carpeta, puede 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 la visualización y cambio de CSS
• Introducción a la depuración de JavaScript

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

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