Làm cách nào để tìm hiểu chức năng nào được gọi khi nhấn nút trong Bảng điều khiển Chrome?

Question

Tôi đang cố gắng tự dạy mình thư viện javascript của Google Closure. Tôi đang kiểm tra widget giao diện người dùng TreeControl.

Tôi làm cách nào để sử dụng Chrome Console để phân tích những chức năng nào đang chạy khi tôi nhấp vào nút "Cắt" trong bản trình diễn bên dưới? Ví dụ, tôi có thể bằng cách nào đó thiết lập một điểm break cho điều đó? Tôi đã thử xem nguồn và nhìn xung quanh, nhưng tôi cảm thấy rằng Chrome Console có thể cung cấp một phương pháp có hệ thống hơn.

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

Answer 1

Với Chrome cửa sổ Developer Tools mở, nhấp chuột vào "Nguồn" tab. Nếu bạn không thấy bất cứ điều gì bạn có thể cần phải bấm vào nút "Hiển thị Navigator" ở góc trên bên trái của tab đó. Khi mở trình điều hướng, hãy điều hướng đến tệp có chức năng cut() được xác định (trong trường hợp của bạn là demo.html). Khi bạn đưa tệp vào xem, hãy tìm dòng nơi hàm cut() được xác định và sau đó đặt điểm ngắt trên dòng đầu tiên trong hàm đó. Bạn có thể đặt điểm ngắt bằng cách nhấp vào số dòng ở bên trái.

Khi bạn đã đặt (các) điểm ngắt của mình, hãy làm một điều gì đó trên trang sẽ kích hoạt chức năng cut() và trình duyệt sẽ ngắt thực thi tập lệnh ngay khi nhập hàm cut() (giả sử điểm ngắt của bạn nằm trên dòng đầu tiên) trong hàm cut()). Từ thời điểm này, bạn có thể sử dụng các điều khiển ở trên cùng bên phải của tab để bước vào/ra/xung quanh mã và xem điều gì đang xảy ra.

Dưới đây là một ảnh chụp màn hình của tôi làm việc đó: http://d.pr/i/f6BO

Ngoài ra, đây là một video tuyệt vời mà nói về việc sử dụng các công cụ Chrome Dev, bao gồm breakpoint thiết: http://www.youtube.com/watch?v=nOEw9iiopwI

Answer 2

Điều mà bạn đang tìm kiếm được gọi là 'Hồ sơ'.

Nó có thể đạt được bằng cách:

1. Đến Profiles
2. Chọn tùy chọn đầu tiên ('Thu thập Javascript CPU hồ sơ')
3. Bắt đầu nó trước khi nút 'Cắt'

Answer 3

nhấn Bạn có thể đang tìm kiếm phần "Các điểm ngắt danh sách sự kiện" ở bên phải của vùng Trình gỡ lỗi. Mở nó lên và chọn sự kiện bấm dưới "chuột". Xem hình ảnh màn hình. Sau đó bấm vào nút trong ứng dụng và bạn sẽ ngay lập tức được đưa đến mã đang được thực hiện.

Answer 4

này có thể hữu ích cho một số người:

Bạn có thể nhấn chuột phải một yếu tố trên các yếu tố tab và sử dụng 'break' để phá vỡ trên ví dụ sửa đổi phần tử phụ. https://developer.chrome.com/devtools/docs/javascript-debugging