Finden Sie die JavaScript-Funktionsdefinition in Chrome

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 .

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.

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:

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!

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.

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.

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.

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

in der Chrome-Konsole:

debug(MyFunction)
MyFunction()

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.

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.

2. 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".

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

Weiterführende Literatur :

• Chrome DevTools> JavaScript-Debugging-Referenz

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:

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