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

Cloudide plug-in development: teach you how to debug code

2020-12-08 12:40:30 itread01

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

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 related concepts of the front and rear end of the plug-in , You can refer to this plug-in development guide for detailed understanding of the plug-in development process will use the basic concepts and development skills .

Back end debugging

It's on the outside src/node/ Directory is stored in the plug-in back-end code , The back-end code runs in IDE Example of nodejs In the 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 function you want to realize in the file , The 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 the plug-in development guide .

  • init() Function as the initialization method of the back-end instance , You can perform some initialization operations 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 by the front end to the back end can no longer be init Call in function , That is, they can't init Method this.plugin.call call .
  • run() Function as the main logic function of the back-end instance , Assume the role of business function entrance , In this function, it is convenient to 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() The 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. Break point , We try to be in backend.ts Of run() Put a breakpoint in the function .

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

3. Input Hosted Plugin Search for , Choice Hosted Plugin: Debug example item . Pop up the path selection dialog box, we keep the default , Because our project root directory is the plug-in we need to debug by default .

4. Wait for debugging to start , Pop up port monitoring prompt in the lower right corner , Let's click to make sure .

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

6. Click access to access the debugging example that 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 item .

7. The breakpoint is hit and suspended at the breakpoint , At this point, you can easily view the call stack 、 Variable or add a monitor 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 plug-in back end , The front-end code will eventually be compiled and run in the browser environment , The front-end code is stored in src/browser In the catalogue , When the plug-in project is created, two front-end source files will be generated by default frontend.ts and dynamic-webview.ts. The content of these two files and the back end backend.ts It's very similar in structure , It's just that the execution environment is different , I'm not going to repeat that in these two files init()、run()、stop() Methods to introduce . Due to the front-end execution and browser environment , Our code debugging will be done with the help of the browser's built-in debugging function , Let's get to the point , See how to debug the front-end code .

Debugging the front-end code will be divided into the following steps , You can also refer to the diagram to see the text below :

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

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

3. In the page list, we find our own plug-in home page , Here is index.html ( Tips : Many developers use the default home page name , In order to facilitate the query of their own plug-in home page , You can modify the name of the first page file ). And then we go down to active-frame/{ Address of debugging example item }/webview/dist/index.js. Turn on index.js Archives .

4. Press ctrl+f Search for , Enter the name of the function you want to debug 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 refresh button of the browser to reload the page to hit the breakpoint just hit , Debug the front end .

In summary ,CloudIDE Plug in debugging is actually divided into front and back end , Back end debugging can be done by CloudIDE It's done by itself , The debugging of the front-end code needs to rely on 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, the implementation mechanism of plug-in and API Make an in-depth introduction to , Interested readers can also refer to the plug-in development guide for understanding .

 

Click to focus on , The first time to learn about Huawei's new cloud technology

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208123938743j.html