2012-05-31 13 views
37

Estoy tratando de seguir el tutorial here.cómo establecer puntos de interrupción DOM en cromo

Estoy atascado en la sección DOM Breakpoints (cerca de la parte inferior).

Fui al example site de lo que están hablando. Presioné ctrl + shift + i y navegué a la pestaña "elementos". En la pestaña elementos encontré la siguiente sección HTML:

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

Ahora estoy atascado tratando de encontrar el menú contextual:

que aparezca un menú contextual en el elemento #profileCard y seleccione el eventos que desea romper el subárbol: modificaciones, atributos modificaciones, y la extirpación de los ganglios

Aquí está una captura de pantalla para mostrar dónde estoy:

ss

Respuesta

36

Para establecer puntos de ruptura en Chrome abrir el inspector como si han mostrado anteriormente y haga clic en la opción de secuencias de comandos en la parte superior. Esto le permitirá ver los scripts que se utilizan en la página e insertar puntos de interrupción en esa página. Además de paso a través de ellos y otras opciones de depuración útiles.

Lo anterior es para JavaScript, para romper en elementos DOM haga clic derecho sobre el elemento (en el interior del inspector) que desea romper encendido y que se abre el menú contextual que le permite romper en las modificaciones de subárbol y otras cosas como eso.

+0

¿Cómo le añada un punto de interrupción a un elemento que está presente sólo mientras hace clic y arrastrando? Al hacer clic con el botón derecho o al presionar en la ventana del Inspector, se elimina el elemento con el que trato de trabajar. – James

+2

@James Chrome ahora tiene una opción para forzar el estado del elemento. No trabajo mucho con arrastreras, pero es posible que desee investigar eso. – Ryan

22

sólo quería añadir que se puede simplemente haga clic en un elemento en el panel de elementos y vaya a:

Break On... y seleccione Subtree modifications, Attributes modifications o Node removal

enter image description here

+2

Cuando hago clic en un elemento y activo "Modificaciones de atributos", no se rompe cuando el atributo de clase es modificado por un script – Legends

+0

[Parece que ya lo entendieron] (http://stackoverflow.com/questions/42136051/chrome-break-on-attributes-modification) – Johannes

8
  1. abrir panel de elementos en devTools.
  2. inspeccionar o descubrir el elemento DOM.
  3. clic derecho sobre él y seleccione descanso en ...

subárbol Modificaciones Un punto de interrupción modificación subárbol se activa cuando se añade un elemento secundario, elimina, o se mueve.

Atributos Modificaciones Una modificación atributo se produce cuando el atributo de un elemento (clase, de la identificación, el nombre) se cambia dinámicamente.

extirpación de ganglios Una modificación extirpación de los ganglios se activa cuando el nodo en cuestión se elimina de la DOM.

proporcionar un enlace de ejercicio aquí, disfrute :) DOM Breakpoints Exercise‎

Cuestiones relacionadas