Debugger Support on CodeMirror

Debugging and Code Hint Support is very useful to develop in Agile method. CodeMirror has pluggable interface to implement these functions.

Appearance

The web based debugger has following functions. This example starts with following page of the sample project.

http://localhost:8080/samples/alinous-debugger/index.html

Set Breakpoint

At first, click the gutter of the editor, then a breakpoint is added like below.

Set breakpoint

If you want to remove the break point, click it again. Then the breakpoint marker toggles.

Run Web Based Debugger

After setting breakpoints, click the "Run Debugger" button. The the browser go to the debugger's page, like below.

Run Debugger

This page shows code on the left, and the variables on the right.

This debugger example can do following things

  • Resume program
  • Step over
  • Step in

The arrow on the left of code area is current position about to execute. After executed codes, the debugger finishes.

Debugger Code

The source code of debugger is different from folder of Main part using CodeMirror.

Code Location

The source code is located in following directory, which is next to the main program of the first example.

/ALINOUS_HOME/samples/alinous-debugger/

Debugger Code Location

The start page is "/ALINOUS_HOME/samples/alinous-debugger/index.html". And after clicking the "Run Debugger" button, then go to the debugger's main program page.

Main program of the Debugger

The main part of debugger is "/samples/alinous-debugger/index.html".




Go to Top