Debuggen von Quelldateien mit der Chrome-Erweiterung

9

Ich versuche, den Debugger mit Chrome Extension zu steuern.

Ich verwende das devtools-Protokoll und Chromextension -Dokumentation, aber ich habe keine Ahnung, wie ich sie implementieren kann, da ich keine Beispiele der verwendeten Methoden gesehen habe. Ich habe die Beispielerweiterung von hier verwendet, die zeigt, wie man den Debugger nur pausiert und wieder aufnimmt, aber das ist absolut nicht benutze mich. Ich habe versucht, einige Methoden in der Probe zu implementieren, aber nichts passiert.

%Vor%

Das Problem ist, dass die js-Datei, die ich zu debuggen versucht, von der Website innerhalb der Quellen Registerkarte geladen wird und es ist riesig, sprechen wir 150k + Zeilen nach seiner Formatierung und es dauert einige Zeit zu laden.

Kann mir jetzt jemand sagen, wie man einfach einen Unterbrechungspunkt innerhalb der js-Datei aus den Quellen hinzufügt (CHROME VERLÄNGERUNG VERWENDEN), damit er bei einer Aktion ausgelöst werden kann, die dann den Debugger stoppt, damit ich Werte ändern kann usw.?

    
AlwaysConfused 28.05.2017, 19:15
quelle

5 Antworten

1

Vielleicht platzieren Sie einen falschen Haltepunkt (formatierte Quelle), versuchen Sie mit der ursprünglichen Quelle zu arbeiten und fügen Sie columnNumber: integer

hinzu

und hier Arbeitsversion JavaScript pause/resume -> background.js :

  • installiere diese Erweiterung
  • Öffnen Sie Ссылка
  • klicke auf Debugger-Pause-Taste
  • klicken Sie auf "Debuggen Sie mich!"
  • es wird in Ссылка in Zeile 10
  • den Haltepunkt erreichen
  • Klicken Sie auf die Schaltfläche zum Fortfahren mit dem Debugger. Sie sehen die Nachrichtenvariable "hijacked ..."

der Code:

%Vor%

Demo

    
uingtea 06.06.2017, 21:09
quelle
1

BEARBEITEN: Sehen Sie sich Ihren Kommentar über dieses Wesen für eine benutzerdefinierte Erweiterung an, die Sie schreiben. Meine Antwort wird Ihnen nicht helfen (Entschuldigung!), Aber es könnte Leuten helfen, die hierher kommen, um nach einer Möglichkeit zu suchen, normale Haltepunkte in Chrome einzustellen.

Vielleicht haben Sie das schon getan, aber ... Haben Sie versucht, einfach auf die Zeilennummer der Zeile zu klicken, in der Sie den Haltepunkt setzen möchten?

So:

Sie können Haltepunkte sogar in mehreren verschiedenen Aufrufen in derselben Zeile aktivieren oder deaktivieren.

Wenn die Seite geladen ist, öffnen Sie Dev Tools mit F12, navigieren Sie dann zu der JS-Datei im Bedienfeld Quellen und fügen Sie die gewünschten Breakpoints hinzu. Aktualisieren Sie dann die Seite, um sie erneut zu laden. Chrome merkt sich, wo Sie die Haltepunkte festgelegt haben, und stoppt bei ihnen.

    
walen 06.06.2017 13:29
quelle
0

Wenn Sie den Quellcode der Datei ändern können, die Sie debuggen möchten, würde ich die Debugger-Anweisung verwenden.

Ссылка

%Vor%     
Nick 02.06.2017 13:57
quelle
0
%Vor%     
Daniel Taub 06.06.2017 19:15
quelle
0

ok, für den Start müssen Sie den Befehl Debugger.enable .. etwas wie folgt senden:

%Vor%

Dann können Sie in Ihrem onEvent Breakpoints setzen

%Vor%

Ich würde dringend empfehlen, den Sniffing-Abschnitt auf dieser Seite zu überprüfen: Ссылка , weil ich den JSON sehen konnte das wird über das WS-Protokoll zurückgegeben und das wird dir helfen, so ziemlich alles zu tun, was du willst .. Ich kann dir keine volle Erweiterung bauen, du bist auf deinem eigenen Mann,

Ich schätze, dass Sie eine Art von DOM-Element mit einer Liste von Skripten hinzufügen müssen, die Sie von Network.getResponseBody analysieren, und dann ein anderes UX-Tool, um diese Skripte auszuwählen und den Benutzern das Debuggen zu ermöglichen Zeit: (

Ich hoffe, ich habe dich in die richtige Richtung gelenkt, viel Glück!

    
Kresimir Pendic 07.06.2017 09:58
quelle