当前位置:网站首页>Cloudide plug-in development: how to debug code

Cloudide plug-in development: how to debug code

2020-12-08 10:37:11 Huawei cloud developer community

Abstract : Today we will focus on CloudIDE Plug in debugging skills , In the development of plug-ins, debugging as an important problem analysis and positioning tool can effectively help developers improve the quality of plug-ins .

The sample project in today's article continues with the previous one 《 actual combat CloudIDE Plug-in development - Quick start 》 Based on the project in , In depth introduction of plug-in debugging methods . Some developers may have doubts about the concept of the front and rear end of the plug-in , You can refer to this article Plug in Development Guide Detailed understanding of plug-in development process will be used in the basic concepts and development skills .

Back end debugging

In plugins src/node/ Directory is stored in the plug-in back-end code , The back-end code runs in IDE Example of nodejs Environment , A backend file has been generated by default when the plug-in project is created backend.ts, For lightweight plug-ins , Just add the business functions you want to implement in the file , This file contains three default methods init()、run()、stop(). In addition, a default is added doSomething Method , This method is only used as an example , Developers can modify or delete as needed . Let's briefly introduce init, run and stop Method , Detailed analysis can refer to Plug in Development Guide .

  • init() Function as the initialization method of the back end instance , You can do some initialization when the plug-in starts , The code written in this function must precede run And other functions are called , It should be noted that the functions exposed to the back end by the front end can no longer be init Call in function , That is, they can't init Method execution this.plugin.call call .
  • run() Function as the main logical function of the back end instance , It plays the role of business function entrance , In this function, you can easily call CloudIDE Of API, such as cloudide.window.showInformationMessage(`hello world!`); You can also call the functions exposed by the front end , That is, it can be executed in this method this.plugin.call call .
  • stop() Function will be called before the plug-in is stopped , If necessary, you can perform some resource cleaning operations .

Next, we will introduce the debugging process in seven steps , You can see the text below by comparing the diagram :

1. Breaking point , We try to be in backend.ts Of run() A breakpoint in the function .

2. Press F1 Or click to see -> The command panel calls up the command panel .

3. Input Hosted Plugin To search , choice Hosted Plugin: Debugging example . In the pop-up path selection dialog box, we keep the default , Because our project root directory is the plug-ins we need to debug by default .

4. Wait for the debug instance to start , Pop up port monitoring prompt in the lower right corner , Let's click OK .

5. In the pop-up port external access right, add external access right to the listening port of the instance , Be careful : The agreement here needs to be chosen https, After adding, it is shown in the figure on the right .

6. Click visit to access the debugging instance we just started , In the debugging example that pops up, we wait for the plug-in to be loaded , And switch back to our CloudIDE Development example .

7. The breakpoint is hit and suspended at the breakpoint , At this point, you can easily view the call stack 、 Variable or add a watch expression .

Again , We can also break points in other methods , If you are interested, you can also verify it through breakpoints init()、run() as well as stop() The order of execution .

Front end debugging

Different from the back end of a plug-in , The front-end code will eventually be compiled and run in the browser environment , The front-end code is stored in src/browser Directory , The plug-in project will generate two front-end source files by default when it is created frontend.ts and dynamic-webview.ts. The content of these two files with the back end backend.ts It's very similar in structure , It's just that they run in different environments , I'm not going to repeat it here init()、run()、stop() Methods to introduce . Because the front end runs in the browser environment , Our code debugging will be completed with the help of browser's own debugging function , We went straight to the subject , 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 diagram to see the text below :

1. Identify the function where the code to be debugged is located , For example, the front-end function of this debugging is called myApi().

2. Switch to debug instance , Press F12 Call up developer tools .

3. In the page list, we find the home page of our plug-in , Here is index.html ( Tips : Many developers use the default home page name , In order to facilitate the search of their own plug-in home page , You can modify the name of the front page file ). And then we go down to active-frame/{ Debug instance address }/webview/dist/index.js. open index.js file .

4. Press ctrl+f To search , Enter the name of the function to be debugged in the search box , Here is myApi. Find the function and make a breakpoint in the function body where you need to debug .

5. Click the browser's refresh button to reload the page to hit the breakpoint just hit , Debug the front end .

In a brief summary ,CloudIDE Plug in debugging is actually divided into front and back end , Back end debugging can be done with the help of CloudIDE It's done by itself , The debugging of the front-end code needs the debugging ability of the browser , After mastering debugging skills, it will be very helpful to locate and solve difficult problems in the subsequent plug-in development process . In the following article, we will discuss the operation mechanism of plug-ins and API Make an in-depth introduction to , Interested readers can also refer to Plug in Development Guide Get to know .

 

Click to follow , The first time to learn about Huawei's new cloud technology ~

版权声明
本文为[Huawei cloud developer community]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208103703006z.html