CodeMirror是一個(gè)很棒的實(shí)用程序，用于在瀏覽器環(huán)境中顯示代碼。語法高亮顯示，小部件和許多高級功能使其成為一個(gè)獨(dú)特而有用的工具。在Firefox DevTools調(diào)試器中使用CodeMirror時(shí)，我發(fā)現(xiàn)在很長的代碼行中添加數(shù)百個(gè)列斷點(diǎn)小部件確實(shí)會(huì)降低性能，而且我敢肯定，在調(diào)試JavaScript時(shí)，這不會(huì)給您帶來可怕的體驗(yàn)。

我想花些時(shí)間以確保性能良好，所以我決定只修改顯示在視口中的列斷點(diǎn)小部件。為此，我需要計(jì)算CodeMirror編輯器內(nèi)容的開始行，開始列，結(jié)束行和結(jié)束列，其中一些似乎未在CodeMirror方法中提供。

我的實(shí)驗(yàn)使我找到了一個(gè)我很滿意的解決方案；代碼干凈，性能良好，并且該方法非常可靠。這里是：

function getLocationsInViewport(editor) {   const charWidth = editor.defaultCharWidth();   const scrollArea = editor.getScrollInfo();   const { scrollLeft } = editor.doc;   const rect = editor.getWrapperElement().getBoundingClientRect();   const topVisibleLine = editor.lineAtHeight(rect.top, "window");   const bottomVisibleLine = editor.lineAtHeight(     rect.bottom,     "window"   );   const leftColumn = Math.floor(scrollLeft > 0 ? scrollLeft / charWidth : 0);   const rightPosition = scrollLeft + (scrollArea.clientWidth - 30);   const rightColumn = Math.floor(rightPosition / charWidth);    return {     start: {       line: topVisibleLine,       column: leftColumn     },     end: {       line: bottomVisibleLine,       column: rightColumn     }   }; }

CodeMirror確實(shí)提供了用于在視口（lineAtHeight）中獲取開始和結(jié)束行的簡便方法，但是列沒有類似的功能。我選擇獲取scrollLeft CodeMirror滾動(dòng)器的位置，然后使用默認(rèn)字符寬度和其他尺寸來獲取該位置的近似列。我的用戶測試發(fā)現(xiàn)，此方法非?？煽?，無論是精確的字符還是關(guān)閉一個(gè)字符（可能是由于亞像素?cái)?shù)學(xué)）。

我從來沒有宣稱自己是世界上最好的開發(fā)人員（我離它還很遙遠(yuǎn)），但是我一直為能找到有趣的問題的解決方案而感到很聰明。