Tôi đã xem một trang web và thấy điều gì đó thú vị: một phần tử DOM được tạo hoạt ảnh theo cách thú vị. Tôi muốn tìm ra cách nó được thực hiện để tôi bắt đầu đào sâu vào mã nguồn. Nó đã cho tôi lứa tuổi để theo dõi các đoạn mã đã làm điều này.Có cách nào dễ dàng để tìm hiểu xem mã js nào có phần tử DOM được điều khiển không?
Có ai biết cách sắp xếp 'theo dõi' phần tử DOM để bạn có thể phát hiện bằng mã nào đang được thao tác không?
Trong Chrome, bạn có thể thêm Điểm ngắt DOM. Bạn có thể tìm thấy giải thích chi tiết hơn here.
Tóm lại, bạn chọn phần tử DOM bạn muốn kiểm tra trong bảng Yếu tố và bạn chọn Break On... ->Subtree Modifications. Khi phần tử DOM thay đổi cấu trúc của bạn, bạn sẽ được trỏ đến mã JS thực hiện điều đó.
Tuy nhiên, nếu bạn đặc biệt sau mã JS có hoạt ảnh, điều đó có thể chỉ thay đổi CSS của phần tử và theo như tôi biết, không có cách nào để phá vỡ điều đó.
Mặt khác, Chrome cũng khá linh hoạt trong việc cho phép bạn break on JavaScript events xảy ra trong trình duyệt. Là jfrej suggested, bạn có thể xem hành động nào kích hoạt hoạt ảnh và phá vỡ điều đó.
Bạn có thể đặt điểm ngắt thành Attributes modification từ trình đơn phần tử tương tự (Break On...) và nó cũng sẽ phá vỡ các thay đổi CSS. Nhờ có Bergi cho đề xuất trong nhận xét. Đã thử một số simple example here.
+1, Cảm ơn đề xuất của bạn, trong trường hợp của tôi tôi sợ nó về thao tác css của một cấu trúc DOM cố định vì vậy nó sẽ không giúp tôi trong trường hợp cụ thể này, nhưng nó rất tốt để biết về các tình huống khác! – Asciiom
Nếu trình gỡ lỗi có thể dừng lại trên các sự kiện 'DOMSubtreeModified', nó sẽ có thể dừng trên' DOMAttrModified', quá – Bergi
Đó là, bạn có tùy chọn đó trên ngắt. Nhưng tôi không biết nếu điều đó làm việc cho những thay đổi phong cách CSS. Để tôi thử. :) –
Trong hầu hết các trường hợp, JavaScript cần sử dụng công cụ chọn của một số loại để sửa đổi cấu trúc HTML hoặc áp dụng CSS. Hãy nghĩ bộ chọn có thể là gì - thường là ID hoặc Lớp.
Firebug có thể thực hiện tìm kiếm trong nhiều tệp - chỉ cần chuyển đến tab Tập lệnh, tập trung vào trường tìm kiếm và kiểm tra Nhiều tệp. Bằng cách này, bạn sẽ có thể tìm thấy đoạn mã đang nhắm mục tiêu phần tử DOM. Ngoài ra, nếu hoạt ảnh được kích hoạt bởi sự kiện, chẳng hạn như nhấp chuột, bạn có thể sử dụng Công cụ dành cho nhà phát triển của Chrome để thêm Điểm ngắt danh sách sự kiện theo tab Nguồn, sẽ hoạt động theo cách tương tự như điểm ngắt DOM được mô tả bởi Alex.
bản sao có thể có của [Tìm JavaScript thay đổi DOM là gì?] (Http://stackoverflow.com/questions/11268457/find-what-javascript-changes-the-dom) – Bergi