1. Introduction

For a long time, JavaScript was like a toy language, providing little functions like form validation and popboxes on the browser side, and being unprofessional compared to other languages like Java and C++. Not having good debugging tools is a classic example of being unprofessional.

I started learning JavaScript in 2009, when Ajax became popular and IE6 was the most used browser. But the JavaScript debugging experience is terrible, summed up in three tips.

  • The first trick: pinch fingers

  • Second tip: alert

  • Tip 3: Delete code

But it is also strange that the bad debugging habits developed in the early years are actually useful up to now.

To put it bluntly, pinching means judging from personal experience that you have written too much code and encountered too many problems. You can guess about many problems and bugs intuitively. (This still holds true today.)

Alert today seems laborious, time consuming, and a terrible debugging experience. However, in many special development environments, such as the development of H5 in the third party client (such as wechat, Weibo, etc.) Webview, generally these clients will not open the client debugging function, using HTTP proxy + Alert is almost the shortest and fastest means.

Delete code in asynchronous programming encountered dead loop, execution order chaos, when oneself confused water began to doubt life, in the if/else slash a knife, always have magic effect, often can find the problem.

Of course, the above is tongue-in-cheek, and I was thrilled to discover that Visual Studio could debug JavaScript in IE6 via add-on processes.

From firebug to Chrome Dev Tool, the debugging experience of JavaScript is getting better and better. With the development of single-page applications and the mushrooming of front-end MVC frameworks, JavaScript has evolved from a humble toy language into a true industrial language.

2. Preparation

Next, let’s talk about debugging NodeJS. When NodeJS first came out, debugging was also a problem. Today, NodeJS debugging tools are very rich. However, the content I share today is mainly IDE based debugging, and All JetBrains ides support NodeJS debugging. Common ones like

  • Webstorm – The Smartest JavaScript IDE

  • IntelliJ IDEA – Capable and Ergonomic IDE for JVM

  • Phpstorm – Lightning-smart PHP IDE

This article uses IntelliJ IDEA to demonstrate that the NodeJS plug-in is recommended for JetBrains IDE installation. You can use the [Preferences] – [Plugins] to retrieve NodeJS to see if it is installed.

The materials and code used below are described below

  • [email protected] https://github.com/koajs/koa/tree/2.5.1 – Koa is now the most commonly used web framework based on NodeJS

  • Koa – examples https://github.com/koajs/examples – Koa official provided sample code

  • [email protected] https://github.com/facebook/create-react-app/tree/v1.1.4 – React engineering generator

Use 3.IntelliJ IDEAdebuggingNodeJS

Below we will demonstrate how to debug NodeJS using IntelliJ IDEA.

NodeJS plug-in in IntelliJ IDEA has good support for Node and Jest debugging, almost zero configuration.

Let’s download version 2.5.1 of Koa first. The format of the catalog is as follows

.Benchmarks benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks Benchmarks BenchmarksCopy the code

In the Test folder is the unit test code for Koa. Good JavaScript open source projects almost always have complete unit-tested code.

If you’re a practical documenteer who hates the conventions of a learning framework, unit test use cases are pretty much the fastest example code for learning a framework, getting a peek at all the functional points of the framework and learning how to use it.

3.1 Adding a Breakpoint

We entered [email protected] engineering test/application/index. The js file

  1. On the left side of line 12, click Add BreakPoint

  2. On line 9, right-click Debug should Handle… Start debugging

The following figure

To delete a breakpoint, simply click the breakpoint again and cancel it

3.2 Conditional breakpoints

Conditional breakpoints, just need to right-click on the red point of the breakpoint, that is, you can set conditional breakpoints

3.3 Abnormal Breakpoints

JetBrains’ IDE has a very useful exception breakpoint tool.

Open the Debug window

Briefly explain its configuration parameters

  • Suspend: Easy to understand, is an exception, Suspend

  • Log to console: Determines whether exception information and stack information are printed to the console

  • Uncaught only: If selected, breakpoints are performed only when exceptions are not caught. There are two types of exceptions in JavaScript, one is uncaught, the other is caught, the difference is very simple whether there is a try/catch or global exception handler to handle the exception.

3.3.1 Example of abnormal breakpoints

Open the Koajs /examples project and go to the errors/app.js file. The general code is as follows.

Throw an exception in the app.use handler, catch the exception in error, and the service starts on port 3000. If Uncaught only is set to an exception breakpoint, the breakpoint cannot be broken.

Let’s start by writing a client request code (actually using a browser can also be accessed directly). IntelliJ IDEA originally had a tool for Test RESTful Web Services, similar to PAW and PostMan, that could simulate interface requests. In the latest version of IntelliJ IDEA it is recommended to write HTTP requests directly. This feature is awesome.

On the error folder, right-click – [New] – [HTTP Request]

To Debug a piece of NodeJS code, right-click the file and select Debug. As shown below

3.4. Single step debugging

IntelliJ IDEA single-step debugging of NodeJS, similar to Chrome Dev Tool, all functions are integrated in the Debug Tool window.

support

  • Step Over – To skip a code block or function call

  • Step Into – To go inside a code block or function being called

  • Step Out – To Step Out of a code block or function body

In addition, the Show Exception Point function is very useful for jumping to the current interrupt code. Especially in large projects where you have to read the code frequently, a quick click can return you to the interrupt code.

3.4.1 Example of Single-step Debugging

Open the Koajs /examples project and go to the blog/app.js file. The general code is as follows.

The code routing table above is as follows

method path meaning
GET / Blog list
GET /post/new New Blog Page
GET /post/:id Show a blog post
POST /post Creating a Blog interface

In accordance with this routing table, we first simulated the Request through HTTP Request of IntelliJ IDEA. The following code

Let’s step through the create blog interface to see how the blog is generated.

3.4.2 Step into third-party functions

By default, single step debugging does not go into functions in third-party libraries in node_modules. Sometimes, however, the problem may lie in the functions of third-party libraries. This can be done by Force Step Into. For example, in the code above, we Step Into the create function and Step Into the ctx.redirect function. Let’s try going to ctx.redirect and see how Koa implements this function.

3.5. View and move the call stack

Sometimes, we need to look at the function call stack. You can view and move through Frames intuitively. Again, using the create function above, we want to see how we call the create function.

As you can see, although the code in blog/app.js is small, the create function’s call stack is extremely short.

However, many of these functions are Koa and NodeJS library functions and we have little relevance. We can look at the create call stack by filtering library functions.

The starting code for the business is app.listen(3000)

3.6. View and monitor variables

This is the easy one

  • The entire scope is displayed in the Variables area

  • Moving the mouse over a variable in the code also prompts for the value of the current variable

4. Customize debugging configurations

IntelliJ IDEA automatically generates a Debug configuration by either right-clicking on the unit test code or selecting Debug from the source code. In general, the default debug configuration will suffice for our configuration needs.

If you need to modify some environment variables or Node parameters, you can do so in the

Modify or add.

Here is a special configuration that starts debugging in package.json of NPM

4.1 NPM Debugging and Configuration

Create-react-app (my-app); create-react-app (my-app);

Just click the arrow on the left and [Debug ‘start’]. At this point, the code runs, but the Console prompts you to modify the configuration

We need to modify the configuration as it prompts, but first find out where the React-scripts code is. It’s node_modules/react-scripts/bin/react-scripts.js. We add a breakpoint to it.

Add a configuration in package.json.

You can debug in package.json of NPM.

Debugging is an art, not a science

According to The Art of Software Debugging, debugging is an art, not a science. This article is all about tool use, but tools and experience are both double-edged swords, and it’s very possible that you’ve gone all out to set up your environment, followed it up, and survived to find the cause of the bug. The great god solved the problem long ago by pinching his fingers.

Keep in mind that

Don’t be happy with things, don’t be sad with yourself

6. Reference

  1. The Art of Software Debugging – Norman Matloff/Peter Jay Salzman, Posts and Telecommunications Press, 2009

  2. Node.js Hardball: 115 Core Techniques – Alex R. Young/Marc Harter, Publishing House of Electronics Industry, 2017

  3. Intellij IDEA 2018.1 Help – NodeJS – https://www.jetbrains.com/help/idea/developing-node-js-applications.html