如何通过Chrome开发者工具获取在线VS Code的Monaco Editor实例？

要在Chrome开发者工具中获取vscode.dev使用的Monaco Editor实例并进行交互，按以下步骤操作：

• 打开Chrome开发者工具：按下F12快捷键，或右键页面空白处选择「检查」，切换到「Console」标签页。
• 获取当前激活的Monaco实例：在控制台执行以下代码

  // 获取当前激活的文本编辑器
  const activeTextEditor = vscode.window.activeTextEditor;
  // 提取Monaco Editor实例
  const monacoEditor = activeTextEditor?.editor;
  

• 验证与交互：如果monacoEditor返回有效对象，就可以调用Monaco的API进行操作，比如：

  // 获取编辑器当前内容
  console.log(monacoEditor.getValue());
  // 设置编辑器内容
  monacoEditor.setValue('通过Chrome DevTools修改的内容');
  

• 若要获取所有可见的编辑器实例，可执行：

  const allMonacoEditors = vscode.window.visibleTextEditors.map(editor => editor.editor);
  

说明：vscode.dev会将核心的vscode对象暴露在全局作用域，通过它的窗口API可以拿到关联的Monaco Editor实例，直接调用Monaco官方文档中的方法即可完成交互。

内容的提问来源于stack exchange，提问作者skunkwerk