Disabling devtools cursor blinking best practice

I’ve spent several days trying to disable cursor blinking in Chrome devtools.

I. I found one crude method, but I’ve not fully succeeded.

II. CodeMirror uses CSS animation inconsistently for controlling cursor blinking.

III. What is best practice for writing a Chrome devtools extension to disable CodeMirror cursor blinking? That is, the method with the least probability of future breakage, because the source for CodeMirror and Chrome is continually updated and “improved” so that any custom work I invest time in to stop cursor blinking will not last very long. I will be required to fix cursor blinking on average every N months after an “improvement” breaks my blinking fix and I would like to know the method that maximizes N. This forum is of course for CodeMirror, not Chrome devtools, but having now studied the Chrome devtools extension documentation at


I think my question requires more CodeMirror expertise to answer than devtools expertise.

Details for three numbered points, above:

I. My Crude method to disable CodeMirror devtools cursor blinking

  1. On any Chrome tab, perform the devtools hotkey to open devtools: Ctrl-Shift-I or Cmd-Opt-I.

  2. Near the top-right of the devtools panel, locate the menu for selecting the devtools position: there is an option to make the devtools a free-floating window. Click this option.

  3. Within this devtools window, perform Ctrl-Shift-I/Cmd-Opt-I again to recursively open a devtools window to inspect the devtools itself. NOTE: This won’t work unless you first make the devtools a free floating window.

  4. Locate the file cm.js. Click the option to pretty-print it.

  5. Use Ctrl-F/Cmd-F to find the function “restartBlink”.

  6. Set a breakpoint on this function.

  7. Trigger the breakpoint.

  8. Now in the devtools console execute:

    cm.options.cursorBlinkRate = 0

  9. Resume devtools execution.

  10. Success: No more cursor blinking.

II. CodeMirror uses CSS animation inconsistently to control cursor blinking

I tried and failed to figure out how to create a custom CodeMirror CSS devtools extension that uses CSS to disable CodeMirror cursor blinking. It appears that CodeMirror uses CSS animation to control “fat cursor” cursor blinking but not standard cursor blinking. In lib/codemirror.css we have:

.cm-fat-cursor-mark {
background-color: rgba(20, 255, 20, 0.5);
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;

I don’t know what the “fat cursor” is. Whatever it is, it is not the cursor that Chrome devtools by default uses. The “restartBlink” function in the CodeMirror source file


is what Chrome devtools uses to control CodeMirror cursor blinking. But Chrome minifies this file into a giant cm.js file, which is where “restartBlink” can be found in Chrome devtools.

III. Chrome devtools no-cursor-blink extension

So what is the best practice for disabling Chrome devtools cursor blinking? Which method will maximize the number of months N before I must post here again asking for help because the method no longer works?

There’s an option for this. Something like

   e => e.CodeMirror.setOption("cursorBlinkRate", 0))

should work.