diff --git a/index.html b/index.html index 84bbbca..f3103b0 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ +
- +
@@ -212,7 +246,7 @@
-
+
diff --git a/lib/devtools-inspector.js b/lib/devtools-inspector.js index 635d51c..4e74c24 100644 --- a/lib/devtools-inspector.js +++ b/lib/devtools-inspector.js @@ -1,7 +1,7 @@ /* eslint-env browser */ import http from 'http' import { WebSocketServer } from 'ws' -import { Client } from 'pear-inspect' +import { Session } from '@holepunchto/pear-inspect' customElements.define('devtools-inspector', class extends HTMLElement { constructor () { @@ -50,18 +50,36 @@ customElements.define('devtools-inspector', class extends HTMLElement { this.$addKeyForm.addEventListener('submit', e => { e.preventDefault() - const key = this.$addKey.value - if (key.length === 0) { + const publicKey = this.$addKey.value + if (publicKey.length === 0) { this.$addKeyError.textContent = '' return } - if (key.length !== 64) { + if (publicKey.length !== 64) { this.$addKeyError.textContent = 'Key needs to be 64 characters long' return } const sessionId = generateUuid() - this.apps.set(sessionId, { publicKey: key }) + const inspectorSession = new Session({ publicKey: Buffer.from(publicKey, 'hex') }) + const app = { + publicKey, + title: '', + url: '', + inspectorSession + } + + inspectorSession.on('close', () => { + this.apps.delete(sessionId) + this.renderApps() + }) + inspectorSession.on('info', ({ filename }) => { + app.url = filename + app.title = filename.split('/').pop() + this.apps.set(sessionId, app) + this.renderApps() + }) + this.$addKey.value = '' this.$addKeyError.textContent = '' this.renderApps() @@ -78,15 +96,15 @@ customElements.define('devtools-inspector', class extends HTMLElement { return } - const targets = [...this.apps].map(([sessionId]) => ({ + const targets = [...this.apps].map(([sessionId, app]) => ({ description: 'node.js instance', // `Pear app: ${app.name}`, devtoolsFrontendUrl: `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`, devtoolsFrontendUrlCompat: `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`, faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico', id: sessionId, - title: 'index.js', + title: app.title, type: 'node', - url: `file:///path/to/some/file/index.js`, + url: app.url, webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}` })) @@ -110,13 +128,29 @@ customElements.define('devtools-inspector', class extends HTMLElement { const sessionId = request.url.substr(1) const app = this.apps.get(sessionId) if (!app) return devtoolsSocket.destroy() - const { publicKey } = app - const inspectorClient = new Client({ publicKey: Buffer.from(publicKey, 'hex') }) - inspectorClient.on('message', msg => { - devtoolsSocket.send(JSON.stringify(msg)) - }) + + const { publicKey, inspectorSession } = app + + inspectorSession.connect() + app.connected = true + this.renderApps() + + const onMessage = msg => { + const { pearInspectMethod } = msg + const isACDPMessage = !pearInspectMethod + + if (isACDPMessage) return devtoolsSocket.send(JSON.stringify(msg)) + } + inspectorSession.on('message', onMessage) devtoolsSocket.on('message', msg => { - inspectorClient.send(JSON.parse(msg)) + inspectorSession.post(JSON.parse(msg)) + }) + devtoolsSocket.on('close', () => { + console.log('devtoolsSocket on(close)') + app.connected = false + inspectorSession.disconnect() + inspectorSession.off('message', onMessage) + this.renderApps() }) }) } @@ -124,13 +158,24 @@ customElements.define('devtools-inspector', class extends HTMLElement { renderApps () { const content = [...this.apps.values()].map(app => `
+
Title: ${app.title}
+
URL: ${app.url}
Public key: ${app.publicKey}
+
Connected: ${app.connected ? 'Yes' : 'No'}
`) this.$apps.innerHTML = content if (this.apps.size > 0) this.$noApps.remove() } + + load () { + this.style.display = '' + } + + unload () { + this.style.display = 'none' + } }) // Can't use `uuid` module for some reason as it results in a throw with `crypto` when importing diff --git a/package.json b/package.json index bb435c0..2d1fc9c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "bare-path": "^2.1.0", - "pear-inspect": "github:holepunchto/pear-inspect#v1.0.1", + "@holepunchto/pear-inspect": "^2.0.0", "redhat-overpass-font": "^1.0.0", "ws": "^8.16.0" },