Finden Sie die JavaScript-Funktionsdefinition in Chrome

282

Die Entwicklertools von Chrome rocken, aber eine Sache, die sie nicht zu haben scheinen (die ich finden konnte), ist eine Möglichkeit, die Definition einer JavaScript-Funktion zu finden. Dies wäre sehr praktisch für mich, da ich an einer Site arbeite, die viele externe JS-Dateien enthält. Sicher, Grep löst dies, aber im Browser wäre es viel besser. Ich meine, der Browser muss das wissen, warum also nicht? Was ich erwartet hatte, war so etwas wie:

  • Wählen Sie auf der Seite "Element prüfen" aus, wodurch die Linie auf der Registerkarte "Elemente" hervorgehoben wird
  • Klicken Sie mit der rechten Maustaste auf die Zeile und wählen Sie "Zur Funktionsdefinition gehen".
  • Das richtige Skript wird auf der Registerkarte Skripte geladen und springt zur Funktionsdefinition

Gibt es diese Funktionalität und ich vermisse sie nur?

Wenn dies nicht der Fall ist, würde dies vermutlich von WebKit stammen, konnte jedoch nichts für Feature-Anfragen des Developer Tools oder für BugKilla von WebKit finden .

Ryan DuVal
quelle
3
Es gibt eine Suchleiste, die die aktuelle Datei auf der Registerkarte "Skripte" erfasst, und Sie können den Inhalt einer Funktion anzeigen, indem Sie sie drucken. Aber ich bin jetzt neugierig, ob es eine Möglichkeit gibt, eine allgemeinere Suche durchzuführen, wie Sie es möchten ...
hugomg
3
Mit den Google Chrome Developer Tools müssen Sie im Fenster "Quellen" auf -> rechts klicken und "Ereignis-Haltepunkte" festlegen.
In meinem Fall hatte ich eine Variable auf eine unbekannte Funktion gesetzt. Ich habe myvar.toString () gemacht und es wurde gedruckt: "function Object () {[native code]}", was alles ist, was ich wissen musste.
Ring

Antworten:

366

Nehmen wir an, wir suchen nach einer Funktion mit dem Namen foo:

  1. (Öffnen Sie Chrome Dev-Tools),
  2. Windows: ctrl+ shift+ Foder macOS: cmd+ optn+ F. Dies öffnet ein Fenster für die Suche in allen Skripten.
  3. Kontrollkästchen "Regulärer Ausdruck" aktivieren,
  4. suchen nach foo\s*=\s*function(sucht foo = functionmit einer beliebigen Anzahl von Leerzeichen zwischen diesen drei Token),
  5. Drücken Sie auf ein zurückgegebenes Ergebnis.

Eine andere Variante für die Funktionsdefinition ist function\s*foo\s*\(für eine function foo(beliebige Anzahl von Leerzeichen zwischen diesen drei Token.

plesiv
quelle
8
Das ist es, worüber ich rede! Ich hatte keine Ahnung, dass es überhaupt eine Scheibe gibt - und wie würden Sie?
Ryan DuVal
22
cmd + Option + F unter OSX
Stiggler
2
Dies ist nur eine Möglichkeit, eine benannte Funktion zu definieren foo. Da sind andere. Was ist, wenn unsere Funktion zB ist bar['foo']? (Soweit ich weiß, gibt es keine gute Antwort auf diese Frage - es ist im Wesentlichen "schreibe keinen verschlungenen Code")
Steven Lu
1
Ich konnte mit der ausgewählten Antwort keine "Funktionsdefinition" finden. Ich habe bei Google gesucht und keine Hilfe gefunden. (Verwenden von Chrome Version 41.0.2272.118 m)
Web_Developer
7
Und dann finden Sie keine Funktionsdeklarationen, dynamisch generierten Funktionsausdrücke und anonymen (unbenannten) Funktionen. Ich möchte lieber so etwas wie Firefox: Klicken Sie im Überwachungsbereich auf die Funktionsreferenz -> Zur Funktionsreferenz springen.
Fagner Brack
77

Dies landete in Chrome am 26.08.2012. Ich bin mir nicht sicher über die genaue Version, ich habe es in Chrome 24 bemerkt.

Ein Screenshot sagt mehr als eine Million Worte:

 Chrome Dev Tools> Konsole> Funktionsdefinition anzeigen

Ich inspiziere ein Objekt mit Methoden in der Konsole. Durch Klicken auf "Funktionsdefinition anzeigen" komme ich zu der Stelle im Quellcode, an der die Funktion definiert ist. Oder ich kann einfach mit der Maus über das function () {Wort fahren, um den Funktionskörper in einem Tooltip zu sehen. So können Sie ganz einfach die gesamte Prototypenkette inspizieren! CDT rockt definitiv !!!

Ich hoffe, Sie alle finden es hilfreich!

Dmitry Pashkevich
quelle
1
Gibt es eine Verknüpfung oder eine Funktion, mit der nach einer Funktionsreferenz gesucht werden kann? wie "> inspizieren (document.body)". Im Moment muss ich d> tmp = {a: myFunc}; > tmp, gefolgt von der "Show function definition"
Dennis C
16
Ich denke, Sie können tundir(myFunc)
Dmitry Pashkevich
dir (myFunc) ist viel besser, braucht aber noch zwei Klicks und eine Maus
Dennis C
1
Oh, du meinst, wenn du es komplett über die Tastatur machen kannst? So etwas wie findDefinition(myFunc)? AFAIK, die es noch nicht gibt ...
Dmitry Pashkevich
Wenn Sie kein Objekt haben, das die Funktion enthält, können Sie ein Objekt darum herum erstellen, und es funktioniert weiterhin. ZB im Konsolentyp: ({1:somefunction})Klicken Sie mit der rechten Maustaste auf die Funktion im gedruckten Objekt.
Beschützer ein
47

Sie können die Funktion drucken, indem Sie den Namen in der Konsole wie folgt auswerten

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

Dies funktioniert nicht für integrierte Funktionen, sie werden nur [native code]anstelle des Quellcodes angezeigt .

BEARBEITEN : Dies bedeutet, dass die Funktion innerhalb des aktuellen Bereichs definiert wurde.

joar
quelle
1
Das funktioniert bei mir nicht (auch nicht mit auf der Seite definierten Funktionen):> toggle_search ReferenceError: toggle_search ist nicht definiert
Ryan DuVal
Aah, siehe meine Bearbeitung. Andernfalls hilft Ihnen die Verwendung der Suchfunktion. Chrome Devtools ist keine IDE, es ist ein Debugger :)
Joar
1
Dies funktioniert, um die aktuell aktive Definition der Funktion zu finden.
Patrick
1
Dies impliziert tatsächlich, dass die Funktion innerhalb des aktuellen Bereichs definiert wurde.
Jonathan
1
@aroth Zumindest in Chrome 45 funktioniert dies wieder. Mir ist bewusst, dass sich die Dinge irgendwo dazwischen geändert haben, als dies veröffentlicht wurde und jetzt. Zusammenfassend scheint es wieder zu funktionieren.
Joar
32

Update 2016 : in Chrome Version 51.0.2704.103

Es gibt eine Go to memberVerknüpfung (aufgeführt in settings > shortcut > Text Editor). Öffnen Sie die Datei mit Ihrer Funktion (im sourcesBedienfeld der DevTools) und drücken Sie:

ctrl+ shift+O

oder in OS X:

+ shift+O

Dadurch können Mitglieder der aktuellen Datei aufgelistet und erreicht werden.

arthur.sw
quelle
1
Nun, dies scheint nicht "zur Definition gehen" eines beliebigen Funktionsaufrufs zu gehen, sondern "Ihnen alle Funktionsnamen in der aktuellen Datei anzeigen und Sie zu ihnen gehen lassen" - was auch ein bisschen nützlich ist.
Scott Weaver
Genau das habe ich gesucht, eine Funktion ähnlich wie Firefox! In Firefox können Sie einfach die Entwickler-Tools öffnen, Strg + F drücken und in allen Bereichen (HTML / CSS / Javascript / etc.) Nach der JS-Funktion suchen. Dies geschieht im Gegensatz zu den in anderen Antworten erwähnten Regex-Funktionen.
JavaBean007
@ Randy, auf welcher Chromversion? Welches Betriebssystem? Ich verwende Chrome Version 59.0.3071.115 unter OS X und es funktioniert gut.
arthur.sw
@ arthur.sw Entschuldigung, ich wusste nicht, dass Sie in Quellen sein müssen, damit dies funktioniert. Ich habe erwartet, dass es auch in der Konsole funktioniert.
Randy
Für mich öffnet sich ein Chrome-Menü, wenn ich diese Tastenkombination in der Entwicklungskonsole drücke.
Schwarz
19

Eine andere Möglichkeit, zum Speicherort einer Funktionsdefinition zu navigieren, besteht darin, den Debugger an einer Stelle einzuschalten, an der Sie auf die Funktion zugreifen und den vollständig qualifizierten Namen der Funktion in die Konsole eingeben können. Dadurch wird die Funktionsdefinition in der Konsole gedruckt und ein Link angegeben, der beim Klicken den Skriptspeicherort öffnet, an dem die Funktion definiert ist.

Răzvan Flavius ​​Panda
quelle
17

Verschiedene Browser machen das unterschiedlich.

  1. Öffnen Sie zuerst das Konsolenfenster, indem Sie mit der rechten Maustaste auf die Seite klicken und "Element überprüfen" auswählen oder auf klicken F12.

  2. Geben Sie in die Konsole ...

    • Feuerfuchs

      functionName.toSource()
    • Chrom

      functionName
Deepak Dixit
quelle
Die Funktion, nach der ich suche, ist stop () und wird als onmouseover = "this.stop ();" Wenn ich das tue, was Sie sagen, wird Folgendes zurückgegeben: stop () {[nativer Code]} Was ist jetzt zu tun?
Tarik
functionName.toSource()funktioniert auch mit den neuesten Chromversionen.
Sourav Ghosh
1
@Tarik Schauen Sie sich die Online-Dokumentation für das eingebaute an stop.
Fund Monica Klage
@QPaysTaxes Danke, ich verstehe jetzt, dass wenn es zurückgibt: stop () {[nativer Code]} dort nativer Code bedeutet, dass es keine private Funktion ist, es ist eine interne Funktion und ich sollte nach der Online-Dokumentation der Funktion suchen.
Tarik
6

in der Chrome-Konsole:

debug(MyFunction)
MyFunction()
Igor Krupitsky
quelle
1
Ich mag es. Bemerkenswert: Machen Sie eine undebug(MyFunction), um den Haltepunkt wieder zu entfernen (nachdem Sie die Methodenimplementierung gefunden haben)
Andreas Dolk
5

Ich finde, der schnellste Weg, eine globale Funktion zu finden, ist einfach:

  1. Wählen Sie Quellen Registerkarte .
  2. Im Video - Bereich auf + und Typ - Fenster
  3. Ihre globalen Funktionsreferenzen werden zuerst alphabetisch aufgelistet.
  4. Klicken Sie mit der rechten Maustaste auf die gewünschte Funktion.
  5. Wählen Sie im Popup-Menü Funktionsdefinition anzeigen .
  6. Der Quellcodebereich wechselt zu dieser Funktionsdefinition.
Chris Robinson
quelle
1

In Google Chrome, Inspect Element Tool, können Sie jede Javascript-Funktionsdefinition anzeigen.

  1. Klicken Sie auf die Registerkarte Quellen. Wählen Sie dann die Indexseite aus. Suchen Sie nach der Funktion.

Geben Sie hier die Bildbeschreibung ein

  1. Wählen Sie die Funktion aus, klicken Sie mit der rechten Maustaste auf die Funktion und wählen Sie "Ausgewählten Text in der Konsole auswerten".

Geben Sie hier die Bildbeschreibung ein

subhro
quelle
1

Wenn Sie bereits debuggen, können Sie den Mauszeiger über die Funktion bewegen und mit dem Tooltip können Sie direkt zur Funktionsdefinition navigieren:

Tooltip / Datatip zur Chrome-Debugger-Funktion

Weiterführende Literatur :

KyleMit
quelle
0

Ich hatte ein ähnliches Problem beim Finden der Quelle der Methode eines Objekts. Der Objektname war myTreeund seine Methode war load. Ich habe einen Haltepunkt in die Zeile gesetzt, in der die Methode aufgerufen wurde. Durch das erneute Laden der Seite wurde die Ausführung an diesem Punkt gestoppt. Dann habe ich auf der DevTools-Konsole das Objekt zusammen mit dem Methodennamen eingegeben, dh myTree.loadund die Eingabetaste gedrückt . Die Definition der Methode wurde auf der Konsole gedruckt:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie mit der rechten Maustaste auf die Definition klicken, können Sie auch zu ihrer Definition im Quellcode wechseln:

Geben Sie hier die Bildbeschreibung ein

Abdollah
quelle