Vs code debugging complete strategy (1): basic knowledge

Time:2020-10-18

Author: Charles szilagyi

Crazy technology house

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

No reprint without permission

In the next few articles, we’ll explore how to debug JavaScript and typescript code in a professional way. We’ll learn how to use the built-in debugger in Visual Studio code instead of lettingconsole.logFlying around.

Vs code debugging complete introduction series directory

  1. Basic knowledge
  2. Step by step debugging
  3. Edit the variable and execute the function again
  4. launch.json And debug console
  5. React application based on Browser
  6. Debugging react developed and packaged with typescript

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

Let’s start with some simple ones Node.js Code start, and then focus on debugging browser program, express server, graphql, typescript, serverless, jet test, storybook, etc., but before that, you should know some basic knowledge! Even if you don’t like the server side Node.js I still hope you finish this article.

Get code

Code of the series on GitHub: https://github.com/thekarel/d…

The code for our first topic is very simple – copy and paste the following code into yourindex.jsIn the document:

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 continue and open the folder in vs Code:

Vs code debugging complete strategy (1): basic knowledge

To make sure everything works, try running it:

node index.js

Then visit http://127.0.0.1 : 3456, you should seeHello, World!。

Please make sure to stop immediatelynode index.jsCommand, otherwise you will receive an ugly “error:Error: listen EADDRINUSE error soon 🙀

The code itself is simple: run the HTTP server and use “Hello, world!” Respond to each request. It’s simple, isn’t it? But this simple code is enough to understand the basic concepts of debugging.

Add new features

Let’s add a feature to the server: instead of returning the hard coded message “Hello, world!” we get it from the queryname, click http://127.0.0.1 : 3456 /? Name = cocoHello, Coco!。

Let’s pretend we don’t know what to do, run the server, send the request and checkCocoIsn’t it more interesting where to be? Try it. Start debugger!

Start debugger

Make sure it is open in vs codeindex.js, click the debugger icon, click Run and debug, and then click Node.js :

Vs code debugging complete strategy (1): basic knowledge

Now your server is running in debug mode! visit http://127.0.0.1 : 3456? Name = coco you won’t see anything different and should still return the default message.

Next, add aBreakpoint, which will pause the next time the server URL is accessed. You can do this by clicking the line number on the left side of the editor:

Vs code debugging complete strategy (1): basic knowledge

visit http://127.0.0.1 : 3456? Name = coco, vs code will pop up a view and pause the server:

Vs code debugging complete strategy (1): basic knowledge

We need to find the location of name in the query first, so that we can complete the later work. stayLeft sidebarChinese: you will see a name calledVariablesPart of. stayLocalThe IDE displays all the variables in the local scope of the function. There is one that seems likely:req:

Vs code debugging complete strategy (1): basic knowledge

Now we know that the request query string is located atreq.urlWith the help of the document, we modify the code script as follows:

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}`);
});

The server needs to be restarted because the code has been modified. Using the debugger is simple: you can press⇧+⌘+F5Or click the green restart Icon:

Vs code debugging complete strategy (1): basic knowledge

You can also disable breakpoints because you don’t need it now:

Vs code debugging complete strategy (1): basic knowledge

visit http://127.0.0.1 : 3456? Name = coco, look at our work!

I hope you can continue to explore the debugger. In the next article, we’ll use the “step over”, “step in” and “step out” functions to debug code line by line.


This article starts with WeChat official account: front-end pioneer.

Welcome to scan the two-dimensional code to pay attention to the official account, and push you every day to send fresh front-end technical articles.

Vs code debugging complete strategy (1): basic knowledge

Welcome to read the other great articles in this column:

  • Deep understanding of shadow DOM v1
  • Step by step teaching you to use webvr to realize virtual reality games
  • 13 modern CSS frameworks to improve your development efficiency
  • Fast start bootstrap Vue
  • How does the JavaScript engine work? Everything you need to know from call stack to promise
  • Websocket: real time communication between node and react
  • 20 interview questions about Git
  • In depth analysis Node.js Of console.log
  • Node.js What is it?
  • 30 minutes Node.js Build an API server
  • Object copy of JavaScript
  • Programmer 30 years old before the monthly salary is less than 30K, where to go
  • 14 best JavaScript data visualization Libraries
  • 8 top-level vs code extensions for the front end
  • Node.js A complete guide to multithreading
  • Four schemes and implementation of transforming HTML into PDF

  • More articles