Abstract: Today we will focus on the CloudIDE plug-in debugging skills, in the process of plug-in development as an important problem analysis and location means can effectively help developers improve the quality of plug-in.

In today’s article, we continue the above article “CloudIDE plug-in development – Quick start” project based on the in-depth introduction of plug-in debugging methods. Some developers may be confused about the concepts related to the front and back end of the plug-in, but you can refer to this plug-in development guide to learn more about the basic concepts and development techniques used in the plug-in development process.

The back-end debugging

The SRC /node/ directory of the plug-in stores the backend code of the plug-in, which runs in the NODEJS environment of the IDE instance. A backend file is generated by default when the plug-in project is created. For lightweight plug-ins, you only need to add desired service functions to the file. This file contains three default methods init(), run(), and stop(). There is also a doSomething method added by default, which is used as an example and can be modified or removed as needed. Here we briefly describe the init, run, and stop methods, and refer to the plug-in development guide for detailed parsing.

  • The init() function is used to initialize the backend instance. The code in this function must be called before the run and other functions. It is important to note that the functions exposed by the front-end can not be called in the init function. This.plugin. Call cannot be called in init methods.

  • The run () function as a main logic function of the back-end instance, undertaking the business function of entrance, can easily in the function call CloudIDE API, such as CloudIDE. Window. ShowInformationMessage (hello world! ; You can also call the functions exposed by the front end, that is, you can make the this.plugin.call call in this method.

  • The stop() function will be called before the plug-in is stopped, and some resource cleaning can be done if necessary.

The next seven steps will introduce the debugging process, you can compare the FOLLOWING text description:

  1. Breakpoint, we try to put a breakpoint in run() of backend.ts.

  2. Press F1 or click View -> Command Panel to bring up the command panel.

  3. Enter Hosted Plugin to search, and select Hosted Plugin: Debug Instance. We leave the path selection dialog box as default, because our project root directory defaults to the plug-in we need to debug.

  4. Waiting for the debugging instance to start, the port monitoring prompt pops up in the lower right corner, so we click OK.

  1. Add the external access right to the instance’s listening port in the external access right of the port. Note: the protocol here needs to select HTTPS, as shown in the figure on the right after adding.

  1. Click Access to access the debug instance we just launched, where we wait for the plug-in to load and then switch back to our CloudIDE development instance.

  2. The breakpoint is hit and paused at the breakpoint, at which point you can easily view the call stack, variables, or add monitoring expressions.

We can also use breakpoints in other methods to verify the order in which init(), run(), and stop() are executed.

The front-end debugging

The front-end code is stored in the SRC /browser directory. By default, two front-end source files frontend. Ts and dynamic-webView.ts are generated when the plug-in project is created. The content of these two files is very similar to the structure of backend.ts, but the environment is different. The init(), run(), and stop() methods in these two files are not repeated here. Since the front-end runs in the browser environment, our code debugging will be completed with the help of the browser’s own debugging function, let’s go straight to the topic, to see how to debug the front-end code.

Front-end code debugging will be divided into the following steps, you can also refer to the following text description:

  1. Specify the function where the code you want to debug resides, such as the front-end function called myApi().

  2. Switch to the debug instance and press F12 to bring up the developer tools.

  3. In the list of pages, you can find the home page of your plugin, in this case index.html. (Tip: many developers use the default home page name, so change the name of the home page to make it easier to find your plugin’s home page.) Step by step, expand down to active-frame/{debug instance address}/ webView /dist/index.js. Open the index.js file.

  1. Press CTRL + F to search and enter the name of the function you want to debug in the search box, in this case myApi. Find the function and make a breakpoint in the function body where you want to debug.

  2. To reload the page, click the browser’s refresh button to hit the breakpoint and debug the front end.

To sum up, the debugging of CloudIDE plug-in is actually divided into the front and back ends. The debugging of CloudIDE plug-in can be completed with the help of CloudIDE itself, while the debugging of front-end code needs the help of the debugging ability of the browser. After mastering debugging skills, it will be very helpful to locate and solve the difficult problems in the subsequent plug-in development process. The mechanics and apis of plug-ins will be covered in a future article, but interested readers can also refer to the plug-in development guide first.

Click to follow, the first time to learn about Huawei cloud fresh technology ~