VS Code debugging complete guide (1): basic knowledge

Posted May 27, 20205 min read

Author:Charles Szilagyi

Translation:crazy technical house

Original: https://charlesagile.com/debu...

Reprinting without permission is strictly prohibited

In the next few articles, we will study how to debug JavaScript and TypeScript code in a professional manner. We will learn how to use the debugger built into Visual Studio Code instead of letting console.log fly around.

VS Code Debug Complete Guide Series Directory

  1. Basic knowledge
  2. Step by step debugging
  3. Edit the variable and re-execute the function
  4. launch.json and debug console
  5. Browser-based React application
  6. Debug React developed and packaged with TypeScript ?

The debugger allows you to open the program while it is running, view its status, variables, pause, and gradually observe the data flow. You can even run code snippets and try out ideas in the runtime environment. All of these do not need to stop the program to modify the code(add console.log!) And restart. You can use the debugger to solve problems and understand the code faster.

Let's start with some simple Node.js code, and then focus on debugging browser programs, Express servers, GraphQL, TypeScript, Serverless, Jest testing, Storybook, etc., but before you understand some necessary basics! Even if you don't like server-side Node.js, I still hope you finish reading this article first.

Get the code

The code of this series on GitHub: https://github.com/thekarel/d...

The code for our first topic is very simple-first copy and paste the following code into your index.js file:

const http = require('http');

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

const server = http.createServer((req, res) => {
  const name = 'World'

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

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

Now go ahead and open the folder in VS Code:

image.png

To make sure everything is working, try running it:

node index.js

Then visit http://127.0.0.1 :3456, you should see Hello, World!.

Please make sure to stop the node index.js command immediately, otherwise you will receive an ugly" error:Error:listen EADDRINUSE error soon ?

The code itself is simple:run an HTTP server and respond to each request with "Hello, World!" Simple, right? But this simple code is enough for us to solve the basic concepts of debugging.

Add new features

Let's add a function to the server:we no longer return the hard-coded message "Hello, World!", But get the name from the query, click [ http://127.0.0.1] ( http://127.0 .0.1):3456 /? Name = Coco will reply Hello, Coco!.

Let s pretend we do n t know what to do. After running the server, send a request and see where Coco appears. Is n t it more interesting? Give it a try. Start the debugger!

Start the debugger

Make sure that index.js is opened in VS Code, click the debugger icon, click" Run and Debug ", and then click Node.js:

Start the debugger

Now your server is running in debug mode! Visit http://127.0.0.1 :3456? Name = Coco You will not see any difference, it should still return the default message.

Next, add a _breakpoint to the code, so that the execution will be suspended the next time the server URL is accessed. This can be achieved by clicking the line number on the left of the editor:

Add Breakpoint

Visit http://127.0.0.1 :3456? Name = Coco, VS Code will pop up a view and suspend the server:

Breakpoint in action

We need to find out the location of name in the query first, so that we can complete the rest of the work. In the left sidebar:you will see a section called Variables. Under Local, the IDE displays all variables in the local scope of the function. There is one that looks very likely:req:

Check req

Now we know that the request query string is located in req.url, [with the help of documentation]( https://nodejs.org/en/knowledge/HTTP/clients/how-to-access-query-string -parameters /), we modify the code script to:

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

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

const server = http.createServer((req, res) => {
  const {name} = url.parse(req.url, true) .query; //?

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

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

Since the code has been modified, the server needs to be restarted. Using the debugger is simple:you can press + + F5 or click the green restart icon:

Restart the server

You can also disable the breakpoint because it is not needed now:

Disable breakpoints

Visit http://127.0.0.1 :3456? Name = Coco and see the results of our work! ?

Hope you can continue to explore the debugger. In the next article, we will use the "step over", "step in" and "step out" functions to debug the code line by line.


This article is the first WeChat public account:front-end pioneer

Welcome to scan the QR code to pay attention to the public number, and push you fresh front-end technical articles every day

Welcome to scan the QR code to follow the public number, and push you fresh front-end technical articles every day


Welcome to continue reading other highly praised articles in this column: