Chrome-Entwicklertools - So finden Sie die Quelle, in der in der Konsole angezeigte Variablen definiert sind

Question

In der Konsole der Chrome-Entwicklertools können wir alle Variablen und Funktionen anzeigen, die für eine bestimmte Seite gelten, wie in dieser Abbildung dargestellt Screenshot, der eine Funktion namens "buildIssInitObject" zeigt, die auf unserer Lieblingseinkaufsseite http://grab.by/RbjQ definiert ist.

Aber was nicht gezeigt wird, ist, wo diese Funktion oder Variable definiert ist. In der Regel lädt eine Seite viele Quelldateien. Wie also kann man sehen, in welcher dieser Funktionen oder Variablen die Konsole angezeigt wird?

Answer 1

können Sie alle Verweise finden, einschließlich der Erklärung, indem Sie in der Registerkarte Quellen suchen Sie die Verknüpfung mit Ctrl + Umschalttaste + F (Fenster) oder Cmd + Opt + F (Mac). Klicken Sie auf das Ergebnis, um die Datei zu öffnen.

Hinweis: Die Datei, in der die Funktionsdefinition vorhanden ist, ist nicht unbedingt die Originaldatei, die während der Entwicklung erstellt wurde. In diesem Fall wird der Code aus vielen verschiedenen Quellen gebündelt.

Alternativ das Überlaufmenü verwenden, um die Suchleiste zu öffnen, wenn die Verknüpfung von einer anderen Anwendung, wie Spectacle entführt worden:

Answer 2

Für Funktionen, Chrome können Sie auch direkt zur Funktionsdefinition springen.

Sie können dies entweder tun, indem Sie die Maus über die Variable bewegen und auf den Link klicken.

Oder können Sie mit der rechten Maustaste auf die Variable und wählen Sie „Show Funktionsdefinition“.