how to put chrome devtool in browser?

Question

I'm working for a project which run by chrome headless driver puppeteer, And i recently found a website (https://chrome.browserless.io/) could show puppeteer process in browser. This website appended an chrome devtoll which looks like magic.

i try to figure out how did work, and i found that this website inject a chrome devtool iframe, and the url usually like below:

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

i think the version after inspector.html refer for the puppeteer code, but i don't know how this work.

i think this is some method imply over DevTools Protocol. I search the document but found nothing about how to put chrome devtool iframe in browser.

Does anyone know how to do this? or any document about this?

Answer 1

The Browserless Chrome Debugger you mentioned in your question has an instance of CodeMirror text editor embedded in the left hand section.

In the right hand section, an iframe element exists to display the result of the code you executed.

Simply put, you can simulate this type of behavior and allow users to execute Puppeteer code directly from your website by following a series of steps:

• Sandbox a section of your system with a system container manager, such as LXD.
• Install Node.js, NPM, and Puppeteer.
• Install a web-based code editor, like CodeMirror, and embed it into a web page.
• Validate and send an AJAX request with the code from the text editor to your sandbox server.
• Sanitize the code, and then pass the code to Puppeteer.
• Return the result to your callback function in your AJAX request on the client-side.
• Format and sanitize the result before displaying it in an iframe.

Note: This is a naive implantation of this concept intended to explain the bare necessities of what would be required to obtain the goal in the question.

Make sure that you follow all generally recommended security practices.