Difference between revisions of "Zynthian Webconf debug with Visual Studio Code (VSC)"

From ZynthianWiki
Jump to navigation Jump to search
Line 63: Line 63:
 
== Selecting the home directory on the Remote server ==
 
== Selecting the home directory on the Remote server ==
  
[[File:Vsc open a folder.png|thumb|center]]
+
We have logged onto the home directory for the root user, but that isn't where zynthian-webconf runs from....
 +
We should also turn off the running instance but I've left that as a gotcha for later in this walk throu'
  
[[File:Vsc select folder default.png|thumb|center]]
+
[[File:Vsc open a folder.png|thumb|center|800px]]
  
[[File:Vsc select folder zynthian webconf.png|thumb|center]]
+
VSC will pop up a helpful file location prompt to help this populated with the defualt, we however, wnt to change this.
  
[[File:Vsc zynthian webconf head.png|thumb|center]]
+
[[File:Vsc select folder default.png|thumb|center|800px]]
 +
 
 +
So we will be using zynthian-webconf so we need to select the appropriate folder location to run this from ... In our case /zynthian-zynthin-webconf/
 +
 
 +
[[File:Vsc select folder zynthian webconf.png|thumb|center|800px]]
 +
 
 +
And when it's done it's stuff you can see and select the python file that runs webconf and examine it....
 +
 
 +
[[File:Vsc zynthian webconf head.png|thumb|center|800px]]
  
 
== Running the Debugger ==
 
== Running the Debugger ==

Revision as of 17:21, 11 January 2022

Debugging Webconf with Visual Studio Code

This is presented as an example of how a Visual Studio Code can be used to examine a component of the zynthian sub system as it runs using the Visual studio Code extensions, python & remote-ssh. These are loaded using the cog dialog at the bottom of the vsc code page.


Vsc extentions detail.png

Once you have these components added you can attempt to log onto an existing Zynthian from your PC, MAC, or linux machine, just so long as it's capable of running Visual Studio Code. In my own case I have it running on a 64 bit Raspbian instance, and I had to build it from source to get it running which is a degree of proof of the overall flexibility of what is after all a Microsoft product!

I also tend to add the git-graph extension.

Zynthian git graph

The ssh connection

The addition of the remote component adds the Remote Explorer element

Vsc remote explorer section.png

I already have a couple of remote zynthians in the machine and VSC is pretty tenacious at hanging onto remote instances it knows about. But we will try to add a new machine.

I have a zynthian called zynthian-orig.local. It's actually a genuine zynthian product running a Pi3 and no membrane switches and some fairly simplistic interface. Indeed it has to be disassembled to change the ssd. Such were the early days.!

Zynthian-orig.local

1 Visual Studio Code Configure.

Firstly we need to add the extensions.

Vsc extensions.png

activated by the cog in the bottom left hand corner of the Visual Studio Code interface This will give us a command line that will attempt to log on to the server we are pursuing.. . .

Vsc remote explorer dialog.png

So lets make sure that it is actually running.

Zynthian-sys-security.png

To access this we press on the + button against the appropriate machine. ( images a little awry here )

Vsc remote explorer add new.png
Vsc remote explorer dialog.png
Vsc remote explorer zynthian-orig.png
Vsc remote explorer first login.png

we enter the command we will use to access the remote zynthian which is ssh....

And login using the machines root password.

Vsc-remote explorer password.png

Once VSC has established a connection, it will download the appropriate python components to the zynthian to allow debugging to take place remotely. This make take some time and als o may complain about missing components, giv it some time it will get here if it possibly can....

Vsc setting up remote server.png
Vsc connected.png

and as you can see the zynthian-orig.local machine is recognised by visual studio code.

Vsc remote explorer connect to host.png

2 Selecting the home directory on the Remote server

We have logged onto the home directory for the root user, but that isn't where zynthian-webconf runs from.... We should also turn off the running instance but I've left that as a gotcha for later in this walk throu'

Vsc open a folder.png

VSC will pop up a helpful file location prompt to help this populated with the defualt, we however, wnt to change this.

Vsc select folder default.png

So we will be using zynthian-webconf so we need to select the appropriate folder location to run this from ... In our case /zynthian-zynthin-webconf/

Vsc select folder zynthian webconf.png

And when it's done it's stuff you can see and select the python file that runs webconf and examine it....

Vsc zynthian webconf head.png

3 Running the Debugger

Vsc start debugging.png
Vsc remote installing.png
Vsc debug selection.png
Vsc already in use.png

4 Turning off Running Webconf instance

Vsc address already in use with stop.png
Vsc stop webconf systemd.png
Zynthian dead webconf.png

5 Now Start the debugger...

Zynthian-orig running midi.png
Vsc debug line 132.png
Vsc debug stepover.png