Mostrar o editar archivos de origen con la herramienta Origen rápido

Use la herramienta Origen rápido para mostrar o editar archivos de origen al mismo tiempo que muestra una herramienta distinta de la herramienta Orígenes . La herramienta 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 es dentro de la herramienta Orígenes . Pero a veces necesita acceder a otras herramientas, como Elementos o Consola, mientras ve o edita sus archivos de origen. Use la herramienta Origen rápido , que se abre de forma predeterminada en el panel Vista rápida en la parte inferior de DevTools.

Usar la herramienta Origen rápido junto con la herramienta Orígenes

Para mostrar la herramienta Origen rápido en la Vista rápida , en la parte inferior de DevTools, una herramienta distinta de la herramienta Orígenes debe estar abierta en la barra de actividades en la parte superior de DevTools.

La herramienta Origen rápido proporciona una presentación alternativa de los archivos que están abiertos en la herramienta Orígenes . La herramienta Origen rápido tiene un subconjunto de características. Para obtener características completas, utilice 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 de principio a fin con todos los pasos para demostrar la herramienta 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 la herramienta Origen rápido al mismo tiempo que se muestra una herramienta diferente, y hacer que esas ediciones se guarden en la unidad local. De esta forma, puede editar archivos en la herramienta Origen rápido mientras usa otra herramienta, como Elementos o Red, y hacer que las ediciones se guarden en el archivo de origen correspondiente en la unidad local.

Para editar los archivos de origen en la herramienta Origen rápido , deberá hacer 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 (icono de la ), 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 Actividades, seleccione una herramienta que no sea la herramienta Orígenes , como la herramienta Elementos .

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

Estos pasos se detallan en el tutorial a continuación.

Tener archivos de origen locales, como un repositorio clonado

Para usar la herramienta 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 coincidan con los archivos transitorios que devuelve el servidor web.

Por ejemplo, si aún no lo ha hecho, clone el repositorio de 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 al repositorio de MicrosoftEdge / Demos en una nueva ventana o pestaña.

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

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

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

7. Clone el repositorio en la unidad local e introduzca la cadena de 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 cómo clonar un repositorio, consulte:

   • Clone el repositorio "MicrosoftEdge / Demos" en la unidad en Código de ejemplo para DevTools.
   • Clone el repositorio de WebView2Samples en Configuración del entorno de desarrollo para WebView2. Muestra un repositorio de ejemplo diferente, pero muestra pasos para varias herramientas.
   • Clonar un repositorio : documentación de GitHub

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

Continúa con la sección siguiente.

Iniciar un servidor localhost

1. Vaya a un símbolo del sistema, como el shell de git bash o el panel Terminal en 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 git bash, es un shell UNIX, por lo que incluso en Windows, debe envolver una ruta de directorio que tenga barras invertidas entre comillas, o bien usar barras diagonales en lugar de barras invertidas.

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

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, 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/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. Para poder obtener acceso a él, mediante localhost: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 .

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.

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

1. Continuando desde arriba, haz clic con el botón derecho en la página web de demostración y después selecciona Inspeccionar.

   Se abre DevTools.

2. En la barra de actividades de la parte superior de DevTools, seleccione la herramienta Orígenes (icono de la ), seleccione la pestaña Área de trabajo (agrupada con la pestaña Página ) y, a continuación, en la pestaña Espacio 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 luego haga clic en el botón Seleccionar carpeta .

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

4. Haga clic en el botón permitir .

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

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 :

   

Abrir la herramienta Origen rápido y editar un archivo

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

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

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

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

   La herramienta Origen rápido se abre en la Vista rápida en la parte inferior de DevTools:

   

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

4. En la página web de To Do de demostración, elimine todas las tareas.

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

   En la herramienta Origen rápido , aparece la interfaz de usuario de Buscar .

6. No escriba ninguna tarea y presione Entrar.

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

   Se mostrará un asterisco en la pestaña nombre de archivo.

8. Presione Ctrl+S.

   El asterisco se quitará de la pestaña nombre de archivo.

9. Actualiza 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, mantenga el clic 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).

    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 ediciones no solo se realizan en el archivo transitorio devuelto por el servidor, sino que también se guardan en los archivos de origen en la unidad local. Puede editar el archivo desde la herramienta Origen rápido al mismo tiempo que se muestra otra herramienta (o desde 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 lainformació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 disco en el tutorial del área de trabajo (herramienta Orígenes, pestaña Área de trabajo)

Abrir un archivo mediante el menú de comandos

Al abrir un archivo mediante el menú de comandos , se abre ese archivo en las herramientas Origen rápido y Orígenes .

Para abrir el menú de comandos, realice una de las siguientes acciones:

• Seleccione Personalizar y controlar elcomando Ejecutar de DevTools>.

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

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

Para abrir un archivo mediante la ventana Abrir archivo del menú de comandos, realice una de las siguientes acciones:

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

• Seleccione Personalizar y controlar DevTools>Abrir archivo.

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

• Cuando la herramienta 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 la indicación Abrir archivo del menú de comandos .

  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 hacer que el panel Vista rápida sea más alto.

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

La herramienta Origen rápido tiene una interfaz de usuario optimizada. 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, mantenga el mouse o haga clic con el botón derecho en el botón Actualizar de Microsoft Edge y después seleccione Hard refresh (Ctrl+Mayús+R).

• Ctrl+P : abra un archivo mediante el menú de comandos. Equivale a ir a la herramienta Orígenes y hacer clic en un archivo en la pestaña Espacio de trabajo .

Cerrar un archivo

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

El archivo se cierra en las herramientas Origen rápido y Orígenes .

Vea también

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