Als老婆von Front-End-Kinderschuhen glaube ich, dass Sie mit dem Chrome-Browser vertraut sein müssen.调页面,写BUG ,画样式und看php片– ohne es wäre die ganze Welt nutzlos.
Glauben Sie es nicht? Mal sehen, wie mächtig unsere老婆sind ...
Wenn Sie gemeinsam die Back-End-Schnittstelle debuggen oder Online-Fehler beheben, hören Sie oft diesen Satz: „Sie versuchen, eine weitere Anfrage zu stellen.“ Lassen Sie mich sehen, warum der Fehler aufgetreten ist!
Es gibt eine lächerlich einfache Möglichkeit, die Anfrage erneut zu senden.
Wählen Sie Network
klicken Sie auf Fetch/XHR
wählen Sie die erneut zu sendende Anforderung aus,
klicken Sie mit der rechten Maustaste und wählen Sie Replay XHR
Es ist nicht nötig, die Seite zu aktualisieren oder mit der Seite zu interagieren. Ist das nicht sehr cool? ! !
schnellen Initiieren einer Anfrage in der Konsole oder beim gemeinsamen Debuggen oder Beheben von Fehlern ist es manchmal erforderlich, die Eingabeparameter zu ändern und erneut zu initiieren.
Wählen Sie Network
klicken Sie auf Fetch/XHR
wählen Sie Copy as fetch
Abrufkonsole kopieren“, fügen Sie den Code
zum Ändern der Parameter ein und drücken Sie die Eingabetaste, um den Vorgang abzuschließen
In der Vergangenheit habe ich das immer dadurch gelöst, dass ich den Code geändert oder fetch manuell geschrieben habe ...
Wenn Ihr Code berechnet wird, wird er ein komplexes Objekt ausgeben. und es muss kopiert und an andere gesendet werden. Was soll ich tun?
Verwenden Sie die copy , um对象als Eingabeparameter auszuführen
In der Vergangenheit habe ich es immer über JSON.stringify(fetfishObj, null, 2) auf die Konsole gedruckt und es dann manuell kopiert und eingefügt. Das war wirklich ineffizient ...
Was ist, wenn Sie nach der Auswahl eines Elements im Elements einige seiner Attribute wie宽,高,位置usw. über JS wissen möchten
Wählen Sie das zu debuggende Element über Elements aus
und greifen Sie mit $0 direkt auf die Konsole zu
Gelegentlich müssen wir einen Screenshot einer Webseite erstellen. Die integrierten Screenshots des Systems oder WeChat-Screenshots können erstellt werden, es ist jedoch erforderlich , Inhalte zu erfassen, die darüber hinausgehen ein Bildschirm. Was tun ?
Bereiten Sie den aufzunehmenden Inhalt vor.
cmd + shift + p Sie den Befehl Command aus
, geben Sie Capture full size screenshot ein und drücken Sie die Eingabetaste.
Was ist, wenn Sie einige ausgewählte Elemente abfangen möchten?
Die Antwort ist ebenfalls sehr einfach. Geben Sie im dritten Schritt Capture node screenshot
. Erweitern Sie sie beim Debuggen häufig einzeln, um sie zu debuggen, wenn die Ebene relativ tief ist? Es gibt eine schnellere Möglichkeit
, die opt -Taste gedrückt zu halten + zu klicken (das äußerste Element, das erweitert werden muss).
, um dieses Szenario zu sehen. Ich vermute, dass Sie auf eine bestimmte Zeichenfolge gestoßen sind und dann die Ergebnisse jedes Ausführungsschritts wissen möchten. Was sollen wir tun? .
'fatfish'.split('').reverse().join('') // hsiftaf Sie könnten dies tun
// Schritt 1 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'i', 's', 'h']
// Schritt 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// Schritt 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
Eine einfachere Möglichkeit besteht darin,
$_ zu verwenden, um auf das Ergebnis der vorherigen Operation zu verweisen, ohne es jedes Mal zu kopieren.
// Schritt 1 'fatfish'.split('') // ['f', 'a', 't', ' Fisch']
// Schritt 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Schritt 3 $_.join('') // hsiftaf
Einige Schüler mögen das weiße Thema, andere mögen das schwarze. Wir können Tastenkombinationen verwenden, um schnell zwischen den beiden Themen zu wechseln.
cmd + shift + p Führen Sie den Befehl Command aus
und geben Sie Switch to dark theme oder Switch to light theme ein, um das Thema zu wechseln.
$ “- und „ $$ “-Selektorensind die häufigste Voraussetzung für die Verwendung document.querySelector und document.querySelectorAll auf der Konsole, um Elemente der aktuellen Seite auszuwählen, aber sie sind tatsächlich etwas zu lang. Wir können $ verwenden und $$ Ersatz.
$i Installieren Sie das npm-Paket direkt in der Konsole.Ist Ihnen dieses Szenario schon einmal begegnet? Manchmal möchte ich eine API wie dayjs oder lodash verwenden, aber ich möchte nicht auf die offizielle Website gehen, um es zu überprüfen. Es wäre schön, wenn ich es direkt auf der Konsole ausprobieren könnte.
Console Importer ist ein solches Plug-in, mit dem npm Pakete direkt in der Konsole installiert werden.
Installieren Sie Console Importer -Plug-in
$i('name'), um das npm-Paket zu installieren
Angenommen, es gibt den folgenden Code. Wir hoffen, dass der Haltepunkt ausgelöst wird, wenn der Name des Lebensmittels lautet ? Wie können wir das tun?
const food = [
{
Name: '?',
Preis: 10
},
{
Name: '?',
Preis: 15
},
{
Name: '?',
Preis: 20
},
]
food.forEach((v) => {
console.log(v.name, v.preis)
}) Dies ist sehr praktisch, wenn eine große Datenmenge verwendet wird und die Bedingung nur dann aufgehoben werden soll, wenn die Bedingung erfüllt ist. Stellen Sie sich vor, wenn es keine bedingten Haltepunkte gibt, müssen wir dann n-mal auf den Debugger klicken?
(Lernvideo-Sharing: Web-Front-End-Entwicklung, Programmier-Grundlagenvideo)
Im Folgenden finden Sie die Details zu 11 Chrome-Debugging-Fähigkeiten, die die Effizienz verbessern können. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!