Znajdź definicję funkcji JavaScript w Chrome

Narzędzia deweloperskie Chrome są fajne, ale jedną rzeczą, której wydają się nie mieć (którą mogłem znaleźć), jest sposób na znalezienie definicji funkcji JavaScript. Byłoby to dla mnie bardzo przydatne, ponieważ pracuję na stronie zawierającej wiele zewnętrznych plików JS. Pewnie grep rozwiązuje to, ale w przeglądarce byłoby znacznie lepiej. Mam na myśli, że przeglądarka musi to wiedzieć, więc dlaczego tego nie ujawnić? Spodziewałem się czegoś takiego:

• Wybierz „Sprawdź element” na stronie, która podświetli linię na karcie Elementy
• Kliknij linię prawym przyciskiem myszy i wybierz „Przejdź do definicji funkcji”
• Prawidłowy skrypt jest ładowany do zakładki Skrypty i przechodzi do definicji funkcji

Po pierwsze, czy ta funkcja istnieje i po prostu jej brakuje?

A jeśli nie, to przypuszczam, że pochodzi to od WebKit, ale nie mogłem znaleźć niczego dla żądań funkcji Narzędzia programisty lub Bugzilli WebKit .

Powiedzmy, że szukamy funkcji o nazwie foo:

1. (otwórz narzędzia deweloperskie Chrome),
2. Windows: ctrl+ shift+ Flub macOS: cmd+ optn+ F. Otwiera to okno wyszukiwania we wszystkich skryptach.
3. zaznacz pole wyboru „Wyrażenie regularne”,
4. szukaj foo\s*=\s*function(wyszukuje foo = functionz dowolną liczbą spacji między tymi trzema tokenami),
5. naciśnij na zwrócony wynik.

Inny wariant dla definicji funkcji jest function\s*foo\s*\(za function foo(z dowolną liczbą odstępów między tymi trzema żetonami.

To wylądowało w Chrome w dniu 26.08.2012 Nie jestem pewien dokładnej wersji, zauważyłem to w Chrome 24.

Zrzut ekranu jest wart milion słów:

Sprawdzam obiekt metodami w konsoli. Kliknięcie „Pokaż definicję funkcji” prowadzi mnie do miejsca w kodzie źródłowym, w którym funkcja jest zdefiniowana. Lub mogę po prostu najechać kursorem na function () {słowo, aby zobaczyć treść funkcji w podpowiedzi. Możesz łatwo sprawdzić cały łańcuch prototypów w ten sposób! CDT zdecydowanie rockowy !!!

Mam nadzieję, że wszystkim wam się przyda!

Możesz wydrukować funkcję, oceniając jej nazwę w konsoli

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

to nie będzie działać w przypadku wbudowanych funkcji, będą one wyświetlane tylko [native code]zamiast kodu źródłowego.

EDYCJA : oznacza to, że funkcja została zdefiniowana w bieżącym zakresie.

Aktualizacja 2016 : w wersji Chrome 51.0.2704.103

Istnieje Go to memberskrót (wymieniony w settings > shortcut > Text Editor). Otwórz plik zawierający twoją funkcję (w sourcespanelu DevTools) i naciśnij:

ctrl+ shift+O

lub w OS X:

⌘+ shift+O

Umożliwia to wyświetlenie listy i dotarcie do członków bieżącego pliku.

Innym sposobem na przejście do lokalizacji definicji funkcji byłoby włamanie się do debuggera, gdzie można uzyskać dostęp do funkcji i wprowadzić w konsoli pełną nazwę funkcji. Spowoduje to wydrukowanie definicji funkcji w konsoli i podanie łącza, które po kliknięciu otwiera lokalizację skryptu, w której funkcja jest zdefiniowana.

Różne przeglądarki robią to inaczej.

1. Najpierw otwórz okno konsoli, klikając prawym przyciskiem myszy stronę i wybierając „Sprawdź element” lub naciskając F12.

2. W konsoli wpisz ...

   • Firefox

     functionName.toSource()

   • Chrom

     functionName

w konsoli Chrome:

debug(MyFunction)
MyFunction()

Uważam, że najszybszym sposobem zlokalizowania funkcji globalnej jest po prostu:

1. Wybierz źródła kartę .
2. W okienku Watch kliknij + i wpisz okno
3. Twoje odwołania do funkcji globalnych są wymienione najpierw w kolejności alfabetycznej.
4. Kliknij prawym przyciskiem myszy interesującą Cię funkcję.
5. W menu podręcznym wybierz Pokaż definicję funkcji .
6. Panel kodu źródłowego przełącza się na definicję tej funkcji.

W Google Chrome narzędzie Inspect element można wyświetlić dowolną definicję funkcji JavaScript.

1. Kliknij kartę Źródła. Następnie wybierz stronę indeksu. Wyszukaj funkcję.

2. Wybierz funkcję, a następnie kliknij funkcję prawym przyciskiem myszy i wybierz „Oceń zaznaczony tekst w konsoli”.

Jeśli już debugujesz, możesz najechać kursorem na funkcję, a podpowiedź pozwoli ci przejść bezpośrednio do definicji funkcji:

Dalsza lektura :

• Chrome DevTools> Debugowanie JavaScript

Miałem podobny problem ze znalezieniem źródła metody obiektu. Nazwą obiektu była myTreei była to metoda load. Umieściłem punkt przerwania w wierszu, który wywołano metodę. Po ponownym załadowaniu strony wykonanie zatrzymało się w tym momencie. Następnie na konsoli DevTools wpisałem obiekt wraz z nazwą metody, tj. myTree.loadI nacisnąłem Enter. Definicja metody została wydrukowana na konsoli:

Ponadto, klikając prawym przyciskiem myszy definicję, możesz przejść do jej definicji w kodzie źródłowym: