Graphical Debugging in Web IDE

[gfwilliams]

Posted at 2015-10-20 by @gfwilliams

Just to let you know that I've now added a graphical debugger into the Web IDE. It'll be in versions of the IDE that you install from GitHub.

It has:

• Buttons to step over/into/etc
• The current line number highlighted
• When you hover over a variable name in the IDE, its current value is displayed

For it to work with lines highlighted you'll need the latest build of Espruino as well.

It's still a bit rough around the edges, so any help you can give in terms of testing (and fixing ;) would be appreciated. The actual code is here.

Stuff that's not quite right at the moment:

• Sometimes the 'value as tooltip' causes the currently highlighted line of code to disappear.
• 'value as tooltip' only works for simple variables - however it wouldn't be too hard to look at the HTML nodes before and after here and to then sent the whole expression over to Espruino to evaluate.

[espruino-discuss]

Posted at 2017-03-26 by user75075

It does not appear that this code is in the latest chrome extension from the linked site. How does a person install this to get interactive debugging on the graphical interface? thanks.

[espruino-discuss]

Posted at 2017-03-26 by user75076

Note: I am the same user from above, just posting reply on son's computer
From the note "or it to work with lines highlighted you'll need the latest build of Espruino as well." I figured I need to flash the latest espruino firmware. I pointed the flasher at the GIT master and it programmed 'fine' (seemed to program too fast). Upon reset, the led came on and just sat there. could not connect via serial port. So, what firmware enables me to use the above features? I bought the official pico hardware from Adafruit because I wanted a interactive debugger for my son to understand code flow and variable usage in a easy to use package. Thanks.
Also, here is my board/firmware versions from IDE (latest from IDE flash update):
VERSION 1v91
BUILD_DATE Jan 12 2017
BUILD_TIME 10:54:37
GIT_COMMIT a6300790b771b7afffdb2bb2d8c5d0607f7977ef
BOARD PICO_R1_3
CHIP STM32F401CDU6
CHIP_FAMILY STM32F4
FLASH 393216
RAM 98304
SERIAL 36005b00-04513432-33343134
CONSOLE USB
EXPORTS {"jsvLock":270569,"jsvLockAgainSafe":270555,"jsvUnLock":270529,"jsvSkipName": ...

[gfwilliams]

Posted at 2017-03-27 by @gfwilliams

Hi,

Version 1v91 of Espruino will be fine - so I'd just use the default binary offered by the flasher. Do you have the URL of the one you tried but that didn't work so I can check?

The normal IDE should work as well. This post was from 2015, so 'latest' code then should now be included by default

Try creating a function on the right-hand side:

function foo() {
  debugger;
  digitalWrite(LED1,1);
  digitalWrite(LED1,0);
  digitalWrite(LED2,1);
  digitalWrite(LED2,0);
}

Click upload, then after upload, in the left-hand side of the IDE, type foo().

It should jump in to debugger mode where you can step through line by line.

The only thing you can't do is debug code that executes during the upload process (for instance if you also wrote foo() on the right-hand side - but it's easy enough to type it in after, run it on a button press, or use setTimeout to do it after a delay