banister banister - 1 year ago 237
Javascript Question

How to mark line numbers in javascript ace editor?

As you can see in the following screenshot:


Ace editors have a 'gutter' on the left-hand side that contains the line numbers. I would like to detect a click on this gutter and insert a marker for a breakpoint, as in the following screenshot from chrome dev tools screenshot

I've had a look at the Ace editor API, but can't figure out how to do it, could someone tell me the best way to go about it?


Answer Source

See this thread

you can use this function

editor.on("guttermousedown", function(e) {
    var target =; 
    if (target.className.indexOf("ace_gutter-cell") == -1);
    if (!editor.isFocused()) 
    if (e.clientX > 25 + target.getBoundingClientRect().left) 

    var row = e.getDocumentPosition().row;

and don't forget to add some styling for breakpoints e.g.

    border-radius: 20px 0px 0px 20px; 
    box-shadow: 0px 0px 1px 1px red inset; 

Breakpoints are often toggled. To achieve this behavior, use


var breakpoints = e.editor.session.getBreakpoints(row, 0);
var row = e.getDocumentPosition().row;
if(typeof breakpoints[row] === typeof undefined)


Notice the strange use of EditSession.getBreakpoints(), which doesn't return an array of row numbers as documentation suggests, but rather an array with indices corresponding to the row numbers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download