Javascript 如何调试React组件中事件的顺序

我有以下React组件，在其中我试图重新实现自己的语法高亮显示和自动完成功能，以构建一个文本编辑器*

当我不使用chrome调试器时，onInput和onKeydDown事件都会触发，但当我在onInput上放置调试器断点（最先触发）时，onInput事件似乎永远不会触发。为什么？我能做些什么呢

// Box containing my forula (which consists of text, transformed into many <span>s);
var SyntaxBox = React.createClass({

  //basically a custom eventing system
  _emitChangeEvent: function(){
    console.log('changeEvent'); // <-- this will always log. But if a place a chrome breakPoint here, and then step through, the onInput event is never fired.
    var node = this.refs.formulaEditor.getDOMNode();
    var formula = node.textContent; //this is the concat of just the content of all child elements. see https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
    if(this.props.onChange && formula !== this.props.formula){
      this.props.onChange({
        target: {
          value: formula.replace(/\u00a0/g, " ") //strip out and replace &nbsp (unicode 00a0) with normal spaces
        } //this value gets sent to listeners in the parent component
      });
    }
  },

  _captureNavigation: function(event){
    console.log('keyDown'); // <-- this is always logged unless a breakpoint is placed in the console.log above in _emitChangeEvent. Why? And is there a workaround?
  },

  render: function() {
    return (
      <div>
        <div>
          <code
            onInput={this._emitChangeEvent}
            onKeyDown={this._captureNavigation}
            contentEditable
            ref='formulaEditor'
            dangerouslySetInnerHTML={{__html: this.state.html}}>
          </code>
        </div>
      </div>
        );
  },

  componentWillReceiveProps: function(nextProps){
    var formulaString = nextProps.formula;
    var formattedHTML = highlighter.colorise(formulaString); //external helper function that does syntax highlighting by taking a string and returning styles span tags
    this.setState({html: formattedHTML});
  }

});

//包含my forula的框（由文本组成，转换为多个s）；
var SyntaxBox=React.createClass({
//基本上是一个定制的事件系统
_emitChangeEvent:函数（）{
console.log（'changeEvent'）；//如果您将
调试器；
添加到
\u emitChangeEvent
函数中，它会停止在那一行吗？是否有文件的源映射？JSX->Javascript在哪里发生？是的。它会按预期停止，但当我点击“播放”执行剩余代码时，第二个onKeyDown事件从未触发。我无法想象为什么……我很抱歉在打开源代码映射的情况下运行模块，这似乎工作正常。