How to debug remote development using vscode?

Time:2021-12-2

For large-scale golang projects, I often use a professional ide such as Golan. However, due to the low hardware resources of my local development environment, I can’t use Golan smoothly. At this time, we can consider using vscode to replace Golan, and vscode also supports remote development, so I simply put the development environment on a remote machine, Then connect with vscode remote development mode. The most important thing is that most of our projects run directly on Linux. At this time, we can directly run applications under linux environment in vscode, and we can also debug well and reduce the occupation of local resources.

Remote configuration
The remote function of vscode consists of three plug-ins to realize remote development in three different scenarios.

Remote – SSH: use SSH to connect to the remote host for development.
Remote – Container: connect the container on the current machine for development.
Remote – WSL: on Windows 10, connect the subsystem (Windows subsystem for Linux) for development.
We use SSH mode for configuration here. The principle of SSH mode is shown in the following figure:

First, we install vscode on the local environment Mac. The IP of the remote development machine is 192.168.31.104. Configure this node to connect remotely through SSH locally. Then install the remote SSH plug-in in vscode:

After installing the remote – SSH extension, you will see a new status bar icon on the far left.

The remote status bar icon can quickly display the context in which the vs code runs (local or remote). Click the icon or press F1 and enter remote SSH to pop up the relevant commands of remote SSH.

Select the “remote SSH: connect to host” command, and then enter the connection information of the remote host in the following format to connect to the host: [email protected] , and then enter the login password as prompted.

Vscode will open a new window, and then you will see the notification that the “vscode server” is initializing on the SSH host. Once the vscode server is installed on the remote host, it can run the extension and communicate with your local vscode instance. By looking at the indicator in the status bar, you can know that you are connected to the virtual machine. It displays the host name of your virtual machine.

The remote SSH extension also adds a new icon to your activity bar. Clicking it will open the remote browser. From the drop-down menu, you can select the SSH target, where you can configure your SSH connection.

Once you connect to your SSH host, you can interact with files on the remote machine L, if you open the integration terminal(`) you will find that we are now under remote Linux.

Now we can browse the file system on the remote host using bash shell, and browse and open the folder on the remote home directory using File > open folder.

In addition, if we are developing a web application, in order to browse to the application on the remote host, we can use the forwarding function of another port.

Environment configuration
Now we can carry out remote development in vscode. Next, we take the open source project kind as an example to illustrate how to carry out remote debugging.

Kind is a tool for running local kubernetes clusters using docker container nodes. It is mainly designed to test kubernetes itself, but it can also be used for local development or CI testing.

First, clone the code on the remote host (you can also operate directly through vscode clone):

[email protected]:~/Github$ git clone v0.9.0
[email protected]:~/Github$ git checkout v0.9.0
[email protected]:~/Github$ git checkout -b dev
Then navigate to the project in vscode and open the project. Since this is a golang project, of course, the first thing to do is to install the golang game environment on the remote host. Then, of course, we need to install the golang plug-in in vscode, but note that we need to install it on the remote host. Switch to the extensions page, enter go, and select the go plug-in. Then on the plug-in page, we can see an install on SSH: 192.168.31.104 button. Click this button to install the plug-in on the remote host:

After installation, you also need to install some relevant command-line tools. You can check www.sangpi.com for relevant information. Similarly, enter F1 key in vscode and then enter go keyword to list go related operations:

What we need to do is to select the first command: go: Install / update tools, select all command-line tools, and click OK to install these tools on the remote host:

However, it should be noted that these tools need some scientific methods to download successfully. We can also download these tools manually and put them under the Gobin directory.

After these command-line tools are configured, we can use them in the project. Create a. Vscode directory under the root directory of the kind project, and create a new settings.json file under the directory. This file is used to configure vscode. The configuration information I use here is as follows, which can be configured according to our actual needs:

{
“workbench.editor.enablePreview”: false,
“editor.fontLigatures”: true,
“editor.fontSize”: 20,
“editor.fontFamily”: “‘Ubuntu Mono derivative Powerline'”,
“terminal.integrated.fontFamily”: “‘Ubuntu Mono derivative Powerline'”,
“terminal.integrated.fontSize”: 17,
“workbench.fontAliasing”: “antialiased”,
“go.inferGopath”: false,
“go.autocompleteUnimportedPackages”: true,
“go.useLanguageServer”: true,
“go.lintTool”: “golangci-lint”,
“go.docsTool”: “godoc”,
“go.buildFlags”: [],
“go.lintFlags”: [],
“go.vetFlags”: [],
“go.gocodePackageLookupMode”: “go”,
“go.gotoSymbol.includeImports”: true,
“go.useCodeSnippetsOnFunctionSuggest”: true,
“go.useCodeSnippetsOnFunctionSuggestWithoutType”: true,
“go.formatTool”: “goreturns”,
“go.gocodeAutoBuild”: false,
“go.liveErrors”: {

  "enabled": true,
  "delay": 0

}
}
Now execute the following command under the project directory of the vscode terminal to update the dependency:

[email protected]:~/Github$ export GOPROXY=”https://goproxy.cn”
[email protected]:~/Github$ go mod tidy
Now we can view the project in vscode. We can quickly track the code and have code prompts. Basically, some functions of IDE are available in vscode:

However, for large-scale golang projects, one aspect of using vscode is that we can’t quickly locate the implementation of the interface, because the interfaces in golang are likely to be implemented in multiple places. Vscode is not as convenient as Golan, but we can still use shortcuts to find the implementation of the interface, We can position the mouse over the interface name or interface method declaration, and then use the shortcut key CMD (ctrl below Windows) + F12 to find the corresponding implementation. Of course, we can also right-click to find all implementations:

Remote debugging
Now we can use the remote SSH plug-in to develop projects, but debugging is often necessary in the development process or when learning open source projects. In particular, to quickly understand the implementation of open source projects, one-step debugging and tracking code is a very good way. For example, we want to track how kind creates clusters, We can mark endpoints on some code fragments of kind’s cluster creation, and then step-by-step debugging for tracking.

When we are lucky, vscode can help us with debugging. The debugging of the golang project depends on the delve tool. The command line tool was installed when it was installed. If it was not installed, we can manually install it in the following way:

$ go get -u github.com/go-delve/delve/cmd/dlv
After installation, you need to configure the debugging tool. F1 enter debug: open launch.json to open the launch.json file.

picture

If it is opened for the first time, a new configuration file will be created. The default configuration content is as follows:

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch”,
“type”: “go”,
“request”: “launch”,
“mode”: “auto”,
“program”: “${fileDirname}”,
“env”: {},
“args”: []
}
]
}
Common configuration properties:

picture

We can also use some built-in variables in the configuration file:

${workspacefolder} debug vs Code and open all files in the root directory of the workspace
${file} debug current file
${filedirname} debug all files in the directory where the current file is located
For example, we need to debug kind’s command to create a cluster. The contents of the corresponding launch.json file are as follows:

{
“version”: “0.2.0”,
“configurations”: [

{
  "name": "Debug Kind",
  "type": "go",
  "request": "launch",
  "mode": "debug",
  "host": "127.0.0.1",
  "port": 2345,
  "program": "${workspaceFolder}/main.go",
  "cwd": "${workspaceFolder}",
  "env": {},

“args”: [“create”, “cluster”]

}

]
}
Then, mark the endpoints in the code fragment for creating the cluster, for example, mark two endpoints in the cluster function of PKG / cluster / internal / create / create.go file (click on the left):

picture

Then switch to debugging on the left and click the debug kind button configured above (or press F5) to start debugging:

picture

After debugging, delve will start a headless service on the remote host and listen on port 2345. Normally, our program will run to the breakpoint above and stop:

picture

At this time, we can see the initialized variable information. There is also a debugging toolbar at the top. Of course, there are also corresponding shortcut keys. F5: continue, F10: single step execution, F11: enter the internal execution of the function. These shortcut keys are the most commonly used. Of course, if your shortcut keys conflict, we can directly use the toolbar above for operation. The log information generated during the operation will also appear under the debug console column. In this way, we can realize remote debugging. For open source projects, we can use one-step debugging to track the execution of code, so as to understand the execution process of the program faster. Of course, remote debugging is not only for golang projects, but also for other languages.