Tôi đang tái cấu trúc công cụ hẹn giờ của ActiveCollab và gặp sự cố. để đóng cửa sổ bật lên, tôi luôn phải kích hoạt thêm một sự kiện nhấn phím
Trình gỡ lỗi của Chrome
Thông thường, bạn sẽ sử dụng JavaScript để đính kèm trình xử lý sự kiện để thực hiện điều gì đó khi bạn nhấp vào nút trên trang web. Bạn sẽ tạo một nút, thêm một số JavaScript để nắm bắt lần nhấp và sau đó thực thi một chức năng
Tuy nhiên, chúng tôi gặp sự cố khi các nút đó bắt đầu chồng chất. với rất nhiều yếu tố, thật khó để biết điều gì xảy ra ở đâu và tại sao
May mắn thay, DevTools của Chrome có trình gỡ lỗi riêng
Thật dễ dàng để đưa ra câu lệnh `debugger` ở bất kỳ đâu trong mã và dừng thực thi JavaScript tại một dòng cụ thể. Từ đó, bạn có thể thấy các biến cục bộ của mình và theo dõi ngăn xếp cho đến khi trình gỡ lỗi dừng lại. Bạn có thể bước qua và vào các chức năng, giống như trong bất kỳ trình gỡ lỗi nào khác
Giải quyết vấn đề với các sự kiện
Vấn đề với các sự kiện [hoặc với mẫu pub/sub nói chung] là bạn không thể thực sự chắc chắn ai đang lắng nghe các thay đổi dữ liệu mà nhà xuất bản đưa ra
Đầu tiên, tôi đã thử DOM Breakpoint, một điểm dừng kích hoạt khi thay đổi DOM [thuộc tính, nội dung nút, v.v. ]. Nó không hoạt động
Sau một thời gian, tôi tình cờ phát hiện ra một chức năng ít được biết đến của DevTools. `monitorEvents[]`
Phương thức monitorEvents[] hướng dẫn DevTools ghi lại thông tin về các mục tiêu đã chỉ định. Tham số đầu tiên là đối tượng cần giám sát. Tất cả các sự kiện trả về nếu tham số thứ hai không được cung cấp. Để chỉ định các sự kiện cần lắng nghe, bạn có thể chuyển một chuỗi hoặc một mảng các chuỗi làm tham số thứ hai.
— Tài liệu Công cụ dành cho nhà phát triển Chrome
Được dịch sang tiếng Anh đơn giản - mở bảng điều khiển, tìm một phần tử có các sự kiện mà bạn muốn gỡ lỗi [trong trường hợp của tôi là 'body', vì vậy tôi thấy tất cả chúng] và gọi
monitorEvents[document.getElementsByTagName[‘body’][0], ‘mouse’]
Điều này giám sát tất cả các sự kiện chuột [nhập, rời, nhấp, dblclick…] và ghi nội dung của chúng vào bảng điều khiển từ đó bạn có thể kiểm tra chúng
Điều này đôi khi hữu ích, nhưng trong trường hợp của tôi thì không. Tôi có mọi thông tin về sự kiện nhưng không có thông tin nào về những người gọi nó
Giải pháp
Để có được người gọi, tôi đã sử dụng Điểm ngắt của trình xử lý sự kiện, một bảng điều khiển trong tab Nguồn của DevTools [hoạt động tương tự như tạm dừng thực thi trên mỗi sự kiện trang]
Ở đó, tôi có thể xác định phạm vi loại sự kiện khi cần và chỉ ngắt đối với các sự kiện nhấp chuột, nhấn phím, v.v.
It turned out to be the right solution — the source of my frustration was the Vimium chrome extension, which attaches itself outside the `` and adds its own event listeners to ``.
So, the whole problem was that I was trying to inspect events on the `` and I skipped the one that was causing misbehavior because I didn’t take into the account other things that could affect the environment.
TL; DR. Tắt tiện ích mở rộng khi bạn đang phát triển nội dung. Hoặc phát triển ở chế độ ẩn danh
P. S. Hãy nhớ tắt bất kỳ Điểm ngắt trình xử lý sự kiện nào sau khi bạn gỡ lỗi xong vì chúng vẫn tồn tại và được bật mỗi khi bạn khởi động trình duyệt
Để xem các sự kiện được kích hoạt trên một phần tử, hãy làm theo các bước bên dưới trong Google Chrome
Mở Google Chrome và nhấn F12 để mở Công cụ dành cho nhà phát triển
Bây giờ, hãy chuyển đến tab Nguồn
Chuyển đến Điểm ngắt của trình xử lý sự kiện, ở bên phải
Nhấp vào các sự kiện và tương tác với phần tử đích.
Nếu sự kiện kích hoạt, thì bạn sẽ nhận được một điểm ngắt trong trình gỡ lỗi.
người hướng dẫn. [0. 00] Trong bài học này, tôi sẽ chỉ cho bạn cách bạn có thể gỡ lỗi và kiểm tra trình xử lý sự kiện của mình bằng Công cụ dành cho nhà phát triển trình duyệt Chrome
[0. 08] Trong thiết lập này, tôi có một clickEventListener mà tôi đã thêm vào phần tử cha và nó sẽ đăng xuất ParentClicked khi nó được thực thi và tôi đã thêm trình xử lý sự kiện này trong giai đoạn chụp
[0. 19] Tôi cũng đang thêm clickEventListener vào thành phần nút sẽ đăng xuất ButtonClicked khi được nhấp và tôi không cung cấp giá trị nắm bắt cho trình lắng nghe sự kiện này, vì vậy nó sẽ được thực thi trong giai đoạn bong bóng
[0. 31] Bạn có thể gỡ lỗi mã trình xử lý sự kiện giống như cách bạn gỡ lỗi bất kỳ mã nào. Bạn có thể thêm câu lệnh console. Tôi sẽ đăng xuất khỏi sự kiện. tôi có thể thấy rằng ở đó. Tôi có thể thêm câu lệnh gỡ lỗi
[0. 48] Bây giờ khi tôi nhấp vào nút, tôi sẽ thấy rằng bên cha của tôi nhấp vào Trình xử lý sự kiện. Bây giờ tôi có thể có một điểm ngắt ở đây. Tôi có thể làm những việc như kiểm tra bối cảnh đĩa và sự kiện. Tôi cũng có thể xóa câu lệnh gỡ lỗi và thêm các điểm dừng của riêng mình
[1. 04] Tôi đã tạm dừng thực thi ứng dụng của mình trong myEventListener và tôi có thể kiểm tra sự kiện cũng như bối cảnh đĩa. Trong bảng nguồn, tôi cũng có thể chuyển đến phần điểm dừng của trình nghe sự kiện
[1. 20] Tôi có thể khiến trình duyệt tạo điểm ngắt cho danh mục sự kiện hoặc sự kiện cụ thể. Ở đây tôi có thể vào Sự kiện chuột cho sự kiện nhấp chuột. Bây giờ khi tôi nhấp vào nút, trình xử lý sự kiện gốc của tôi được thêm vào trong giai đoạn chụp sẽ được chia thành đầu tiên
[1. 37] Tôi có thể xem thông tin về điều đó. Nếu tôi chuyển sang điểm ngắt tiếp theo, tôi có thể thấy rằng nút EventListener của tôi cũng đang bị tạm dừng. Sử dụng điều này, tôi có thể duyệt qua tất cả các trình lắng nghe sự kiện đang được thực hiện như một phần của sự kiện này
[1. 53] Ngoài ra còn có một số tiện ích dòng lệnh của công cụ dành cho nhà phát triển mà bạn có thể sử dụng để giúp gỡ lỗi trình xử lý sự kiện của mình. Đầu tiên, tôi đang tạo một hằng số nút trong phạm vi toàn cầu trỏ đến phần tử nút
[2. 04] Tôi cũng có thể đã chọn thành phần nút có thể đặt thành số 0 đô la. Hàm công cụ dành cho nhà phát triển đầu tiên mà chúng ta sẽ xem xét là getEventListeners. Chức năng getEventListeners chỉ tồn tại trong các công cụ dành cho nhà phát triển. Bạn không thể sử dụng nó trong mã ứng dụng của mình
[2. 21] Nếu bạn gọi hàm này với một phần tử, nó sẽ trả về các trình lắng nghe sự kiện được đính kèm với phần tử đó. Ở đây chúng ta có thể thấy rằng đã có một Trình xử lý sự kiện một lần nhấp được thêm vào nút. Tôi có thể xem chi tiết để tìm hiểu thêm thông tin về trình xử lý sự kiện đó. Tôi có thể thấy nó không bị động, nó gõ nhấp chuột. Tôi thậm chí có thể đi sâu vào chính người nghe để tìm chức năng sẽ được thực thi như một phần của người nghe này
[2. 51] MonitorEvents là một chức năng khác chỉ dành cho DevTools. Tôi có thể cung cấp một đối tượng làm đối số đầu tiên và sau đó là các sự kiện mà tôi muốn theo dõi. Khi tôi quay lại nút và tôi kích hoạt KeyDownEvent, chúng tôi sẽ thấy rằng tên sự kiện đã được đăng xuất khỏi bảng điều khiển và sau đó là chính sự kiện đó
[3. 12] Tôi có thể dừng theo dõi các sự kiện trên nút bằng cách sử dụng chức năng onMonitorEvents. Nếu tôi chọn nút, tôi sẽ mở bảng Thành phần và tại đây, tôi có thể thấy phần dành cho người nghe sự kiện. Phần này chứa thông tin về các trình lắng nghe sự kiện được đính kèm với phần tử đó
[3. 32] Ở đây, tôi có thể thấy rằng một EventListener lần nhấp đã được thêm vào phần tử nút. Tôi có thể xem thông tin về người nghe sự kiện. Ngoài ra còn có một liên kết ở đây và tôi có thể nhấp vào liên kết đó để được đưa thẳng đến chức năng lắng nghe sự kiện. Tôi cũng có thể sử dụng trình đơn thả xuống này để lọc các trình xử lý sự kiện mà tôi đang thấy ở đây. Tôi có thể sử dụng điều này để nói, "Chỉ hiển thị những người nghe sự kiện thụ động trên phần tử này. "
[3. 52] Hiện tại, không có trình xử lý sự kiện thụ động nào trên phần tử này. Chúng tôi chỉ có những người chặn là người nghe sự kiện không thụ động. Đây là những gì sắp xảy ra. Tôi cũng có thể chuyển đổi hộp kiểm tổ tiên để xem trình xử lý sự kiện được thêm vào tổ tiên của phần tử nút của tôi
[4. 08] Tôi có thể thấy rằng đối với sự kiện nhấp chuột, cũng có một trình xử lý sự kiện được thêm vào phần tử cha và tôi có thể xem chi tiết tại đây cũng như tìm hiểu thêm thông tin về sự kiện đó