Mostrar o editar archivos de origen mediante la herramienta de origen rápido

Use la herramienta De origen rápido para mostrar o editar archivos de origen al mismo tiempo que muestra una herramienta que no sea la herramienta Orígenes . La herramienta De origen rápido siempre muestra los mismos archivos que están abiertos en la herramienta Orígenes .

El lugar principal para ver los archivos de origen en DevTools está dentro de la herramienta Orígenes . Pero a veces es necesario acceder a otras herramientas, como Elementos o Consola, al ver o editar los archivos de origen. Use la herramienta De origen rápido , que se abre de forma predeterminada en el panel Vista rápida de la parte inferior de DevTools.

Uso de la herramienta De origen rápido junto con la herramienta Orígenes

Para mostrar la herramienta De origen rápido en vista rápida en la parte inferior de DevTools, una herramienta distinta de la herramienta Orígenes debe estar abierta en la barra de actividad de la parte superior de DevTools.

La herramienta De origen rápido proporciona una presentación alternativa de los archivos que están abiertos en la herramienta Orígenes . La herramienta de origen rápido tiene un subconjunto de características. Para obtener características completas, use la herramienta Orígenes .

Si abre o cierra un archivo en una herramienta, el archivo se abre o cierra en la otra herramienta. En ambas herramientas, hay una pestaña para cada archivo abierto.

Editar archivos de origen locales en DevTools seleccionando una carpeta Área de trabajo

Este es un tutorial completo de todos los pasos para mostrar la herramienta de origen rápido mediante la aplicación web ToDo en el repositorio MicrosoftEdge/Demos .

Al seleccionar una carpeta local como área de trabajo en la herramienta Orígenes , puede editar archivos desde dentro de la herramienta De origen rápido al mismo tiempo que mostrar una herramienta diferente y guardar esas modificaciones en la unidad local. De este modo, puede editar archivos en la herramienta De origen rápido mientras usa otra herramienta, como Elements o Network, y hacer que las modificaciones se guarden en el archivo de origen correspondiente en la unidad local.

Para editar archivos de origen en la herramienta De origen rápido , hará lo siguiente:

1. Tener acceso a los archivos de origen de la página web localmente, como un repositorio clonado.

2. En la pestaña Área de trabajo de la herramienta Orígenes (), agregue una carpeta local de archivos de origen.

3. En la pestaña Área de trabajo , abra un archivo, como un .js archivo.

4. En la barra de actividad, seleccione una herramienta distinta de la herramienta Orígenes , como la herramienta Elementos .

5. En el panel Vista rápida de la parte inferior de DevTools, abra la herramienta De origen rápido . El archivo abierto .js se muestra en un editor simplificado y se sigue mostrando la herramienta Elementos .

Estos pasos se detallan en el tutorial siguiente.

Tener archivos de origen locales, como un repositorio clonado

Para usar la herramienta de origen rápido para guardar los cambios localmente, debe tener archivos de origen locales que coincidan con los archivos del servidor web. Asegúrese de que hay archivos de origen en la unidad local que coinciden con los archivos transitorios devueltos por el servidor web.

Por ejemplo, si aún no lo ha hecho, clone el repositorio MicrosoftEdge/Demos en la unidad local, como se indica a continuación:

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

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

3. Vaya a MicrosoftEdge/Demos en una nueva ventana o pestaña.

4. Haga clic en el botón desplegable Código .

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

6. Suponiendo que tiene git instalado, abra un símbolo del sistema.

7. Clone el repositorio en la unidad local y escriba la cadena de dirección URL que copió del repositorio de GitHub. Si usa un símbolo del sistema:

   # 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:

   • Clone el repositorio de Demostraciones de Edge en la unidad en código de ejemplo para DevTools.
   • Clone el repositorio WebView2Samples en Configurar el entorno de desarrollo para WebView2. Muestra un repositorio de ejemplo diferente, pero muestra los pasos para varias herramientas.
   • Clonación de un repositorio : documentos de GitHub.

Ahora tiene una carpeta local de archivos de origen (como /demo-to-do/) que coinciden con los archivos del servidor web.

Continúe con la sección siguiente.

Inicio de un servidor localhost

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

2. Vaya al directorio clonado /demo-to-do/ , como C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   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.

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

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

   # Node.js option
   cd ~/GitHub/demos/demo-to-do
   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 ~/GitHub/demos/demo-to-do
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/GitHub/demos/demo-to-do
   python -m http.server  # Python 3
   

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

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

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.

Seleccione una carpeta local de archivos de origen como área de trabajo.

1. Continuando desde arriba, haga clic con el botón derecho en la página web de demostración y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

2. En la barra de actividad de la parte superior de DevTools, seleccione la herramienta Orígenes (), seleccione la pestaña Área de trabajo (agrupada con la pestaña Página ) y, a continuación, en la pestaña Área de trabajo , haga clic en el botón Agregar carpeta .

   Se abre el cuadro de diálogo Seleccionar carpeta .

3. Vaya a una carpeta, como C:\Users\localAccount\GitHub\Demos\demo-to-do, y haga clic en el botón Seleccionar carpeta .

   En la parte superior de DevTools, un mensaje indica que DevTools solicita acceso completo a la <ruta de acceso>.

4. Haga clic en el botón Permitir .

   El árbol de demo-to-do archivos aparece en la pestaña Área de trabajo de la herramienta Orígenes . Los archivos HTML, JS y CSS tienen un punto "asignado" verde.

5. En la pestaña Área de trabajo , expanda el árbol de archivos y, a continuación, haga clic en uno o varios archivos, como to-do.js.

   El archivo se abre en la herramienta Orígenes :

   

Abra la herramienta De origen rápido y edite un archivo.

Supongamos que desea seguir viendo la herramienta Elementos , pero desea ver y editar simultáneamente los archivos de origen que se abrieron a través de la herramienta Orígenes .

1. Continuando desde arriba, en la barra de actividad de la parte superior de DevTools, seleccione una herramienta que no sea la herramienta Orígenes (), como la herramienta Elementos (icono de ).

2. Si la barra de herramientas vista rápida no se muestra en la parte inferior de DevTools, presione Esc.

3. En la barra de herramientas Vista rápida de la parte inferior de DevTools, haga clic en el botón Más herramientas y, a continuación, seleccione Origen rápido.

   La herramienta De origen rápido se abre en la vista rápida en la parte inferior de DevTools:

   

   todo.js se muestra, porque ese archivo está abierto en la herramienta Orígenes .

4. En la página web de demostración De tareas pendientes, elimine las tareas.

5. Haga clic en el panel Origen rápido y, a continuación, presione Ctrl+F.

   En la herramienta De origen rápido , aparece la interfaz de usuario buscar .

6. No escriba ninguna tarea y, a continuación, presione Entrar.

7. En la línea de código, cambie no tasks a 0 tasks.

   Aparece un asterisco en la pestaña nombre de archivo.

8. Presione Ctrl+S.

   El asterisco se quita de la pestaña de nombre de archivo.

9. Actualice la página web de demostración (Ctrl+R).

10. Si la página web representada no cambia de "No" a "0", y ya no hay un punto verde "asignado" en la pestaña nombre de archivo JS, 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).

    La página web representada cambia de "No" a "0", y hay un punto verde "asignado" en la pestaña nombre de archivo JS.

    

Ahora, al editar los archivos de la carpeta en DevTools, las modificaciones no solo se realizan en el archivo transitorio devuelto por el servidor, sino que también se guardan en los archivos de origen de la unidad local. Puede editar el archivo desde dentro de la herramienta De origen rápido al mismo tiempo que muestra otra herramienta (o desde dentro de la herramienta Orígenes ).

Este es el final de los pasos del tutorial.

Vea también:

• Agregue una carpeta local al área de trabajo para usar DevTools para editar archivos y guardar los cambios en el disco en Información general de la herramienta Orígenes.
• Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes)
  • Paso 6: Guardar un cambio de JavaScript en el disco en el tutorial del área de trabajo (pestaña Área de trabajo de la herramienta Orígenes)

Abrir un archivo mediante el menú Comando

Al abrir un archivo mediante el menú Comando, se abre ese archivo tanto en la herramienta De origen rápido como en la herramienta Orígenes .

Para abrir el menú De comandos, haga lo siguiente:

• Seleccione Personalizar y controlar el comando DevTools>Run.

• Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS).

• Haga clic en el vínculo Ejecutar comando en la herramienta de origen rápido vacía (o en la herramienta Orígenes ).

Para abrir un archivo mediante el símbolo del sistema Abrir archivo del menú Comando, haga lo siguiente:

• Seleccione Herramienta> OrígenesMás opciones (junto a la pestaña Página) >Abrir archivo.

• Seleccione Personalizar y controlar Archivo abierto de DevTools>.

• Presione Ctrl+P (Windows, Linux) o Comando+P (macOS).

• Cuando la herramienta de origen rápido (o la herramienta Orígenes ) esté vacía, haga clic en el vínculo Abrir archivo en las instrucciones de la herramienta:

  

  Se muestra el símbolo del sistema Abrir archivo del menú Comando .

  Para mostrar el vínculo Abrir archivo en las instrucciones del panel, es posible que tenga que desplazarse hacia abajo o arrastrar el divisor de vista rápida hacia arriba para que el panel Vista rápida sea más alto.

Métodos abreviados de teclado en la herramienta De origen rápido

La herramienta de origen rápido tiene una interfaz de usuario simplificada. Use estos métodos abreviados de teclado.

• Ctrl+F - Buscar.

• Ctrl+S - Guardar. Si ya no hay un punto verde "asignado" en el nombre de 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).

• Ctrl+P : abra un archivo mediante el menú Comando. Esto es lo mismo que ir a la herramienta Orígenes y, a continuación, hacer clic en un archivo en la pestaña Área de trabajo .

Cerrar un archivo

Para cerrar un archivo, haga clic en el botón x de la pestaña del archivo.

El archivo se cierra en la herramienta De origen rápido y en la herramienta Orígenes .

Vea también

• Información general sobre la herramienta Orígenes
  • Herramienta de origen rápido para mostrar archivos de origen cuando se usa una herramienta diferente en Información general de la herramienta Orígenes
  • Realizar un seguimiento de los cambios en los archivos mediante la herramienta Cambios