¿Tienes una técnica para leer el código Javascript?

Lo mejor que puedes hacer, por supuesto, es pedirle ayuda al desarrollador original, pero no siempre está cerca. Si el código es complejo y está mal documentado, o simplemente se realiza con un estilo diferente al que estoy familiarizado, a menudo lo abordo como si lo estuviera refactorizando o documentando.

Entonces, con el enfoque de refactorización, solo como un ejercicio, comience a reescribir un código particularmente problemático en un estilo más familiar ( ¡en realidad no confirme este código!). Proporcione nombres de variables y funciones que sean significativos para usted, vuelva a implementar el control de flujo y los bucles en un estilo que le guste más, etc. Esto me ayuda a comprender cómo mi “dialecto” difiere del programador original, y después de un tiempo se hace más fácil leer porque he creado una tabla de traducción mental. No te vuelvas loco con esto, y solo para reiterar, no lo cometas (¡en serio! ¡Romperás las cosas! No seas ese tipo). Es solo exploratorio.

La otra opción, documentar, puede ser más útil si ha adoptado el código, y / o si parte de su trabajo es documentación de todos modos. Simplemente acérquese como si estuviera escribiendo documentación de código estándar y trabaje a través de ella función por función, parámetro por parámetro, valor de retorno por valor de retorno. Tiendo a seguir el flujo de código en lugar de ir de arriba a abajo por orden de línea. Como mínimo, terminará con un código mejor documentado si aún no se ha documentado, pero idealmente obtendrá una idea de la forma de pensar del desarrollador original en el proceso y será progresivamente más fácil de entender.

  • Presiona F12 para abrir Dev Tools
  • Haga clic en la pestaña Fuentes
  • En el lado derecho, desplácese hacia abajo hasta “Puntos de interrupción de escucha de eventos” y expanda el árbol
  • Haga clic en los eventos que desea escuchar.
  • Interactúa con el elemento objetivo, si disparan obtendrás un punto de interrupción en el depurador

Del mismo modo, puede hacer clic con el botón derecho en el elemento de destino -> seleccionar “inspeccionar elemento” Desplácese hacia abajo en el lado derecho del marco de desarrollo, en la parte inferior está ‘oyentes de eventos’. Expanda el árbol para ver qué eventos están asociados al elemento.

Fuente: ¿Cómo veo los eventos activados en un elemento en Chrome Web Developer?