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 .
javascript
google-chrome-devtools
Ryan DuVal
quelle
quelle
Antworten:
Nehmen wir an, wir suchen nach einer Funktion mit dem Namen
foo
:foo\s*=\s*function
(suchtfoo = function
mit einer beliebigen Anzahl von Leerzeichen zwischen diesen drei Token),Eine andere Variante für die Funktionsdefinition ist
function\s*foo\s*\(
für einefunction foo(
beliebige Anzahl von Leerzeichen zwischen diesen drei Token.quelle
foo
. Da sind andere. Was ist, wenn unsere Funktion zB istbar['foo']
? (Soweit ich weiß, gibt es keine gute Antwort auf diese Frage - es ist im Wesentlichen "schreibe keinen verschlungenen Code")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!
quelle
dir(myFunc)
findDefinition(myFunc)
? AFAIK, die es noch nicht gibt ...({1:somefunction})
Klicken Sie mit der rechten Maustaste auf die Funktion im gedruckten Objekt.Sie können die Funktion drucken, indem Sie den Namen in der Konsole wie folgt auswerten
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.
quelle
Update 2016 : in Chrome Version 51.0.2704.103
Es gibt eine
Go to member
Verknüpfung (aufgeführt insettings > shortcut > Text Editor
). Öffnen Sie die Datei mit Ihrer Funktion (imsources
Bedienfeld der DevTools) und drücken Sie:oder in OS X:
Dadurch können Mitglieder der aktuellen Datei aufgelistet und erreicht werden.
quelle
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.
quelle
Verschiedene Browser machen das unterschiedlich.
Ö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.
Geben Sie in die Konsole ...
Feuerfuchs
Chrom
quelle
functionName.toSource()
funktioniert auch mit den neuesten Chromversionen.stop
.in der Chrome-Konsole:
quelle
undebug(MyFunction)
, um den Haltepunkt wieder zu entfernen (nachdem Sie die Methodenimplementierung gefunden haben)Ich finde, der schnellste Weg, eine globale Funktion zu finden, ist einfach:
quelle
In Google Chrome, Inspect Element Tool, können Sie jede Javascript-Funktionsdefinition anzeigen.
quelle
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 :
quelle
Ich hatte ein ähnliches Problem beim Finden der Quelle der Methode eines Objekts. Der Objektname war
myTree
und seine Methode warload
. 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, dhmyTree.load
und 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:
quelle