如何在ACE Editor装订线上添加(切换)断点 _JavaScript开发

本文概述

1.启用断点切换
2.定义断点的样式

在集成开发环境会话中, 断点基本上是一个标记, 你可以定义该标记, 以指定当你的应用程序通过IDE的调试器运行时执行应在哪里停止。这些断点显然存储在IDE中, 而不是存储在代码本身中, 因此你可以在调试会话之间共享此类信息。 Ace编辑器是一个基于Web的代码编辑器组件, 你可以将其嵌入应用程序中以添加非常强大的” IDE” 。这意味着, 你还可以按照一些步骤在Ace编辑器中添加断点。
【如何在ACE Editor装订线上添加(切换)断点】在本文中, 我们将向你介绍如何使用JavaScript在Ace编辑器中轻松设置和删除断点。
1.启用断点切换Ace编辑器通过setBreakpoint, clearBreakpoint和getBreakpoints方法提供了一种通过guttermousedown事件和当前编辑器会话处理断点的内部方法。你可以使用on方法轻松地将此事件附加到当前编辑器, 提供你要处理的事件的名称作为第一个参数, 并提供将要执行并接收该事件的回调作为第二个参数。基本上, 当用户单击装订线中的某个位置时, 将执行此回调, 在此回调内部, 你需要验证一些规则：

如果clicked元素不包含ace_gutter-cell类, 则不会发生任何事情, 因为clicked元素将不是一行, 因此也不会是断点。
如果当前的编辑器没有集中精力, 那么也不会发生任何事情。
如果装订线上的单击区域是数字之后的区域, 例如1、2、3, 则也不会发生任何事情。

在检查了先前的条件是否不成立之后, 你可以在同一事件中继续处理断点定位：

将当前会话断点存储到通过session.getBreakpoints方法获取它们的变量中。
存储当你在装订线内单击当前行时更新的当前行。
检查存储的断点中是否已注册当前行, 如果是, 则在此处应用的逻辑是在用户单击已定义的断点时删除该断点, 否则, 应将该断点添加到编辑器中。

以下逻辑描述了如何配置PHP模式下的简单初始化ace编辑器实例, 以通过上述事件和方法来处理断点逻辑：

// 1. Initialize ace editorvar editor = ace.edit("editor"); // 2. Initialize with a custom themeeditor.setTheme("ace/theme/monokai"); // 3. Predefine some highlight mode, in our case PHPeditor.getSession().setMode({path: "ace/mode/php", inline: true}); // 4. Attach an event listener to handle when the user clicks on some row of the gutter//In this case, the breakpoint will be added in the clicked position of the documenteditor.on("guttermousedown", function(e) {var target = e.domEvent.target; if (target.className.indexOf("ace_gutter-cell") == -1){return; }if (!editor.isFocused()){return; }if (e.clientX > 25 + target.getBoundingClientRect().left){return; }var breakpoints = e.editor.session.getBreakpoints(row, 0); var row = e.getDocumentPosition().row; // If there's a breakpoint already defined, it should be removed, offering the toggle featureif(typeof breakpoints[row] === typeof undefined){e.editor.session.setBreakpoint(row); }else{e.editor.session.clearBreakpoint(row); }e.stop(); });

2.定义断点的样式如果你已经测试了以前的JavaScript, 你将看到, 尽管没有异常抛出, 但是由于一切运行正常, 所以在编辑器中没有可见的断点, 就像在其他IDE中一样。发生这种情况是因为你尚未添加一些样式来定制ace_breakpoint。你可以使用以下CSS添加非常通用的代码：

.ace_gutter-cell.ace_breakpoint{ border-radius: 20px 0px 0px 20px; /* Change the color of the breakpoint if you want */box-shadow: 0px 0px 1px 1px #248c46 inset; }

以下代码笔显示了使用断点的功能齐全的ACE编辑器, 因此在一些数字前单击装订线, 你将看到断点将使用绿色标记添加：
请参阅CodePen上带有我们代码世界(@ourcodeworld)的断点的Pen ACE编辑器。
显然, 你可以随意修改断点的样式并根据需要对其进行自定义, 添加一些特殊字符(例如?或其他字符)。
编码愉快！