VSCode-Debugging-Tutorial (2): Schritt-für-Schritt-Debugging

Es ist wichtig, zwischen dem Code zu navigieren, den Sie überprüfen möchten. Es wäre mühsam und unnötig, jede Codezeile durchzugehen. Der Debugger bietet eine bequeme Möglichkeit, zu sehen, was wichtig ist, und aus unwichtigen Codeblöcken herauszuspringen. Sehen wir uns an, wie man beim Debuggen Funktionen eingibt, überspringt und beendet!

Im vorherigen Beitrag haben wir uns den VS-Code-Debugger angesehen, Haltepunkte im Code hinzugefügt und den lokalen Status untersucht.

Dieses Mal lernen wir, wie man den Code Zeile für Zeile durchgeht und wie man in Funktionsaufrufe hinein- und herausspringt.

Holen Sie sich den Code

Machen wir zunächst den letzten Server komplexer. Fügen Sie zwei zusätzliche Funktionen hinzu: eine zum Abrufen des Namens aus der Anfrage und eine weitere zum Generieren der Begrüßung.

Sie können den folgenden Code in index.js einfügen.

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const getNameFromReq = (req) => {
  const {name} = url.parse(req.url, true).query;

  return name
}

const getGreeting = (name) => {
  const greeting = `Hello, ${name}!`

  return greeting
}

const server = http.createServer((req, res) => {
  const name = getNameFromReq(req)
  const greeting = getGreeting(name)

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`${greeting}\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});

Der Code dieser Serie kann unter https://github.com/thekarel/debug-anything

abgerufen werden

Starten Sie den Debugger

Starten wir den Debugger: Verwenden Sie die Debug-Symbolleiste oder drücken Sie F5 und wählen Sie Node.js:

Sie sollten normal auf http://127.0.0.1:3456/?name=Coco zugreifen und die Begrüßung sehen können.

Wenn Sie die Befehlszeile bevorzugen, können Sie auch curl http://127.0.0.1:3456?name=Coco verwenden, um darauf zuzugreifen.

Okay, jetzt, da der Server betriebsbereit ist, fügen wir einen Haltepunkt hinzu. Der Debugger startet nicht ohne einen Haltepunkt:

Fügen Sie einen Haltepunkt in Zeile 21 hinzu:

const name = getNameFromReq(req)

Schritt für Schritt

Lösen Sie die Anforderung für http://127.0.0.1:3456/?name=Coco erneut aus und der Debugger wird aktiviert. Und der Code, der bei Zeile 21 stoppt:

Wunderschön! Konzentrieren wir uns nun auf die Debug-Symbolleiste:

Das erste ist der Name der Schaltfläche. Die Reihenfolge von links nach rechts ist wie folgt (mit Standard-VS-Code-Verknüpfungen):

Weiter, Neustart und Stopp sind sehr einfach und führen jeweils die von Ihnen erwarteten Vorgänge aus: Weiter Gehen Sie zum nächsten Haltepunkt, starten Sie den Prozess neu und stoppen Sie den Prozess (und den Debugger).

Schritt bezieht sich auf den Funktionsaufruf in der aktuellen Zeile: Sie können in einen Funktionsaufruf einsteigen (Step Over), den Funktionsaufruf betreten (Step Into internal view and debug) oder die Funktion verlassen (Step Out). ). Mit Step-Over-Operationen können Sie Code auch Zeile für Zeile ausführen, selbst wenn es sich bei der Zeile nicht um einen Funktionsaufruf handelt.

Der Step-Befehl steuert nur, was Sie im Debugger sehen. Wenn Sie also eine Funktion „aussteigen“ oder „überspringen“, wird weiterhin der gesamte Code wie gewohnt ausgeführt. Der Debugger wird Sie nicht langweilen und Sie können Ihre Hauptarbeit schneller erledigen.

Continue

Continue führt den Code bis zum nächsten Haltepunkt oder dem Ende des Programms aus. Eine Möglichkeit zum Debuggen besteht darin, zuvor mehrere Haltepunkte in den relevanten Zeilen hinzuzufügen und mit „Weiter“ zwischen ihnen zu springen:

Wenn Sie bereits wissen, welche Funktionen oder Zeilen für Ihren Zweck relevant sind, ist der Vorgang „Weiter“ sehr praktisch. Der Debugger hält an einer vordefinierten Stelle an, sodass Sie Variablen und den Aufrufstapel überprüfen können.

Step Over

Sie können sich Step Over so vorstellen, als würden Sie Zeile für Zeile durch eine Funktion gehen, ohne jedoch auf Funktionsaufrufe einzugehen. Wenn Sie nicht an der internen Logik des Funktionsaufrufs in der aktuellen Zeile interessiert sind, sondern nur sehen möchten, wie sich lokale Variablen im Laufe der Zeit ändern, verwenden Sie es beispielsweise:

Step Over ist eine gute Möglichkeit, beschreibenden Code zu überspringen.

Treten Sie ein

Verwenden Sie „Step Into“, wenn eine Zeile eine Funktion aufruft, die Sie interessiert und Sie tiefer in die Materie eintauchen möchten. Sobald Sie sich im Codeblock befinden, können Sie wie gewohnt debuggen (mit „Weiter“, „Schritt“ usw.).

Beobachten Sie, wie wir getNameFromReq überspringen und dann getGreeting eingeben:

Step Out

Step Out ist das Gegenteil von Step In: Wenn Sie an einer Funktion nicht mehr interessiert sind, können Sie sie verlassen. Wenn Sie „Step out“ verwenden, wird der Rest des Funktionscodes auf einmal ausgeführt.

Überprüfen Sie den Unterschied zwischen diesen beiden Funktionen durch Debuggen. Wir führen die erste Funktion Zeile für Zeile aus, beenden die zweite Funktion jedoch vorzeitig:

Jetzt sollten Sie Sie haben ein besseres Verständnis der Debugger-Symbolleiste und erfahren, wie Sie sich auf die wichtigen Dinge konzentrieren können und die irrelevanten Teile überspringen. Mit diesen Befehlen sparen Sie nicht nur Zeit, sondern machen auch die gesamte Debugging-Arbeit angenehmer! Warum probieren Sie es nicht in Ihrem Projekt aus?

VSCode-Debugging-Tutorialreihe:

1, Grundkenntnisse

2, Schritt-für-Schritt-Debugging

Englische Originaladresse: https://charlesagile.com/debug-javascript-typescript-debugger-navigating-with-steps

Autor: Charles Szilagyi

Empfohlene verwandte Tutorials: Vscode-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonVSCode-Debugging-Tutorial (2): Schritt-für-Schritt-Debugging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!