Question

我想制作一些VS Code界面的屏幕截图，例如调试部分，项目等。是否可以仅将命令发送到VSCode并抓取屏幕截图，例如使用Chrome web中的Puppeteer页面？

如果没有现成的解决方案，是否可以使用VS Code API？

Answer 1

是的，从技术上讲，但这不是操纵up或VS Code官方支持的事情。

有关该上下文的最新信息，请参见此线程：https://twitter.com/jsoverson/status/1111281688439672832

这是我为尝试这种可能性而制作的测试脚本。

const childProcess = require('child_process');
const puppeteer = require('puppeteer');
const request = require('request-promise-native');
var delay = require('timeout-as-promise');

function spawn(port) {
  return childProcess.spawn(
    '/Applications/Visual Studio Code.app/Contents/MacOS/Electron',
    [
      `--remote-debugging-port=${port || 9229}`,
      '--user-data-dir=/tmp/foo', // arbitrary not-mine datadir to get the welcome screen
      '--enable-logging',
    ],
    {
      detached: true,
      env: process.env,
      stido: ['pipe', 'pipe', 'pipe']
    }
  );
}

async function main(){
  const port = 29378;

  const proc = spawn(port);

  await delay(2000);

  const resp = await request(`http://127.0.0.1:${port}/json/list`);
  const devToolsPages = JSON.parse(resp);
  const endpoint = devToolsPages.find(p => !p.title.match(/^sharedProcess/));

  const browser = await puppeteer.connect({
    browserWSEndpoint: endpoint.webSocketDebuggerUrl,
    defaultViewport: null, // used to bypass Chrome viewport issue, doesn't work w/ VS code.
    slowMo: 50
  })

  await delay(1000);

  const page = (await browser.pages())[0];

  await page.click('[href="command:workbench.action.files.newUntitledFile"]');

  await page.type('.monaco-editor', 'Woo! I am automating Visual Studio Code with puppeteer!\n');
  await page.type('.monaco-editor', 'This would be a super cool way of generating foolproof demos.');

  setTimeout(() => proc.kill(), 1000);

}

main();

是否可以使用Puppeteer自动执行Chrome之类的Visual Studio Code？

1 个答案: