как поставить chrome devtool в браузер?

Я работаю над проектом, который выполняется кукловодом безголового драйвера Chrome, и недавно я нашел веб-сайт (https://chrome.browserless.io/) может отображать процесс кукловода в браузере. На этом веб-сайте добавлен chrome devtoll, который выглядит как волшебство.

Я пытаюсь понять, как это работает, и обнаружил, что этот веб-сайт вводит iframe chrome devtool, а URL-адрес обычно такой, как показано ниже:

https://chrome-devtools-frontend.appspot.com/serve_file/@7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true

Я думаю, что версия после Inspector.html относится к коду кукловода, но я не знаю, как это работает.

Я думаю, что это какой-то метод, подразумевающий использование DevTools Protocol. Я ищу в документе, но ничего не нашел о том, как установить iframe chrome devtool в браузер.

Кто-нибудь знает как это сделать? или какой-нибудь документ об этом?


puppeteer google-chrome-devtools
person Jack Zhang    schedule 15.12.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Отладчик Chrome без браузера, который вы упомянули в своем вопросе, имеет экземпляр CodeMirror текстовый редактор, встроенный в левую секцию.

В правом разделе существует элемент iframe для отображения результата выполненного кода.

Отладчик Chrome без браузера

Проще говоря, вы можете смоделировать этот тип поведения и позволить пользователям выполнять код Puppeteer прямо с вашего веб-сайта, выполнив ряд шагов:

  • Песочница a раздел вашей системы с помощью системного диспетчера контейнеров, например LXD.
  • Установите Node.js, NPM и Puppeteer.
  • Установите веб-редактор кода, например CodeMirror, и вставьте его на веб-страницу.
  • Подтвердите и отправьте запрос AJAX с кодом из текстового редактора на свой сервер песочницы.
  • Очистите код, а затем передайте его в Puppeteer.
  • Верните результат в функцию обратного вызова в запросе AJAX на стороне клиента.
  • Отформатируйте и очистите результат перед его отображением в _2 _.

Примечание. Это наивная имплантация этой концепции, предназначенная для объяснения самого необходимого для достижения поставленной в вопросе цели.

Убедитесь, что вы соблюдаете все общепринятые меры безопасности.

person Grant Miller    schedule 28.07.2018