Técnicas de depuración usadas en el navegador

 (alan.norbauer.com)
5 puntos por GN⁺ 2023-11-12 | 1 comentarios | Compartir por WhatsApp

Consejos para aprovechar el depurador del navegador

  • Puntos de interrupción condicionales avanzados

    • Amplía la funcionalidad de los puntos de interrupción condicionales usando expresiones con efectos secundarios
    • Con logpoints/tracepoints puedes registrar mensajes en la consola sin detener la ejecución
    • Usa console.count para contar cuántas veces se ejecuta
    • Los navegadores principales soportan logpoints/tracepoints (a mayo de 2020)

  • Uso del panel de vigilancia

    • Se puede usar console.log en el panel de vigilancia
    • Para ejecutar expresiones cuando cambie el DOM, configura un punto de interrupción por cambios en el DOM y luego agrega una expresión de vigilancia

  • Seguimiento de la pila de llamadas

    • Rastrea la pila de llamadas de funciones para encontrar llamadas que no coinciden
    • Usa console.trace en un punto de interrupción condicional para revisar la pila de llamadas

  • Cambiar el comportamiento del programa

    • Es posible modificar al vuelo el comportamiento del programa dentro del navegador
    • Sobrescribe parámetros de funciones para ajustar el comportamiento

  • Perfilado simple de rendimiento

    • Usa la API de temporización de la consola para medir el tiempo de ejecución del código
    • Mide el tiempo con console.time('label') y console.timeEnd('label')

  • Aprovechar la aridad de las funciones

    • Activa un punto de interrupción solo cuando se llame con una cantidad específica de argumentos
    • Úsalo para encontrar discrepancias en la cantidad de argumentos al invocar funciones

  • Aprovechar el tiempo

    • Activa un punto de interrupción solo después de que haya pasado cierto tiempo desde la carga de la página
    • Omite puntos de interrupción durante un tiempo específico y actívalos solo después

  • Uso de CSS

    • Activa puntos de interrupción con base en valores calculados de CSS

  • Pausar solo en llamadas pares

    • Activa un punto de interrupción solo en ejecuciones pares

  • Pausar mediante muestreo

    • Activa un punto de interrupción solo para muestras aleatorias de la ejecución

  • No pausar en una línea específica

    • Usa la opción "Never Pause Here" para evitar que se detenga en una línea concreta

  • Asignación automática de ID de instancia

    • Asigna automáticamente un ID único a cada instancia de una clase

  • Alternar programáticamente

    • Usa un booleano global para activar o desactivar programáticamente un punto de interrupción condicional

  • Llamadas de clase con monitor()

    • Usa el comando monitor de Chrome para rastrear llamadas a métodos de clase

  • Llamadas a funciones y depuración

    • Llama a una función después de invocar debugger desde la consola para depurarla

  • Pausar cuando cambia la URL

    • En una aplicación de una sola página, pausa la ejecución antes de que cambie la URL

  • Depuración de lectura de propiedades

    • Activa un punto de interrupción cada vez que se lea una propiedad de un objeto

  • Uso de copy()

    • Usa la API de consola copy() para copiar información directamente al portapapeles desde el navegador

  • Depuración de HTML/CSS

    • Usa la consola de JS para diagnosticar problemas de HTML/CSS
    • Inspecciona el DOM con JS desactivado
    • Inspecciona elementos del DOM que aparecen de forma condicional
    • Registra instantáneas del DOM
    • Monitorea el elemento que tiene el foco
    • Encuentra elementos con texto en negritas
    • Consulta el elemento actualmente seleccionado
    • Monitorea eventos

Opinión de GN⁺

Lo más importante de este texto es que ofrece varias técnicas y consejos para que los desarrolladores usen el depurador del navegador de forma más eficiente al depurar código y resolver problemas. Esta información es muy útil para desarrolladores de software y resulta especialmente interesante porque puede ahorrar tiempo al rastrear bugs complejos o resolver problemas de rendimiento.

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-11-12
Comentarios de Hacker News

  • Evolución de las herramientas de depuración integradas del navegador

    • Las herramientas de depuración integradas del navegador han avanzado enormemente durante las últimas décadas.
    • Como alguien con experiencia en JavaScript, agradece a todos quienes hicieron posible la depuración intuitiva de código en el navegador.
    • Cuando trabaja en backend o con otros lenguajes, extraña el ecosistema de herramientas de depuración de los navegadores modernos.

  • Uso de la sentencia debugger

    • Usar la sentencia debugger; es la única forma de vencer la pila recursiva del depurador de Chrome.
    • Se menciona un caso en el que se usaron trampas de depuración para evitar que los visitantes del sitio interpretaran su página de inicio ofuscada.

  • Dificultades para depurar backend en NodeJS

    • Como programador de Python/Elixir, usa con frecuencia pdb.set_trace()/IEx.pry().
    • Le tocó heredar un backend complejo en NodeJS y tuvo dificultades para trabajar sin herramientas de depuración adecuadas.
    • Terminó regresando a la depuración con console.log, lo que se sintió muy primitivo.
    • Le sorprende que no haya un REPL de depuración adecuado y pide ayuda.

  • Recomendación de Werkzeug

    • Recomienda usar Werkzeug para desarrollo backend con Django.
    • Permite usar un shell "PDB" en el navegador cada vez que ocurre una excepción.

  • Cómo acceder a variables locales de un IIFE

    • Pregunta cómo acceder a las variables locales de una expresión de función ejecutada inmediatamente (IIFE).
    • Explora si hay una forma de hacerlo sin que el depurador detenga el código dentro del alcance del IIFE.

  • Método de depuración a través de cadenas de texto de la UI

    • Iniciar el registro de solicitudes de red en el panel de red.
    • Usar la búsqueda en la barra lateral izquierda e ingresar el código o la cadena de texto de la UI que se quiere encontrar.
    • Encontrar el resultado en un archivo de chunks de JS empaquetado, abrirlo en "Sources" y colocar una sentencia debugger.

  • Depuración con puntos de interrupción condicionales

    • Pregunta sobre cómo convertir {configOption: true} en {get configOption() { debugger; return true; }}.

  • Función exclusiva de Chrome: 'Monitor Events for Element'

    • Se menciona la función 'Monitor Events for Element' y que es exclusiva de Chrome.
    • Pregunta si existe alguna alternativa para Firefox.

  • Ausencia de la API queryObjects

    • Se menciona la API queryObjects, que devuelve una lista de todos los objetos creados por un constructor específico.
    • Por ejemplo, se puede usar queryObjects(Function) para obtener una lista de todas las funciones en el heap.

  • Dificultad para usar variables observadas

    • Le cuesta hacer funcionar las variables observadas.
    • Supone que solo se pueden observar variables globales, pero como no funcionan como espera, termina llenando el log con valores.
    • Opina que la consola debería agregar una UI estilo Data.gui para poder ver y probar variables y valores de configuración, y comparte un enlace relacionado a CodePen.