Jak mogę się dowiedzieć, jakie funkcje są wywoływane po naciśnięciu przycisku w konsoli Chrome?

Question

Próbuję nauczyć się biblioteki javascript Google Closure. Sprawdzam widget TreeControl UI.

Jak używać konsoli Chrome do analizowania, jakie funkcje są uruchamiane po kliknięciu przycisku "Wytnij" w poniższym pokazie? Na przykład, czy mogę w jakiś sposób ustawić punkt przerwania? Próbowałem już wyświetlić źródło i się rozejrzeć, ale uważam, że Konsola Chrome może oferować bardziej systematyczną metodę.

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

Answer 1

Z okna Narzędzia dla programistów Chrome jest otwarty, kliknij na zakładce "Sources". Jeśli nic nie widzisz, możesz kliknąć przycisk "Show Navigator" w lewym górnym rogu tej karty. Po otwarciu nawigatora przejdź do pliku, w którym zdefiniowano funkcję cut() (w Twoim przypadku jest to demo.html). Po wyświetleniu pliku należy znaleźć wiersz, w którym zdefiniowano funkcję cut(), a następnie ustawić punkt przerwania w pierwszym wierszu tej funkcji. Możesz ustawić punkt przerwania, klikając numer linii po lewej stronie.

Po ustawieniu punktu (punktów) przerwania, zrób coś na stronie, która uruchomi funkcję cut(), a przeglądarka powinna przerwać wykonywanie skryptu zaraz po wejściu w funkcję cut() (zakładając, że punkt przerwania znajduje się w pierwszej linii w ramach funkcji cut()). Od tego momentu możesz użyć kontrolek w prawym górnym rogu karty, aby wejść/wyjść/wokół kodu i zobaczyć, co się dzieje.

Oto zrzut ekranu ze mnie robi: http://d.pr/i/f6BO

Również tutaj to świetny film, który opowiada o użyciu narzędzi Chrome Dev, w tym ustawienie punktów: http://www.youtube.com/watch?v=nOEw9iiopwI

Answer 2

Rzecz że szukasz nazywa 'Profilowy'.

To można osiągnąć przez:

1. idź do profili
2. Wybierz pierwszą opcję ('Collect JavaScript procesora profilu')
3. Uruchom go przed naciśnięciem przycisku 'cut'

Answer 3

Być może szukasz sekcji "Punkty zatrzymania nasłuchujących zdarzeń" po prawej stronie obszaru debuggera. Otwórz to i wybierz zdarzenie click pod "mouse". Zobacz obraz ekranu. Następnie kliknij przycisk w aplikacji i natychmiast przejdziesz do kodu, który jest wykonywany.

Answer 4

Może to być pomocne dla niektórych osób:

Można kliknąć prawym przyciskiem myszy element na karcie elementów i użycia „przerwę na” przełamać na przykład modyfikacja elementu podrzędnego. https://developer.chrome.com/devtools/docs/javascript-debugging