cách đặt Điểm ngắt DOM trong chrome

Question

Tôi đang cố gắng làm theo hướng dẫn here.

Tôi bị kẹt ở phần Điểm ngắt DOM (gần cuối).

Tôi đã đi đến số example site mà họ đang nói đến. Tôi đã nhấn ctrl + shift + i và điều hướng đến tab "yếu tố". Trong các yếu tố tab tôi thấy phần html sau:

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

Bây giờ tôi đang mắc kẹt cố gắng để tìm ra menu ngữ cảnh:

Mang lên một menu ngữ cảnh trên các yếu tố #profileCard và chọn sự kiện mà bạn muốn phá vỡ trên: việc sửa đổi cây con, thuộc tính sửa đổi, và việc loại bỏ nút

Dưới đây là một ảnh chụp màn hình để hiển thị nơi tôi:

Answer 1

Để đặt điểm ngắt trong Chrome, hãy mở trình kiểm tra như bạn đã hiển thị ở trên và nhấp vào tùy chọn tập lệnh ở trên cùng. Điều này sẽ cho phép bạn xem các tập lệnh đang được sử dụng trên trang và chèn các điểm ngắt trên trang đó. Cũng như bước qua chúng và các tùy chọn gỡ lỗi hữu ích khác.

Ở trên là dành cho javascript, để phá vỡ phần tử dom nhấp chuột phải vào phần tử (bên trong thanh tra) mà bạn muốn ngắt và nó sẽ hiển thị menu ngữ cảnh cho phép bạn phá vỡ các sửa đổi và nội dung phụ như thế.

Answer 2

Chỉ muốn thêm rằng bạn có thể chỉ cần nhấp chuột phải vào một yếu tố trong các yếu tố panel và đi đến:

Break On... và chọn Subtree modifications, Attributes modifications, hoặc Node removal

Answer 3

1. bảng điều khiển phần tử mở trên devTools.
2. kiểm tra hoặc tìm hiểu phần tử DOM.
3. nhấp chuột phải vào nó và chọn nghỉ trên ...

Subtree Modifications Một cây con sửa đổi breakpoint được kích hoạt khi một phần tử con được thêm, xóa hoặc di chuyển.

Thuộc tính sửa đổi Sửa đổi thuộc tính xảy ra khi thuộc tính của phần tử (lớp, id, tên) được thay đổi động.

Loại bỏ nút Sửa đổi loại bỏ nút được kích hoạt khi nút được đề cập bị xóa khỏi DOM.

Cung cấp liên kết tập thể dục ở đây, Enjoy :) DOM Breakpoints Exercise‎