Làm thế nào để bạn duy trì các điểm ngắt của Chrome DOM khi làm mới trang?

Question

Tôi muốn xem mã nào đang sửa đổi phần tử DOM trên trang web, vì vậy tôi đặt điểm ngắt trong Chrome bằng cách nhấp chuột phải vào phần tử trong tab Yếu tố của thanh tra DevTools và chọn "Break on ..." -> "Sửa đổi Subtree". Kịch bản sửa đổi phần tử khi trang được tải (và không phải sau), vì vậy tôi muốn giữ lại điểm ngắt DOM và làm mới trang.

Quy trình lưu các điểm ngắt trong mã javascript dường như không áp dụng cho các điểm ngắt DOM.

Answer 1

Để bây giờ tôi đã thêm một dòng debugger; trước khi bất kỳ mã khác chạy, thêm một breakpoint DOM, và tiếp tục.

Answer 2

Trong Chrome, các điểm ngắt DOM không được lưu giữ khi làm mới, chúng bị vứt bỏ và sau đó được khôi phục sau sự kiện tải. Xem bug report 571519 và nhận xét này từ báo cáo đó:

Chúng tôi đang duy trì điểm ngắt DOM khi tải lại, nhưng điểm ngắt chỉ được khôi phục khi sự kiện tải. Vì vậy, nếu bạn mong đợi breakpoint để kích hoạt trước đó hoặc nó được thiết lập trên một nút được thêm lazily, breakpoint không được khôi phục. Chúng ta nên sửa chữa điều đó.

Đây là cách giải quyết:

1. tạm dừng Javascript, hoặc với một breakpoint bình thường hoặc với debugger; dòng javascript
2. loại bỏ tất cả các breakpoint DOM và thêm breakpoint DOM cần thiết
3. tiếp tục.