Información general sobre la herramienta Orígenes

  • Artículo

Use la herramienta Orígenes para ver, modificar y depurar código de JavaScript de front-end e inspeccionar los recursos que componen la página web actual.

Contenido detallado:

Los paneles Navegador, Editor y Depurador

La herramienta Orígenes tiene tres paneles:

Panel Acciones
Panel Navegador Navegue entre los recursos que se devuelven desde el servidor para construir la página web actual. Seleccione archivos, imágenes y otros recursos y vea sus rutas de acceso. Opcionalmente, configure un área de trabajo local para guardar los cambios directamente en los archivos de origen.
Panel Editor Vea JavaScript, HTML, CSS y otros archivos devueltos desde el servidor. Realice modificaciones experimentales en JavaScript o CSS. Los cambios se conservan hasta que actualice la página o se conservarán después de la actualización de la página si guarda en un archivo local con áreas de trabajo. Cuando se usan áreas de trabajo o invalidaciones, también puede editar archivos HTML.
Panel Depurador Use el depurador de JavaScript para establecer puntos de interrupción, pausar la ejecución de JavaScript y recorrer el código, incluidas las modificaciones que haya realizado, mientras observa las expresiones de JavaScript que especifique. Observe y cambie manualmente los valores de las variables que están en el ámbito de la línea de código actual.

En la ilustración siguiente se muestra el panel Navegador resaltado con un cuadro rojo en la esquina superior izquierda de DevTools, el panel Editor resaltado en la esquina superior derecha y el panel Depurador resaltado en la parte inferior. En el lado izquierdo se encuentra la parte principal de la ventana del explorador, que muestra la página web representada atenuada porque el depurador está en pausa en un punto de interrupción:

Los paneles de la herramienta Orígenes, en un diseño estrecho

Cuando DevTools es ancho, el panel Depurador se coloca a la derecha e incluye Ámbito y Inspección:

Navegar, ver, editar y depurar JavaScript devuelto por el servidor

Para maximizar el tamaño de la herramienta Orígenes, desacoplar DevTools en una ventana independiente y, opcionalmente, mover la ventana DevTools a un monitor independiente. Vea Cambiar la ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Para cargar la página web de demostración de depuración que se muestra anteriormente, consulte El enfoque básico para usar un depurador, a continuación.

Uso del panel Navegador para seleccionar archivos

Use el panel Navegador (a la izquierda) para navegar entre los recursos devueltos desde el servidor para construir la página web actual. Seleccione archivos, imágenes y otros recursos y vea sus rutas de acceso.

Panel Navegador

Para acceder a las pestañas ocultas del panel Navegador, haga clic en el botón Más pestañas (Más pestañas).

Las subsecciones siguientes cubren el panel Navegador:

Uso de la pestaña Página para explorar los recursos que construyen la página web actual

Use la pestaña Página del panel Navegador para explorar el sistema de archivos devuelto desde el servidor para construir la página web actual. Seleccione un archivo JavaScript para verlo, editarlo y depurarlo. En la pestaña Página se enumeran todos los recursos que la página ha cargado.

Pestaña Página del panel Navegador de la herramienta Orígenes

Para mostrar un archivo en el panel Editor , seleccione un archivo en la pestaña Página . Para una imagen, se muestra una vista previa de la imagen.

Para mostrar la dirección URL o la ruta de acceso de un recurso, mantenga el puntero sobre el recurso.

Para cargar un archivo en una nueva pestaña del explorador o para mostrar otras acciones, haga clic con el botón derecho en el nombre de archivo.

Iconos de la pestaña Página

La pestaña Página usa los iconos siguientes:

  • El icono de ventana , junto con la etiqueta top, representa el marco principal del documento, que es un marco HTML: el icono de ventana
  • El icono de nube representa un origen: el icono de nube
  • El icono de carpeta representa un directorio: el icono de carpeta
  • El icono de página representa un recurso: el icono de página
Agrupar archivos por carpeta o como lista plana

La pestaña Página muestra archivos o recursos agrupados por servidor y directorio, o como una lista plana.

Para cambiar la forma en que se agrupan los recursos:

  1. Junto a las pestañas del panel Navegador (a la izquierda), seleccione el botón ... (Más opciones). Aparece un menú.
  2. Seleccione o desactive la opción Agrupar por carpeta .

Uso de la pestaña Sistema de archivos para definir un área de trabajo local

Use la pestaña Sistema de archivos del panel Navegador para agregar archivos a un área de trabajo, de modo que los cambios realizados en DevTools se guarden en el sistema de archivos local.

Pestaña Sistema de archivos, para un área de trabajo

De forma predeterminada, al editar un archivo en la herramienta Orígenes , los cambios se descartan al actualizar la página web. La herramienta Orígenes funciona con una copia de los recursos front-end devueltos por el servidor web. Al modificar estos archivos front-end devueltos por el servidor, los cambios no se conservan porque no ha cambiado los archivos de origen. También debe aplicar las modificaciones en el código fuente real y, a continuación, volver a implementar en el servidor.

Por el contrario, al usar un área de trabajo, los cambios realizados en el código front-end se conservan al actualizar la página web. Con un área de trabajo, al editar el código front-end devuelto por el servidor, la herramienta Orígenes también aplica las modificaciones al código fuente local. A continuación, para que otros usuarios vean los cambios, solo tiene que volver a implementar los archivos de origen modificados en el servidor.

Las áreas de trabajo funcionan bien cuando el código JavaScript devuelto por el servidor es el mismo que el código fuente de JavaScript local. Las áreas de trabajo no funcionan tan bien cuando el flujo de trabajo implica transformaciones en el código fuente, como la minificación o la compilación de TypeScript .

Consulta también:

Uso de la pestaña Invalidaciones para invalidar archivos de servidor con archivos locales

Use la pestaña Invalidaciones del panel Navegador para invalidar los recursos de página (como imágenes) con archivos de una carpeta local.

Los elementos de esta pestaña invalidan lo que el servidor envía al explorador, incluso después de que el servidor haya enviado los recursos.

Pestaña Invalidaciones del panel Navegador

La característica Invalidaciones es similar a Áreas de trabajo. Use Invalidaciones cuando desee experimentar con cambios en una página web y debe conservar los cambios después de actualizar la página web, pero no le importa asignar los cambios al código fuente de la página web.

Un archivo que invalida un archivo devuelto por el servidor se indica mediante un punto púrpura junto al nombre de archivo, en DevTools.

Consulta también:

Uso de la pestaña Scripts de contenido para extensiones de Microsoft Edge

Use la pestaña Scripts de contenido del panel Navegador para ver los scripts de contenido cargados por una extensión de Microsoft Edge que haya instalado.

Pestaña Scripts de contenido del panel Navegador

Cuando el depurador entra en el código que no reconoce, es posible que quiera agregar ese código a la lista Omitir para evitar entrar en ese código. Consulte Agregar scripts de contenido a la lista omitir.

Consulta también:

Uso de la pestaña Fragmentos de código para ejecutar fragmentos de código de JavaScript en cualquier página web

Use la pestaña Fragmentos de código del panel Navegador para crear y guardar fragmentos de código de JavaScript, de modo que pueda ejecutar fácilmente estos fragmentos de código en cualquier página web.

Fragmento de código que inserta la biblioteca jQuery en una página web

Por ejemplo, supongamos que escribe con frecuencia el código siguiente en la consola para insertar la biblioteca jQuery en una página de modo que pueda ejecutar comandos de jQuery desde la consola:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

En su lugar, puede guardar este código en un fragmento de código y, a continuación, ejecutarlo fácilmente cuando sea necesario. Al presionar Ctrl+S (Windows, Linux) o Comando+S (macOS), DevTools guarda el fragmento de código en el sistema de archivos.

Hay varias maneras de ejecutar un fragmento de código:

  • En el panel Navegador , seleccione la pestaña Fragmentos de código y, a continuación, seleccione el archivo de fragmentos de código para abrirlo. A continuación, en la parte inferior del panel Editor, seleccione Ejecutar (el botón Ejecutar).
  • Cuando DevTools tenga el foco, presione Ctrl+P (Windows, Linux) o Comando+P (macOS) para abrir el menú Comando y, a continuación, escriba !.

Los fragmentos de código son similares a los bookmarklets.

Consulta también:

Uso del menú Comandos para abrir archivos

Para abrir un archivo, además de usar el panel Navegador dentro de la herramienta Orígenes , puede usar el menú Comando desde cualquier lugar dentro de DevTools.

  • Desde cualquier lugar de DevTools, presione Ctrl+P en Windows/Linux o Comando+P en macOS. Aparece el menú Comando y enumera todos los recursos que se encuentran en las pestañas del panel Navegador de la herramienta Orígenes .
  • O bien, junto a las pestañas del panel Navegador de la herramienta Orígenes , seleccione el botón ... (Más opciones) y, a continuación, seleccione Abrir archivo.

Para mostrar y seleccionar de una lista de todos los archivos .js, escriba .js.

Abrir un archivo mediante el menú Comando

Si escribe ?, el menú Comando muestra varios comandos, incluido ... Abra el archivo. Si presiona Retroceso para borrar el menú Comando, se muestra una lista de archivos.

Para obtener más información, vea Ejecutar comandos con el menú de comandos DevTools de Microsoft Edge.

Uso del panel Editor para ver o editar archivos

Use el panel Editor para ver los archivos front-end que se devuelven desde el servidor para crear la página web actual, incluidos javascript, HTML, CSS y archivos de imagen. Al editar los archivos front-end en el panel Editor , DevTools actualiza la página web para ejecutar el código modificado.

Panel Editor de la herramienta Orígenes

El panel Editor tiene el siguiente nivel de compatibilidad con varios tipos de archivo:

Tipo de archivo Acciones admitidas
JavaScript Ver, editar y depurar.
CSS Ver y editar.
HTML Ver y editar.
Imágenes Ver.

De forma predeterminada, las modificaciones se descartan al actualizar la página web. Para obtener información sobre cómo guardar los cambios en el sistema de archivos, consulte Uso de la pestaña Sistema de archivos para definir un área de trabajo local, anteriormente.

Las subsecciones siguientes cubren el panel Editor:

Consulta también:

Edición de un archivo JavaScript

Para editar un archivo JavaScript en DevTools, use el panel Editor , dentro de la herramienta Orígenes .

Edición de JavaScript en el panel Editor

Para cargar un archivo en el panel Editor, use la pestaña Página del panel Navegador (a la izquierda). O bien, use el menú Comando, como se indica a continuación: en la esquina superior derecha de DevTools, seleccione Personalizar y controlar DevTools (...) y, a continuación, seleccione Abrir archivo.

Consulta también:

Guardar y deshacer

Para que los cambios de JavaScript surtan efecto, presione Ctrl+S (Windows, Linux) o Comando+S (macOS).

Si cambia un archivo, aparece un asterisco junto al nombre de archivo.

  • Para guardar los cambios, presione Ctrl+S en Windows/Linux o Comando+S en macOS.
  • Para deshacer un cambio, presione Ctrl+Z en Windows/Linux o Comando+Z en macOS.

De forma predeterminada, las modificaciones se descartan al actualizar la página web. Para obtener más información sobre cómo guardar los cambios en el sistema de archivos local, vea Editar archivos con áreas de trabajo (pestaña Sistema de archivos).

Buscar y reemplazar

Para buscar texto en el archivo actual, seleccione el panel Editor para darle el foco y, a continuación, presione Ctrl+F en Windows/Linux o Comando+F en macOS.

Buscar y reemplazar, en el panel Editor de la herramienta Orígenes

Para buscar y reemplazar texto, seleccione el botón Reemplazar (A-B>) situado a la izquierda del cuadro de texto Buscar. El botón Reemplazar (A-B>) aparece al ver un archivo editable.

Volver a formatear un archivo JavaScript minificado con impresión bonita

Los archivos minificados se reforman automáticamente al abrirlos en el panel Editor.

Para revertir el archivo a su estado minificado original, haga clic en el botón Imprimir bastante (Formato), que se muestra como llaves, en la parte inferior del panel Editor.

Botón De impresión bonita

Para obtener más información, vea Reformatear un archivo JavaScript minificado con impresión bonita.

Asignación de código minificado al código fuente para mostrar código legible

Los mapas de origen de los preprocesadores hacen que DevTools cargue los archivos de origen de JavaScript originales, además de los archivos JavaScript minificados y transformados devueltos por el servidor. A continuación, verá los archivos de origen originales mientras establece puntos de interrupción y recorre el código. Mientras tanto, Microsoft Edge está ejecutando realmente el código minificado.

En el panel Editor , si hace clic con el botón derecho en un archivo JavaScript y, a continuación, selecciona Agregar mapa de origen, aparece un cuadro emergente con un cuadro de texto Dirección URL de mapa de origen y un botón Agregar .

El enfoque de asignación de origen mantiene el código front-end legible y depurable incluso después de combinarlo, minimizarlo o compilarlo. Para obtener más información, consulte Asignación del código procesado al código fuente original para la depuración.

Transformaciones del código fuente al código front-end compilado

Si usa un marco que transforme los archivos de JavaScript, como React, el código JavaScript de origen local podría ser diferente del javaScript de front-end devuelto por el servidor. Las áreas de trabajo no se admiten en este escenario, pero en este escenario se admite la asignación de código fuente.

En un entorno de desarrollo, el servidor puede incluir los mapas de origen y los archivos originales .ts o .jsx para React. La herramienta Orígenes muestra estos archivos, pero no le permite editarlos. Cuando se establecen puntos de interrupción y se usa el depurador, DevTools muestra los archivos originales .ts o .jsx , pero, en realidad, recorre la versión minificada de los archivos de JavaScript.

En este escenario, la herramienta Orígenes es útil para inspeccionar y recorrer paso a paso el JavaScript de front-end transformado que se devuelve desde el servidor. Use el depurador para definir expresiones watch y use la consola para escribir expresiones de JavaScript con el fin de manipular los datos que están en el ámbito.

Edición de un archivo CSS

Hay dos maneras de editar CSS en DevTools:

  • En la herramienta Elementos , se trabaja con una propiedad CSS a la vez, a través de controles de interfaz de usuario. Este enfoque se recomienda en la mayoría de los casos. Para obtener más información, consulte Introducción a la visualización y el cambio de CSS.
  • En la herramienta Orígenes , se usa un editor de texto para editar archivos CSS.

La herramienta Orígenes admite la edición directa de un archivo CSS. Por ejemplo, si edita el archivo CSS del tutorial Editar archivos con áreas de trabajo (pestaña Sistema de archivos) para que coincida con la regla de estilo siguiente, el H1 elemento de la parte superior izquierda de la página web representada cambia a verde:

h1 {
  color: green;
}

Editar CSS en el panel Editor para cambiar el color de texto del encabezado H1 a verde

Los cambios css surten efecto inmediatamente; no es necesario guardar manualmente los cambios.

Consulta también:

Edición de un archivo HTML

Hay dos maneras de editar HTML en DevTools:

  • En la herramienta Elementos , se trabaja con un elemento HTML a la vez, a través de controles de interfaz de usuario.
  • En la herramienta Orígenes , se usa un editor de texto.

Editor HTML de la herramienta Orígenes

A diferencia de un archivo JavaScript o CSS, un archivo HTML devuelto por el servidor web no se puede editar directamente en la herramienta Orígenes. Para editar un archivo HTML mediante el Editor de la herramienta Orígenes, el archivo HTML debe estar en un área de trabajo o en la pestaña Invalidaciones . Consulte estas subsecciones del artículo actual:

Para guardar los cambios, presione Ctrl+S en Windows/Linux o Comando+S en macOS. Un archivo editado está marcado con un asterisco.

Para buscar texto, presione Ctrl+F en Windows/Linux o Comando+F en macOS.

Para deshacer una edición, presione Ctrl+Z en Windows/Linux o Comando+Z en macOS.

Para ver otros comandos al editar un archivo HTML, en el panel Editor, haga clic con el botón derecho en el archivo HTML.

Consulta también:

Ir a un número de línea o función

Para ir a un número de línea o símbolo (por ejemplo, un nombre de función) en el archivo que está abierto en el panel Editor, puede usar el menú Comando, en lugar de desplazarse por el archivo.

  1. En el panel Navegador , seleccione los puntos suspensivos (...) (Más opciones) y, a continuación, seleccione Abrir archivo. Aparece el menú Comando.
  2. Escriba uno de los siguientes caracteres:
Carácter Nombre del comando Propósito
: Ir a la línea Vaya a un número de línea.
@ Ir al símbolo Vaya a una función. Al escribir @, el menú Comando enumera las funciones que se encuentran en el archivo JavaScript que está abierto en el panel Editor.

Para obtener más información, vea Ejecutar comandos con el menú de comandos DevTools de Microsoft Edge.

Mostrar archivos de origen cuando se usa una herramienta diferente

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 en el cajón, que aparece en la parte inferior de DevTools.

Para usar la herramienta de origen rápido :

  1. Seleccione una herramienta que no sea la herramienta Orígenes , como la herramienta Elementos .

  2. Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Se abre el menú Comando.

  3. Escriba quick y, a continuación, seleccione Show Quick source (Mostrar origen rápido).

    En la parte inferior de la ventana DevTools, aparece el cajón, con la herramienta Origen rápido seleccionada. La herramienta De origen rápido contiene el último archivo que editó en la herramienta Orígenes , dentro de una versión compacta del editor de código de DevTools.

  4. Presione Ctrl+P (Windows, Linux) o Comando+P (macOS) para abrir el cuadro de diálogo Abrir archivo .

Uso del panel Depurador para depurar código JavaScript

Use el depurador de JavaScript para recorrer paso a paso el código JavaScript devuelto por el servidor. El depurador incluye el panel Depurador , junto con los puntos de interrupción que se establecen en las líneas de código del panel Editor .

Con el depurador, recorrerá el código mientras observa las expresiones de JavaScript que especifique. Vea y cambie manualmente los valores de las variables y muestre automáticamente qué variables están en el ámbito de la instrucción actual.

Panel Depurador de la herramienta Orígenes

El depurador admite acciones de depuración estándar, como:

  • Establecer puntos de interrupción para pausar el código.
  • Paso a paso por código.
  • Visualización y edición de propiedades y variables.
  • Ver los valores de las expresiones de JavaScript.
  • Ver la pila de llamadas (la secuencia de llamadas de función hasta ahora).

El depurador de DevTools está diseñado para buscar, sentir y trabajar como el depurador en Visual Studio Code y el depurador en Visual Studio.

Las subsecciones siguientes cubren la depuración:

El enfoque básico para usar un depurador

Para solucionar problemas de código JavaScript, puede insertar console.log() instrucciones en el código. Otro enfoque más eficaz es usar el depurador de Microsoft Edge DevTools. El uso de un depurador puede ser más sencillo que console.log(), una vez que esté familiarizado con el enfoque del depurador.

Para usar un depurador en una página web, normalmente se establece un punto de interrupción y, a continuación, se envía un formulario desde la página web, como se indica a continuación:

  1. Abra la página web Demo: Get Started Debugging JavaScript with Microsoft Edge DevTools (Demostración: Introducción a la depuración de JavaScript con Microsoft Edge DevTools ) en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en cualquier lugar de la página web y, a continuación, seleccione Inspeccionar. O bien, presione F12. Se abre la ventana DevTools , junto a la página web de demostración.

  3. En DevTools, seleccione la pestaña Orígenes .

  4. En el panel Navegador (a la izquierda), seleccione la pestaña Página y, a continuación, seleccione el archivo JavaScript, como get-started.js.

  5. En el panel Editor , seleccione un número de línea cerca de una línea de código sospechosa para establecer un punto de interrupción en esa línea. En la ilustración siguiente, se establece un punto de interrupción en la línea var sum = addend1 + addend2;.

  6. En la página web, escriba valores y envíe el formulario. Por ejemplo, escriba números, como 5 y 1, y seleccione el botón Agregar número 1 y Número 2.

    El depurador ejecuta el código JavaScript y, a continuación, se pausa en el punto de interrupción. El depurador está ahora en modo en pausa, por lo que puede inspeccionar los valores de las propiedades que están en el ámbito y recorrer el código.

    Introducción al modo en pausa del depurador

    En la ilustración anterior, agregamos las expresiones sum Watch y , y typeof sumescalonamos dos líneas más allá del punto de interrupción.

  7. Examine los valores del panel Ámbito , que muestra todas las variables o propiedades que están en el ámbito para el punto de interrupción actual y sus valores.

    En este momento, podría agregar expresiones en el panel Inspección . Estas expresiones son las mismas expresiones que escribiría dentro de una console.log instrucción para depurar el código.

    Para ejecutar comandos de JavaScript para manipular datos en el contexto actual, use la consola. Si desea abrir la consola en el cajón en la parte inferior de DevTools, presione Esc.

  8. Recorra el código mediante los controles de la parte superior del panel Depurador , como Paso (F9).

    El error de esta demostración es que primero debe convertir los datos de entrada de cadenas a números.

  9. Para corregir el error, actualice la página para restablecer el formulario de página web y, a continuación, cambie la línea:

    var sum = addend1 + addend2;

    Para:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS) para guardar el cambio en el archivo almacenado en caché local.

  11. Escriba 5 y 1 en la página web y haga clic en el botón Agregar . Ahora Scope>Local>sum : es el número 6, en lugar de la cadena "51".

Consulta también:

Ventajas de la inspección y el ámbito del depurador sobre console.log

Estos tres enfoques son equivalentes:

  • Agregar temporalmente las instrucciones console.log(sum) y console.log(typeof sum) en el código, donde sum está en el ámbito.

  • Emitir las instrucciones sum y console.log(typeof sum) en el panel Consola de DevTools, cuando el depurador está en pausa donde sum está en el ámbito.

  • Establecer las expresiones sumde inspección y typeof sum en el panel Depurador.

Cuando la variable sum está en el ámbito y sum su valor se muestra automáticamente en la sección Ámbito del panel Depurador , y también se superponen en el panel Editor donde sum se calcula. Por lo tanto, probablemente no necesitaría definir una expresión Watch para sum.

El depurador proporciona una pantalla y un entorno más completos y flexibles que una console.log instrucción . Por ejemplo, en el depurador, a medida que recorra el código, puede mostrar y cambiar los valores de todas las propiedades y variables definidas actualmente. También puede emitir instrucciones JavaScript en la consola, como para cambiar los valores de una matriz que está en el ámbito. (Para mostrar la consola, presione Esc).

Los puntos de interrupción y las expresiones watch se conservan al actualizar la página web.

Depuración desde Visual Studio Code directamente

Para usar el depurador más completo de Visual Studio Code en lugar del depurador de DevTools, use la extensión Microsoft Edge DevTools para Visual Studio Code.

La extensión Microsoft Edge DevTools para Visual Studio Code

Esta extensión proporciona acceso a las herramientas Elements y Network de Microsoft Edge DevTools, desde Microsoft Visual Studio Code.

Para obtener más información, consulte Visual Studio Code para el desarrollo web y la página Léame de GitHub, Herramientas de desarrollo de Microsoft Edge para Visual Studio Code.

Artículos sobre depuración

En los artículos siguientes se tratan el panel Depurador y los puntos de interrupción:

Ver 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 (Technical Writer, Chrome DevTools & Lighthouse).

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