how to debug icestudio source code step by step

[dylanZh]

Hi All,

I am not sure if it is the correct place to submit an issue here. If not, please delete this.

I am a hardware engineer and I usually use icestudio for FPGA DIY functions. and thanks to icestudio,it is quite good for me to use it.
Recently I wanted to know how icestudio works internally and expand my knowledge to website technology as well, so I dived into the source code.
I have installed a VMware machine and installed Ubuntu 22.04 on it. I download source code and am able to run it with the final command “npm start” based on
https://github.com/FPGAwars/icestudio/wiki/Icestudio-development-version

then the next step I am going to do is to run the code step by step and check the main workflow for the project. In order to do this, I have read and learnt how to debug nodejs and nwjs.

https://nodejs.org/en/docs/guides/debugging-getting-started/
https://docs.nwjs.io/en/latest/For%20Users/Debugging%20with%20DevTools/

What is more, I have watched videos related to these topics on Youtube, such as how to use DevTools, VScode etc. Of course, I have learnt the main knowledge for HTML, CSS, Javascript, angular and grunt.

Currently, the big issue is that I can not get into debug mode for icestudio project. When I use -inspect (for nodejs) or --remote-debugging-port=port for nw command, DevTools doesn’t connect to the project.
so I am wondering
1, How do you guys set up development environments? I would appreciate it if there is any document for it.
2. How you guys debug the project, especially any method that can debug code step by step.
3, I can not find the print out,such as the output of console.log("->DEBUG: app.js") in app.js when I run icestudio develop with command npm start; is there any switch for it?
(but this info can be found in DevTools console when I install the software(not source) on windows and run it).

I have searched through google but not got any use information, this may because I did not use correct key words to search it. so any advice is welcome, as they may lead me to a correct track for it.

Best regards
Dylan Zheng

[cavearr]

Hi Dylan! I am very happy that you want to delve deeper into Icestudio, ask everything you need, you can ask here or in the fpgawars forum https://groups.google.com/g/fpga-wars-explorando-el-lado-libre. It seems like a group in Spanish but we speak in English if you are interested or participate in a thread, everyone is welcome!

About the configuration, I work on Linux and OSX with vim or Visual Studio code and then validate the installations with virtualbox or Parallels (or any other virtualization environment for Windows), for mid-January I am planning to do an online workshop on development of Icestudio plugins to present how to develop for Icestudio, since I am modularizing the architecture and gradually abandoning the current one in favor of a pluggable system that is already inserted in the core and little by little is swallowing up the old core.

I am evolving the core and I will change the architecture a lot in the coming months. This last semester I have been finishing very important pieces that will soon be available. but if you want to go deeper now, it's basically an old angular js application (the current angular version is outdated, this is going to change radically as I told you before and angular will be removed).

Debugging the application step by step is very difficult from the web inspector because it is a reactive application and they are all events and the angular architecture is not designed for this.

My recommendation is to try to read the code and ask as much as you want, put console.log or some kind of trace, I designed iceConsole.log which logs to the icestudio.log file in your home directory. This is useful because angular doesn't expose all of its internal processes or events in the top-level window and you can't get console.log messages (it could be running in a background thread, for example).

To develop, download the code and run it from cli with npm start. Once you have started Icestudio you can press ctrl+f12, this opens the Chrome inspector for the nwjs application, now you can develop as a web application.

For the toolchain process, you need to know Apio (https://github.com/FPGAwars/apio), which is a Yosys wrapper. This is another necessary piece to know.

If you want to join the development, I recommend that you start fixing some bugs from this list of problems, try to select simple bugs and delve into specific parts of the code to understand all the things and if you want me to recommend any issue or bug, tell me and I will search something that I see that may be acceptable at the beginning and I will try to guide you.

Another way is to join the fpgwars group, where threads constantly pop up with needed features or simple things to do (for example https://groups.google.com/g/fpga-wars-explorando-el-lado-libre/c/lbG10tGKp9k)

Or if you have a feature you want to implement, let us know and I'll try to help you develop it.

If you are thinking about doing something, it might be interesting to comment on it here or in the fpgawars group so as not to collide with current development.

I know we have bad documentation, but we are very proactive to help you in the process and step by step we improve all things for the community.

Thanks!!

[dylanZh]

Hi Cavearr,

Thanks for your detail explanation for the project.

I totally agree that reading the code is a best way to get familiar with icestudio. I think I need to change my method for Javascript project development as I still get used to C language and the habits for debugging embedded system firmware.

I will go through quickly for Apio tools and fpgawars forum.

Actually my final target is to add some features based on icestudio to fit my own custom board which is designed on an FPGA. I will try to record my thoughts and clarify it with documents and then ask for help from the group.

I am glad to join icestudio development. but I don't want to push myself too hard. so I will give myself some time to expose different skills of website technology. I will let you know when I get ready.

Thanks
Dylan Zheng

[cavearr]

Don't worry Dylan!! step by step and day by day!

If you want to add your board to icestudio, the first thing you need is add it to Apio. If you only wants now to do it, don't spent time on it, tell me your board requirements and i could add for you, feel free to count with me!

[cavearr]

I'm closing this issue and if you need help, please reopen it.