Chrome DevTools przeszukuje wszystkie pliki javascript na stronie internetowej

Question

Pracuję nad witryną nowego klienta, która ładuje JavaScript z CDN, więc JavaScript nie jest osadzony lub wbudowany w źródło strony. Chciałbym, aby wstrzymać każdym getCurrentPosition() jest wykonywany w celu ustalenia, który plik JS zewnętrznych jest ona zawarta w.

Zdaję sobie sprawę, mogę korzystać z innych narzędzi do wyszukiwania ciąg dzięki zawartości plików JS, ale chciałbym raczej trzymaj narzędzia do debugowania Chrome.

Czy powinienem próbować utworzyć wyrażenie zegarka, czy istnieje inny sposób sprawdzenia, kiedy i gdzie uruchamiana jest określona funkcja JS?

Answer 1

Możesz wyszukiwać we wszystkich plikach przy użyciu Chrome DevTools. Znajdź swoją funkcję i debugowania go:

1. Otwartych DevTools (F12)
2. Przejdź do zakładki źródeł
3. Otwarte Wyszukaj wszystkie pliki naciskając ctrl + shift + f (Win) lub cmd + option + f (Mac)
4. Szukaj getCurrentPosition
5. Umieść punkt przerwania (klikając numer linii po lewej stronie wiersza)

Answer 2

Jednym ze sposobów jest zastąpienie metody Geolocation.getCurrentPosition za pomocą funkcji owijki, aby można było w niej ustawić punkt przerwania, a następnie zbadać stos, aby zobaczyć, kto go wywołuje.

Answer 3

Jeśli wiesz, gdzie w kodzie metoda jest wywoływana, możesz set breakpoints. Spowoduje to wstrzymanie wykonywania javascript w czasie wykonywania i pozwoli uzyskać ślad stosu.

Answer 4

można znaleźć wszystkie informacje, które są potrzebne na stronie: https://developer.chrome.com/devtools/docs/javascript-debugging

Poprzez umieszczenie go (skopiowane ze strony internetowej)

otworzyć witrynę takich jak Google Zamknięcie strony demonstracyjnej hovercard lub obiektu TodoMVC

1. Otwórz jako na przykład strona demo Googleoverover lub aplikacja TodoMVC Angular. Otwórz okno DevTools.

2. Jeśli nie jest jeszcze wybrany, wybierz Źródła.

debugowanie z pułapki

Punkt przerwania jest celowe zatrzymanie lub miejsce zatrzymując się w skrypcie. Używaj pułapek w DevTools do debugowania kodu JavaScript, aktualizacji DOM i połączeń sieciowych.

Dodawanie i usuwanie punktów przerwania W panelu Źródła otwórz plik JavaScript do debugowania. W poniższym przykładzie debugujemy plik todoCtrl.js z wersji TodoMVC AngularJS.

Kliknij linię rynną, aby ustawić punkt przerwania dla tego wiersza kodu. Niebieski tag wskaże, czy został ustawiony punkt przerwania:

Z powyższego prostego przykładu można rzeczywiście „stop” funkcję getCurrentPosition() i debugowanie.

Answer 5

1. narzędzia Otwórz Google Dev (F12)
2. Naciśnij Ctrl + p

W otwartym oknie wyszukiwania dla wszystkich plików (JS, CSS, ...).

W oknie masz 5 opcji:

1. typu 'filename' i wybierz ją.
2. Wpisz ": linenumber", aby przejść do określonego numeru linii (": 10" przejdź do wiersza 10).

3. Wpisz "@symbol", aby przejść do określonego symbolu ("@ TestSymbol", przejdź do symbolu TestSymbol).

   W tej opcji, jeśli napiszesz @JSFunctionName lub @CSSClassName, kursor będzie nawigował do nazwy JSFunctionName lub CSSClassName.

4. Wpisz "! Snippet", aby przejść do określonego fragmentu ("! SnippetTest", przejdź do fragmentu fragmentu kodu fragmentu kodu).

5. Wpisz "> googleCommand", aby przejść do konkretnego polecenia ("> Wyczyść konsolę" wyczyść konsolę).

Aby skorzystać z opcji 2-5 wybierz plik.