Compartir a través de

Información general sobre la herramienta Orígenes

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

El panel Navegador contiene las pestañas siguientes:

Tabulador Descripción Documentos
Página Vea los recursos que descargó el explorador del servidor o sistema de archivos, inspeccione su contenido y depure código. Uso de la pestaña Página para explorar los recursos que construyen la página web actual
Área de trabajo Vea y edite archivos locales en DevTools para usar DevTools como entorno de desarrollo integrado (IDE) dentro del explorador. Agregue una carpeta local al área de trabajo para usar DevTools para editar archivos y guardar los cambios en el disco.
Invalidaciones Experimente con los cambios en una página web y mantenga los cambios después de actualizar la página web, sin asignar los cambios al código fuente de la página web. Uso de la pestaña Invalidaciones para invalidar archivos de servidor con archivos locales
Scripts de contenido Ver los scripts de contenido cargados por una extensión de Microsoft Edge. Uso de la pestaña Scripts de contenido para extensiones de Microsoft Edge
Fragmentos de código Cree y guarde fragmentos de código de JavaScript para que pueda ejecutar fácilmente un fragmento de código de JavaScript en cualquier página web. Uso de la pestaña Fragmentos de código para ejecutar fragmentos de código de JavaScript en cualquier página

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

A continuación se detallan los detalles. También a continuación: Usar el menú Comando para abrir archivos.

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

La pestaña Página de la herramienta Orígenes muestra los recursos que usa la página web actual, como el documento HTML de la página web, los archivos JavaScript, los archivos CSS o las imágenes. Los recursos mostrados en la pestaña Página se organizan en un árbol que coincide con el sistema de archivos o la ruta de acceso del servidor desde el que se descargaron.

Use la pestaña Página para ver los recursos que descargó el explorador del servidor o sistema de archivos, inspeccionar su contenido y depurar código.

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), haga clic en el botón ... (Más opciones). Aparece un menú.
  2. Seleccione o desactive la opción Agrupar por carpeta .

Agregue una carpeta local al área de trabajo para usar DevTools para editar archivos y guardar los cambios en el disco.

Use la pestaña Área de trabajo de la herramienta Orígenes para ver y editar archivos locales en DevTools. La pestaña Área de trabajo es útil cuando se usa junto con un servidor web local, ya que puede cargar el sitio web local en Edge y editar sus archivos de origen en DevTools.

Al agregar una carpeta a la pestaña Área de trabajo, los archivos y subcarpetas de esa carpeta se muestran en la pestaña y puede abrir los archivos para verlos y editarlos.

La pestaña Área de trabajo no muestra los recursos que descargó el explorador para mostrar la página web; La pestaña Área de trabajo solo muestra las carpetas y los archivos que están dentro de las carpetas locales que agregó.

A lo largo de DevTools, aparece un punto verde "asignado" en un archivo para el que DevTools pudo encontrar una asignación entre el archivo del área de trabajo y el recurso de la página web. Por ejemplo, si la página usa una hoja de estilos llamada styles.css y el área de trabajo tiene un archivo denominado styles.css, DevTools asigna los archivos entre sí y muestra un punto verde "asignado".

El punto verde "asignado" indica que se guardarán los cambios realizados en los recursos de la página web. Por ejemplo, al realizar un cambio dentro de la pestaña Estilos de la herramienta Elementos , está editando la hoja de estilos de la página web (no el archivo). Si el nombre de archivo CSS que se muestra en la pestaña Estilos tiene un punto "asignado" verde, esa hoja de estilos se ha asignado a un archivo del área de trabajo y los cambios no se perderán.

Pestaña Área de trabajo de la herramienta Orígenes

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 de la herramienta Orígenes para invalidar cualquier respuesta de un servidor web con archivos locales. La pestaña Invalidaciones es útil para realizar cambios temporales en archivos individuales, como un archivo CSS, en cualquier sitio web. 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.

Para empezar a usar la pestaña Invalidaciones , cree una nueva carpeta en el sistema de archivos y, a continuación, seleccione esa carpeta en la pestaña Invalidaciones . A partir de entonces, los cambios que realice en la pestaña Estilos de la herramienta Elementos o en la pestaña Página de la herramienta Orígenes se guardarán en la nueva carpeta. DevTools usa los archivos locales para invalidar las respuestas del servidor coincidentes.

Pestaña Invalidaciones del panel Navegador

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, haga clic en el botón 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 , haga clic en 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 o editar archivos, incluidos javascript, HTML, CSS y archivos de imagen. El panel Editor muestra el contenido del archivo que seleccionó en cualquiera de las pestañas del panel Navegador:

  • Página
  • Área de trabajo
  • Invalidaciones
  • Scripts de contenido
  • Fragmentos de código

Por ejemplo, el panel Editor puede mostrar:

  • Contenido de un fragmento de código.
  • El contenido de un archivo de área de trabajo que no se usa realmente en el código front-end (porque Workspace le permite editar el contenido de cualquier carpeta que desee).

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 Agregar una carpeta local al área de trabajo, para usar DevTools para editar archivos y guardar los cambios en el disco, anteriormente.

Las siguientes subsecciones cubren el panel de 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 de 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 y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes).

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.

Mostrar los cambios realizados

Al definir un área de trabajo, los cambios en JavaScript se guardan y son visibles en la herramienta Cambios .

Para revisar los cambios realizados en un archivo, haga clic con el botón derecho en el panel Editor y, a continuación, seleccione Modificaciones locales.

El panel Vista rápida se abre en la parte inferior de DevTools, donde se muestran los cambios en la pestaña Cambios .

Mostrar modificaciones locales, en la pestaña Cambios del panel Vista rápida

Consulta también:

Los cambios dentro de una función surten efecto

Al definir un área de trabajo, los cambios dentro de un cuerpo de función de JavaScript surten efecto.

DevTools no vuelve a ejecutar un script, por lo que los únicos cambios de JavaScript que surten efecto son los que se realizan dentro de las funciones. Por ejemplo, en la ilustración siguiente, agregamos el código siguiente al Código JavaScript devuelto por el servidor:

  • Agregamos la instrucción console.log('A') fuera de cualquier función.
  • Agregamos la instrucción console.log('B') dentro de una onClick función. A continuación, guardamos los cambios, escribimos números en el formulario y, a continuación, seleccionamos el botón del formulario para enviar el formulario.

Después de enviar el formulario, console.log('A'), que está en el ámbito global, no se ejecuta, pero console.log('B'), dentro de una onClick función, se ejecuta y se genera B en la consola:

JavaScript de ámbito global no se vuelve a ejecutar

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

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

Para revertir el archivo a su estado minificado original, haga clic en el botón Impresión bonita (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 del 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 CSS

Hay dos lugares para editar reglas CSS y sus propiedades en DevTools:

  • En la pestaña Estilos de la herramienta Elementos , edite las propiedades CSS mediante controles de interfaz de usuario.

  • En la pestaña Página o Área de trabajo de la herramienta Orígenes , use el editor de texto para editar un archivo CSS.

Edición de CSS mediante la pestaña Estilos de la herramienta Elementos, cuando se usa la pestaña Área de trabajo de la herramienta Orígenes

Consulta también:

Edición de CSS en la pestaña Página o Área de trabajo de la herramienta Orígenes

La pestaña Página o Área de trabajo de la herramienta Orígenes admite la edición directa de un archivo CSS. Por ejemplo, si edita el archivo CSS del tutorial Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes) 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 de 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 de Editor.

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

Herramienta de origen rápido para mostrar archivos de origen cuando se usa otra herramienta

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 panel Vista rápida en la parte inferior de DevTools.

Para usar la herramienta de origen rápido :

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

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

    El panel Vista rápida se abre en la parte inferior de DevTools, con la herramienta Origen rápido seleccionada. La herramienta De origen rápido muestra los mismos archivos que están abiertos 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 .

Consulta también:

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 de 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 haga clic en 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 panel Vista rápida 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 frente a 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:

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

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