Per la programmazione front-end Web, poiché qualsiasi JavaScript può impostare un listener di eventi per "mouseover" o "mouseenter" per un elemento, se vogliamo rintracciare qual è il codice responsabile della creazione di una casella di hover ?
Ad esempio, se lo vedi quando passi il mouse su un elemento, con la classe hover-box-cont , e tu grep per la base di codice esistente, e non c'è alcuna ricorrenza hover-box-cont che fa parte di JavaScript codice che sembra essere $(".hover-box-cont").mouseover() o mouseenter() (e in effetti non esiste alcun codice JS correlato a hover-box-cont ), allora quale è un buon modo per rintracciare qual è il codice che è responsabile di apparire? una casella al passaggio del mouse?
(Poiché la pagina è in parte in AngularJS, ho anche grep per hoverBox perché le direttive AngularJS utilizzano automaticamente il nome JS hoverBox per mappare a hover-box nell'HTML, ma non riesco a trovare nulla per hoverBox )
Un metodo che ho pensato è stato quello di impostare un listener (handler) su un elemento interno sull'evento mouseover , e impostare un punto di interruzione su quel codice di gestore, in modo che sia possibile "scavalcare" la riga di codice di linea per vedere quale linea di codice viene eseguita in seguito. Ma con mia sorpresa, quando uso un'altra app per coprire la regione e mostrare l'elemento su cui imposto un handler, e faccio scorrere il mouse su di esso e clic, l'elemento hover compare già prima del breakpoint sul mio gestore. Ho pensato che potrebbe in qualche modo esplodere dal mio elemento interiore, prima di andare in quella regione esterna per il conduttore che sto cercando di rintracciare.
Ci sono circa 20 file JavaScript esterni (alcuni locali, alcuni su CDN), quindi è difficile rintracciarli uno per uno, o cosa succederebbe se potessimo esaminarli tutti e 20 uno per uno, e se ci fossero 50 file JavaScript? Ci dovrebbe essere un modo migliore di leggere uno dopo l'altro quei 50 file JS?