2012-05-31 16 views
37

Sto provando a seguire il tutorial here.come impostare DOM Breakpoint in chrome

Sono bloccato nella sezione DOM Punti di interruzione (vicino al fondo).

Sono andato al example site di cui stanno parlando. Ho premuto ctrl + shift + i e navigato alla scheda "elementi". Nella scheda Elementi ho trovato la seguente sezione html:

<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard"> 
</div> 

Ora mi sono bloccato cercando di trovare il menu contestuale:

far apparire un menu contestuale sull'elemento #profileCard e selezionare la eventi che si desidera rompere su: modifiche sottostruttura, attributi modifiche, e la rimozione del nodo

Ecco uno screenshot per mostrare dove sono:

ss

risposta

36

Per impostare punti di interruzione in Chrome far apparire la finestra di ispezione come avete mostrato in precedenza e fare clic sull'opzione script in alto. Ciò ti consentirà di esaminare gli script utilizzati nella pagina e di inserire punti di interruzione su quella pagina. Oltre a passare attraverso di loro e altre utili opzioni di debug.

Quanto sopra è per javascript, per rompere sugli elementi dom, fare clic con il pulsante destro del mouse sull'elemento (all'interno dell'ispettore) su cui si desidera interrompere e verrà visualizzato il menu di scelta rapida che consente di interrompere le modifiche del sottostrato e roba come quello.

+0

Come ti aggiungere un punto di interruzione per un elemento che è presente solo mentre si fa clic e trascinando? Facendo clic con il pulsante destro del mouse o facendo clic sulla scheda Impostazioni, l'elemento che sto cercando di rimuovere rimuove l'elemento. – James

+2

@James chrome ora ha un'opzione per forzare lo stato dell'elemento. Non lavoro molto con i draggable, ma potresti volerlo esaminare. – Ryan

22

Volevo solo aggiungere che si può semplicemente fare clic destro su un elemento nel pannello elementi e andare a:

Break On... e selezionare Subtree modifications, Attributes modifications, o Node removal

enter image description here

+2

Quando faccio clic su un elemento e attivo "Attributi modifiche", non si interrompe quando l'attributo di classe viene modificato da uno script – Legends

+0

[Suoni come quello che hai capito] (http://stackoverflow.com/questions/42136051/cromo-break-on-attributi-modifica) – Johannes

8
  1. apri il pannello degli elementi su devTools.
  2. ispezionare o scoprire l'elemento DOM.
  3. fate clic destro su di esso e selezionare pausa ...

sottostruttura Modifiche Una modifica breakpoint sottostruttura viene attivato quando si aggiunge un elemento figlio, rimosso o spostato.

Attributi Modifiche Una modifica dell'attributo si verifica quando l'attributo di un elemento (classe, id, nome) viene modificato dinamicamente.

Nodo rimozione Una modifica rimozione nodo viene attivato quando il nodo in questione viene rimosso dal DOM.

fornire un collegamento esercizio qui, Enjoy :) DOM Breakpoints Exercise‎

Problemi correlati