Come posso identificare se ho un conflitto javascript sul mio sito web?

Question

Attualmente sto spostando un sito Web da sé ospitato su un sistema CMS. Il sito corrente utilizza uno script popup modale chiamato SqueezeBox.js Ho copiato il codice esattamente come appare sul sito Web corrente, tuttavia la casella a comparsa modale non si attiva quando faccio clic su un'immagine di anteprima.

Guardando il codice nell'intestazione, ho notato che il CMS che sto usando chiama anche un numero di altri file javascript e mi chiedo se uno di questi stia causando un conflitto.

Qual è il modo migliore per scoprire se questo è il caso? Ho provato sviluppatore web di plugin per Firefox ma non riesco a vedere nulla nella console degli errori. Tuttavia non sono sicuro al 100% che lo stia usando correttamente. Qualcun altro può indicarmi la direzione di un semplice rilevatore di conflitti javascript?

Acclamazioni

Adam

Answer 1

Se hai Google Chrome, aprire i Developer Tools e si può andare nella scheda 'script', aprire il backup dei file javascript e cercare il gestore di clic .. click lungo il lato del codice per impostare un punto di interruzione, quindi quando il codice raggiunge quel punto (se si fa clic, ad esempio), si interromperà, quindi in Strumenti di sviluppo è possibile vedere quali funzioni vengono chiamate dove passo attraverso il codice. Puoi anche passare il mouse su qualsiasi variabile nella finestra del codice per vedere il suo valore. Molto maneggevole! Puoi quindi vedere se sta entrando nel tuo plugin (puoi farlo anche impostando un breakpoint all'interno del plugin in un posto come la prima linea che sarà sempre accessibile durante la sua esecuzione).

io credo che si possa do the same thing with Firebug

E 'un po' di un diverso processo di pensiero di entrare in (entrare, passo oltre, trasformando i punti di interruzione e spegnimento, ecc) ma è estremamente utile.

Un modo più semplice per verificare l'eventuale presenza di problemi è aggiungere un avviso ('sto lavorando); o qualcosa di simile al codice non sei sicuro che funzioni. Puoi anche avvisare una variabile per vedere qual è il valore in quel punto. Puoi anche usare il comando console per stamparlo sulla console di firebug. Questi stanno facendo cose che breakpoints/debug fanno per te tranne che con il debug non hai bisogno di cambiare il tuo codice.

Answer 2

Se c'è un errore javascript, il modo più semplice è usare firebug o l'Inspector Chrome (fare clic con il tasto destro sulla miniatura e scegliere "Ispeziona elemento"). Apri la scheda della console di entrambi e aggiorna la pagina. Se c'è un errore, verrà segnalato nella console e fornirà un collegamento alla linea pertinente.

Se non viene segnalato alcun errore, la logica del codice impedisce la visualizzazione della casella. Avrai bisogno di scorrere il codice per trovare l'errore. Guarda quale funzione viene chiamata dal gestore dei clic dell'immagine in miniatura. Passare a quella funzione in uno degli strumenti e posizionare un punto di interruzione sulla prima riga della funzione. Fai di nuovo clic sulla miniatura e il codice si fermerà su quella linea. Da lì è possibile scorrere il codice e vedere quale ramo di codice è seguito. È probabile che a un certo punto un controllo di sanità mentale fallisca e causi il bombardamento del codice.