40

Tôi đang cố gắng gỡ lỗi trang web sử dụng nhiều sự kiện JavaScript và vì vậy tôi cần theo dõi tất cả các sự kiện JavaScript được kích hoạt.Sử dụng Firefox, làm thế nào tôi có thể giám sát tất cả các sự kiện JavaScript được kích hoạt?

Hầu hết các sự kiện đều bị ràng buộc khi sử dụng jQuery. Do đó, nó sẽ đặc biệt hữu ích nếu có một cách để theo dõi cụ thể chỉ những sự kiện đó.

Trả lời

51

Tất nhiên bạn có thể làm tốt với Firebug, bảng điều khiển và tab tập lệnh, nơi bạn có thể thêm điểm ngắt và đồng hồ, nhưng bạn muốn làm điều đó thông minh hơn/dễ dàng hơn.

Có plugin Firebug gọn gàng được gọi là EventBug chỉ ghi nhật ký tất cả sự kiện và nhóm chúng theo loại sự kiện để bạn có thể mở rộng và xem điều gì đã kích hoạt chúng.

EventBug Screenshot

EventBug không làm điều đó trong thời gian thực, bạn phải làm mới mặc dù.

Một cách khác là sử dụng tính năng 'Đăng nhập sự kiện' đối với bất kỳ phần tử DOM nào trong Firebug. Điều này thực hiện theo thời gian thực và bạn cũng có thể xem các sự kiện thứ tự nào được kích hoạt/kích hoạt.

Hãy thử điều này:

  • Bật tắt mở Firebug
  • Nhấp chuột phải phần tử trong tab HTML, nếu bạn muốn xem tất cả các sự kiện sau đó nhấn chuột phải <body>
  • Chọn Log Events từ menu ngữ cảnh
  • Đảm bảo rằng tab Bảng điều khiển được bật
  • Nhấp để bật chế độ 'Kéo dài' trong tab Bảng điều khiển (nếu không tab Bảng điều khiển sẽ xóa sau khi trang được tải lại)
  • Bạn có thể phải chọn Closed (thủ công)
  • Thì đấy! xem các sự kiện dòng trong giao diện điều khiển tab

Đây là những gì bạn nhìn thấy với Log Sự kiện:

enter image description here

Cũng đáng để thử các FireQuery add-on cho Firebug để xem những gì các yếu tố trong DOM có jQuery sự kiện gắn liền với họ và những gì họ đang có.

Và như câu trả lời của benvie đề cập, điều này cũng có thể có trong các công cụ phát triển của webkit.

+0

Không nếu bạn có để tiếp nhận một giải pháp và bạn không có ý tưởng những gì sự kiện gây ra lỗi. – gsharp

+0

@gsharp Bạn không thể sử dụng hồ sơ, đăng nhập vào bảng điều khiển và điểm ngắt để tìm ra lỗi? Nó có cung cấp bất kỳ lỗi nào cho bàn điều khiển không? Firebug là khá nhiều sự lựa chọn cuối cùng trong gỡ lỗi JS. – dakdad

+0

Tôi đang làm việc với Firebug. Chỉ cần một công cụ cho tôi biết sự kiện nào được kích hoạt theo thứ tự nào. Thật vậy, tôi có thể làm điều đó với việc đăng nhập và các điểm ngắt, nhưng nếu * .js là siêu và bạn chưa quen với mã, nó có thể giúp ích rất nhiều. – gsharp

4

Điều này không tồn tại trong Firebug tôi tin, và vấn đề cơ bản là thiếu sự hỗ trợ hoặc thiếu tiếp xúc ở cấp api. Ngoài ra, chỉ có một vài cách để đăng ký các sự kiện DOM: Element.prototype.addEventListener (và window.addEventListener và document.addEventListener và XMLHttpRequest.addEventListener và một số khác) ngoài các thuộc tính 'onevent' có thể quan sát và chặn được.

Nhưng thực tế, trình gỡ lỗi WebKit và trình gỡ lỗi của Chromium (đó là webkit với các điểm bổ sung) cho phép một trình gỡ lỗi và quan sát các trình nghe đính kèm. Đôi khi nó dễ dàng hơn để gỡ lỗi của một trình duyệt trong một trình duyệt khác với trạng thái ứng dụng/thời gian chạy tốt hơn, ngay cả khi trình duyệt đó không hiển thị lỗi.

enter image description here

https://developers.google.com/chrome-developer-tools/docs/elements

+1

Để làm rõ, mỗi công cụ dev có điểm mạnh của nó. Ví dụ, Firebug có hỗ trợ hiển thị các thuộc tính kế thừa cũng như các giá trị truy cập như các thuộc tính và có các cài đặt kiểm soát một số cài đặt này. Trình gỡ lỗi webkit, mặt khác, không có tùy chọn nào để hiển thị các thuộc tính kế thừa hoặc để giải quyết các truy cập đến giá trị của chúng. Trừ khi bạn đếm ghi đè Object.getOwnProperty [Names | Descriptor] với các chức năng tùy chỉnh của riêng bạn. –

+0

Xem câu trả lời cập nhật của tôi ở trên. Firefox/Firebug cho phép bạn thực hiện việc này. –

+1

Tôi cũng sắp lấy một thứ khác mà tôi đã nói lại. Tôi không nhận thức được một số công cụ dev tức là nổi trội tại .. –

7

này đã được giới thiệu một số phiên bản trước, nhưng như của Firefox 35 sự kiện đi kèm một yếu tố có thể được nhìn thấy trên Inspector: bên cạnh các yếu tố mà bạn muốn xem các sự kiện (trong trường hợp có bất kỳ) sẽ có một biểu tượng với chữ cái 'EV'. Nhấp vào nó và bạn sẽ thấy một cửa sổ popup nhỏ với các sự kiện cho phần tử đó.

Firefox events inspector

Thông tin thêm: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

+1

Điều đó thật tuyệt, nhưng những gì tôi cần "xem" là sự kiện nào được kích hoạt. Điều đó có khả thi không? – gsharp

+1

Tính năng đó được bắt đầu từ Firefox 33: https://hacks.mozilla.org/2014/07/event-listeners-popup-media-sidebar-cubic-bezier-editor-more-firefox-developer-tools-episode-33/Firefox 34 có thể giải quyết jQuery wrapper với mã sự kiện thực tế: https://hacks.mozilla.org/2014/09/webide-storage-inspector-jquery-events-iframe-switcher-more-firefox-developer-tools-episode -34 / – gavenkoa

Các vấn đề liên quan