wake-up-neo.net

Chrome DevTools durchsucht alle Javascript-Dateien in der Website

Ich arbeite an einer neuen Kunden-Website, die Javascript von einem CDN lädt, sodass das Javascript nicht in die Webseitenquelle eingebettet oder eingebettet ist. Ich möchte jedes Mal pausieren, wenn getCurrentPosition() ausgeführt wird , um festzustellen, in welcher externen JS-Datei es enthalten ist. 

Ich weiß, dass ich andere Tools verwenden könnte, um eine Suche nach Zeichenketten durch den Inhalt der JS-Dateien durchzuführen, aber ich möchte lieber die Debugging-Tools von Chrome verwenden. 

Soll ich versuchen, einen Ausdruck für eine Uhr zu erstellen, oder gibt es eine andere Möglichkeit, festzulegen, wann und wo eine bestimmte JS-Funktion ausgelöst wird?

javascriptgoogle-chromedebugginggoogle-chrome-devtools
16
sparecycle

Sie können mit Chrome DevTools in allen Dateien suchen. Finden Sie Ihre Funktion und debuggen Sie sie:

  1. DevTools öffnen (F12)
  2. Gehen Sie zur Registerkarte "Quellen"
  3. Öffnen Sie Search All Files, indem Sie ctrl + shift + f (Win) oder cmd + option + f (Mac) drücken.
  4. Suche getCurrentPosition
  5. Setzen Sie einen Haltepunkt (durch Klicken auf die Zeilennummer links von der Linie)

 enter image description here

38
Jaqen H'ghar
  1. Öffnen Sie die Google Dev Tools (F12).
  2. Drücken Sie Strg + p

Suchen Sie im geöffneten Feld nach allen Dateien (JS, CSS, ...).

 search all files in javascript

In der Box haben Sie 5 Möglichkeiten:

 enter image description here

  1. Geben Sie 'Dateiname' ein und wählen Sie ihn aus.
  2. Geben Sie ': Leinennummer' ein, um zu einer bestimmten Zeilennummer zu gelangen (': 10', gehen Sie zu Zeile 10).

  3. Geben Sie "@symbol" ein, um zu einem bestimmten Symbol zu gelangen ("@ TestSymbol" zum TestSymbol-Symbol).

    Wenn Sie in dieser Option @JSFunctionName oder @CSSClassName schreiben, navigiert der Cursor Zu JSFunctionName oder CSSClassName.

  4. Geben Sie "! Snippet" ein, um zu einem bestimmten Snippet zu gelangen ("! SnippetTest" zum SnippetTest-Snippet).

  5. Geben Sie "> googleCommand" ein, um zu einem bestimmten Befehl zu gelangen ("Konsole löschen", um die Konsole zu löschen).

Um die Optionen 2-5 zu verwenden, wählen Sie eine Datei aus.

8
Iman Bahrampour

Alle Informationen, die Sie benötigen, finden Sie auf der Webseite: https://developer.chrome.com/devtools/docs/javascript-debugging

 enter image description here

Einfach einlegen (kopiert von der Webseite)

Öffnen Sie eine Website wie die Google Closure-Hovercard-Demoseite oder das TodoMVC

  1. Öffnen Sie eine Website wie die Google Closure-Hovercard-Demoseite oder die TodoMVC Angular-App

  2. Öffnen Sie das DevTools-Fenster.

  3. Wenn es nicht bereits ausgewählt ist, wählen Sie Quellen.

Debuggen mit Haltepunkten

Ein Haltepunkt ist ein absichtliches Anhalten oder Anhalten eines Skripts. Verwenden Sie Haltepunkte in DevTools, um JavaScript-Code, DOM-Updates und Netzwerkaufrufe zu debuggen.

Haltepunkte hinzufügen und entfernen Öffnen Sie im Quellenbedienfeld eine JavaScript-Datei zum Debuggen. In dem Beispiel unten debuggen wir die todoCtrl.js-Datei von der AngularJS-Version von TodoMVC.

Klicken Sie auf die Zeile Gutter, um einen Haltepunkt für diese Codezeile festzulegen. Ein blauer Tag zeigt an, ob ein Haltepunkt gesetzt wurde:

 enter image description here

Mit dem obigen einfachen Beispiel können Sie die Funktion getCurrentPosition() tatsächlich "stoppen" und debuggen.

0
John Skoumbourdis

Eine Möglichkeit wäre, die Geolocation.getCurrentPosition-Methode durch eine Wrapper-Funktion zu ersetzen, damit Sie einen Haltepunkt darin setzen und dann den Stack untersuchen können, um herauszufinden, wer ihn aufruft.

0
Evan Wise

Wenn Sie wissen, wo im Code die Methode aufgerufen wird, können Sie Haltepunkte setzen . Dadurch wird die Ausführung von Javascript zur Laufzeit angehalten und Sie erhalten eine Stack-Ablaufverfolgung.

0
Daniel Lizik