From 4a01ee2db67163ac5aa5e7cddda50fcd3d79f6d3 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Wed, 24 Jan 2024 14:23:47 +0100 Subject: [PATCH 01/14] Add inspector tab --- index.html | 74 +++++++++++-------- lib/devtools-inspector.js | 147 ++++++++++++++++++++++++++++++++++++++ package.json | 8 ++- 3 files changed, 197 insertions(+), 32 deletions(-) create mode 100644 lib/devtools-inspector.js diff --git a/index.html b/index.html index aab1fb7..84bbbca 100644 --- a/index.html +++ b/index.html @@ -40,14 +40,16 @@ background: #efeaea; color: #151517; } - + + a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; } + #logo { float: left; margin-right: 2rem; margin-left: 0.65rem; margin-top: -0.1rem; } - + nav { height: 146px; float: left; @@ -55,15 +57,20 @@ padding-top: 2em; margin-right: 30rem; } - + nav > a { display: block; } - + section { + display: none; + } + + + section:target { display: block; } - + pre { background: none; color: #B0D944; @@ -96,29 +103,29 @@ margin-top: .75rem; user-select: none; } - + h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; } blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem } blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; } .col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; } - + #back, #mode { - width: 32px; - height: 32px; - position: absolute; - right: 0.4rem; - cursor: pointer; - user-select: none; - opacity: .65; - } + width: 32px; + height: 32px; + position: absolute; + right: 0.4rem; + cursor: pointer; + user-select: none; + opacity: .65; + } - #back { - top: 10px; - } + #back { + top: 10px; + } - #mode { - top: 60px; - } + #mode { + top: 60px; + } #bar { backdrop-filter: blur(64px); @@ -154,10 +161,10 @@ app-router[data-load="docs-viewer"] a[href='/documentation'], app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'] { color: rgb(78, 250, 92); } - +
- + 
           __ \    _ \   _` |   __|
@@ -196,14 +204,18 @@
-
-
-
- -
-
-
- +
+
+
+ +
+
+
+ +
+
+
+ diff --git a/lib/devtools-inspector.js b/lib/devtools-inspector.js new file mode 100644 index 0000000..635d51c --- /dev/null +++ b/lib/devtools-inspector.js @@ -0,0 +1,147 @@ +/* eslint-env browser */ +import http from 'http' +import { WebSocketServer } from 'ws' +import { Client } from 'pear-inspect' + +customElements.define('devtools-inspector', class extends HTMLElement { + constructor () { + super() + this.template = document.createElement('template') + this.template.innerHTML = ` +
+ + +

Inspector

+
+ This acts as a link between chrome://inspect and debugging Pear apps +
+
    +
  1. Run a pear app with "pear dev . --inspect"
    2. +
  2. The outputted key should be added here
    3. +
  3. In Chrome, open chrome://inspect and the app should appear under Targets
    4. +
+
+
+ +

+
+
+

No apps availble. Add a key above, to start debugging.

+
+
+ ` + this.root = this.attachShadow({ mode: 'open' }) + this.root.appendChild(this.template.content.cloneNode(true)) + + this.$addKeyForm = this.root.querySelector('#add-key-form') + this.$addKey = this.root.querySelector('#add-key') + this.$addKeyError = this.root.querySelector('#add-key-error') + this.$apps = this.root.querySelector('#apps') + this.$noApps = this.root.querySelector('#no-apps') + this.apps = new Map() + + this.$addKeyForm.addEventListener('submit', e => { + e.preventDefault() + const key = this.$addKey.value + if (key.length === 0) { + this.$addKeyError.textContent = '' + return + } + if (key.length !== 64) { + this.$addKeyError.textContent = 'Key needs to be 64 characters long' + return + } + + const sessionId = generateUuid() + this.apps.set(sessionId, { publicKey: key }) + this.$addKey.value = '' + this.$addKeyError.textContent = '' + this.renderApps() + }) + + const httpServer = http.createServer() + const wsServer = new WebSocketServer({ noServer: true }) + + httpServer.listen(9229, () => console.log('[httpServer] running on port 9229')) + httpServer.on('request', (req, res) => { + if (req.url !== '/json/list') { + res.writeHead(404) + res.end() + return + } + + const targets = [...this.apps].map(([sessionId]) => ({ + 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', + type: 'node', + url: `file:///path/to/some/file/index.js`, + webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}` + })) + + res.writeHead(200, { + 'Content-Type': 'application/json; charset=UTF-8', + 'Cache-Control': 'no-cache', + 'Content-Length': JSON.stringify(targets).length + }) + res.end(JSON.stringify(targets)) + }) + httpServer.on('upgrade', (request, socket, head) => { + console.log(`[httpServer] UPGRADE. url=${request.url}`) + const sessionId = request.url.substr(1) + const sessionIdExists = this.apps.has(sessionId) + if (!sessionIdExists) return socket.destroy() + + wsServer.handleUpgrade(request, socket, head, ws => wsServer.emit('connection', ws, request)) + }) + + wsServer.on('connection', (devtoolsSocket, request) => { + 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)) + }) + devtoolsSocket.on('message', msg => { + inspectorClient.send(JSON.parse(msg)) + }) + }) + } + + renderApps () { + const content = [...this.apps.values()].map(app => ` +
+
Public key: ${app.publicKey}
+
+ `) + this.$apps.innerHTML = content + + if (this.apps.size > 0) this.$noApps.remove() + } +}) + +// Can't use `uuid` module for some reason as it results in a throw with `crypto` when importing +function generateUuid () { + var result, i, j + result = '' + for (j = 0; j < 32; j++) { + if (j == 8 || j == 12 || j == 16 || j == 20) + result = result + '-' + i = Math.floor(Math.random() * 16).toString(16) + result = result + i + } + return result +} diff --git a/package.json b/package.json index 7e911e7..bb435c0 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,12 @@ } }, "dependencies": { - "redhat-overpass-font": "^1.0.0" + "bare-path": "^2.1.0", + "pear-inspect": "github:holepunchto/pear-inspect#v1.0.1", + "redhat-overpass-font": "^1.0.0", + "ws": "^8.16.0" + }, + "optionalDependencies": { + "bufferutil": "^4.0.8" } } From 6c94ce0c761b0b973a02a5bd5f503dd755481b3f Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Fri, 26 Jan 2024 14:39:12 +0100 Subject: [PATCH 02/14] Use @holepunchto@/inspector --- index.html | 124 ++++++++++++++++++++++++-------------- lib/devtools-inspector.js | 73 +++++++++++++++++----- package.json | 2 +- 3 files changed, 139 insertions(+), 60 deletions(-) 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" }, From ac3be00002392c0be0adb2cfafef59b4b07fb1f0 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Fri, 26 Jan 2024 14:48:06 +0100 Subject: [PATCH 03/14] Correcting rebase --- index.html | 3 +-- lib/devtools-inspector.js | 15 ++++++--------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index f3103b0..c553165 100644 --- a/index.html +++ b/index.html @@ -203,8 +203,7 @@

Inspector

- This acts as a link between chrome://inspect and debugging Pear apps + Use DevTools to debug your Pear apps
    -
  1. Run a pear app with "pear dev . --inspect"
    2. -
  2. The outputted key should be added here
    3. +
  3. npm install pear-inspect in your app
    4. +
  4. + Add this code to your app: +
    + import inspector from 'inspector' + import { Inspector } from 'pear-inspect' + const pearInspector = await new Inspector({ inspector }).enable() + const { publicKey } = await pearInspector.enable() + console.log('Pear Inspector key:', publicKey.toString('hex')) +
    +
    5. +
  5. Running your program and the Pear Inspector key will be logged
    6. +
  6. Paste the logged key here
  7. In Chrome, open chrome://inspect and the app should appear under Targets
- +

-

No apps availble. Add a key above, to start debugging.

+

Apps

+

No apps added. Add a key above, to start debugging.

` @@ -48,20 +91,20 @@ customElements.define('devtools-inspector', class extends HTMLElement { this.noAppsElem = this.root.querySelector('#no-apps') this.apps = new Map() + this.addKeyInputElem.addEventListener('keypress', e => { + this.addKeyErrorElem.textContent = '' + }) + this.addKeyFormElem.addEventListener('submit', e => { e.preventDefault() const publicKey = this.addKeyInputElem.value - if (publicKey.length === 0) { - this.addKeyErrorElem.textContent = '' - return - } if (publicKey.length !== 64) { this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long' return } const sessionId = generateUuid() - const inspectorSession = new Session({ publicKey: Buffer.from(publicKey, 'hex') }) + const inspectorSession = new Session({ publicKey: b4a.from(publicKey, 'hex') }) const app = { publicKey, title: '', @@ -153,17 +196,28 @@ 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.appsElem.innerHTML = content + this.appsElem.replaceChildren(...[...this.apps].map(([sessionId, app]) => { + const div = document.createElement('div') + div.innerHTML = ` +
+
✕
+
${app.title} (${app.url})
+
+ ` + div.querySelector('.remove').addEventListener('click', () => { + this.apps.delete(sessionId) + this.renderApps() + }) + + return div + })) + + if (this.apps.size > 0) { + this.noAppsElem.classList.add('hidden') + } else { + this.noAppsElem.classList.remove('hidden') + } - if (this.apps.size > 0) this.noAppsElem.remove() } load () { diff --git a/package.json b/package.json index 2d1fc9c..6b07294 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ } }, "dependencies": { - "bare-path": "^2.1.0", "@holepunchto/pear-inspect": "^2.0.0", + "bare-path": "^2.1.0", "redhat-overpass-font": "^1.0.0", "ws": "^8.16.0" }, From 6e1a7ef1171f0149a5aca53b263083b77dafcc6a Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Mon, 29 Jan 2024 15:36:00 +0100 Subject: [PATCH 07/14] Fix rebase --- index.html | 33 +++++++++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index c553165..e4f90a4 100644 --- a/index.html +++ b/index.html @@ -187,12 +187,37 @@ margin-top: 4px; } - a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; } - app-router a:visited, app-router a:active, app-router a { + system-status, + docs-viewer, + devtools-inspector { + position: relative; + top: 156px + } + + + a:visited, + a:active, + a { + color: #B0D944; + outline: none; + text-decoration: none; + } + + app-router a:visited, + app-router a:active, + app-router a { color: #B0D944; } - app-router[data-load="system-status"] a[href='/'], app-router[data-load="system-status"] a:active[href='/'], app-router[data-load="system-status"] a:visited[href='/'], - app-router[data-load="docs-viewer"] a[href='/documentation'], app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'] { + + app-router[data-load="system-status"] a[href='/'], + app-router[data-load="system-status"] a:active[href='/'], + app-router[data-load="system-status"] a:visited[href='/'], + app-router[data-load="docs-viewer"] a[href='/documentation'] + app-router[data-load="docs-viewer"] a:active[href='/documentation'] + app-router[data-load="docs-viewer"] a:visited[href='/documentation'], + app-router[data-load="devtools-inspector"] a[href='/devtools-insepctor'], + app-router[data-load="devtools-inspector"] a:active[href='/devtools-inspector'], + app-router[data-load="devtools-inspector"] a:visited[href='/devtools-inspector'] { color: rgb(78, 250, 92); } From f6988154c271469ce377f1e83c87119264bf742a Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Tue, 30 Jan 2024 10:20:07 +0100 Subject: [PATCH 08/14] Use inspectorKey --- lib/devtools-inspector.js | 12 ++++++------ package.json | 3 ++- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/lib/devtools-inspector.js b/lib/devtools-inspector.js index c7d3540..f588f66 100644 --- a/lib/devtools-inspector.js +++ b/lib/devtools-inspector.js @@ -62,8 +62,8 @@ customElements.define('devtools-inspector', class extends HTMLElement { import inspector from 'inspector' import { Inspector } from 'pear-inspect' const pearInspector = await new Inspector({ inspector }).enable() - const { publicKey } = await pearInspector.enable() - console.log('Pear Inspector key:', publicKey.toString('hex')) + const { inspectorKey } = await pearInspector.enable() + console.log('Pear Inspector key:', inspectorKey.toString('hex'))
  • Running your program and the Pear Inspector key will be logged
    • @@ -97,16 +97,16 @@ customElements.define('devtools-inspector', class extends HTMLElement { this.addKeyFormElem.addEventListener('submit', e => { e.preventDefault() - const publicKey = this.addKeyInputElem.value - if (publicKey.length !== 64) { + const inspectorKey = this.addKeyInputElem.value + if (inspectorKey.length !== 64) { this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long' return } const sessionId = generateUuid() - const inspectorSession = new Session({ publicKey: b4a.from(publicKey, 'hex') }) + const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') }) const app = { - publicKey, + inspectorKey, title: '', url: '', inspectorSession diff --git a/package.json b/package.json index 6b07294..c4d4ed0 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ } }, "dependencies": { - "@holepunchto/pear-inspect": "^2.0.0", + "@holepunchto/pear-inspect": "^3.0.0", + "b4a": "^1.6.4", "bare-path": "^2.1.0", "redhat-overpass-font": "^1.0.0", "ws": "^8.16.0" From ab877609f18315091ba7fda1fea912495a7dae79 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Tue, 30 Jan 2024 10:28:57 +0100 Subject: [PATCH 09/14] Use pear-inspect v3.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c4d4ed0..06ab67f 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ } }, "dependencies": { - "@holepunchto/pear-inspect": "^3.0.0", + "@holepunchto/pear-inspect": "^3.0.1", "b4a": "^1.6.4", "bare-path": "^2.1.0", "redhat-overpass-font": "^1.0.0", From d5fc8076061ad3b896315371bfc7ef92f44c69e2 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Tue, 30 Jan 2024 11:09:53 +0100 Subject: [PATCH 10/14] Fix code comment --- lib/devtools-inspector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/devtools-inspector.js b/lib/devtools-inspector.js index f588f66..04af0a7 100644 --- a/lib/devtools-inspector.js +++ b/lib/devtools-inspector.js @@ -62,7 +62,7 @@ customElements.define('devtools-inspector', class extends HTMLElement { import inspector from 'inspector' import { Inspector } from 'pear-inspect' const pearInspector = await new Inspector({ inspector }).enable() - const { inspectorKey } = await pearInspector.enable() + const inspectorKey = await pearInspector.enable() console.log('Pear Inspector key:', inspectorKey.toString('hex')) From 43422c62f7c21d398e8257fada92e7183e7c68b6 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Tue, 30 Jan 2024 15:30:14 +0100 Subject: [PATCH 11/14] Rename to Developer Tooling. Fix landing page bug --- index.html | 22 +++++++++---------- lib/app-router.js | 2 ++ ...ools-inspector.js => developer-tooling.js} | 7 +++++- 3 files changed, 19 insertions(+), 12 deletions(-) rename lib/{devtools-inspector.js => developer-tooling.js} (97%) diff --git a/index.html b/index.html index e4f90a4..ca02f41 100644 --- a/index.html +++ b/index.html @@ -189,7 +189,7 @@ system-status, docs-viewer, - devtools-inspector { + developer-tooling { position: relative; top: 156px } @@ -215,14 +215,14 @@ app-router[data-load="docs-viewer"] a[href='/documentation'] app-router[data-load="docs-viewer"] a:active[href='/documentation'] app-router[data-load="docs-viewer"] a:visited[href='/documentation'], - app-router[data-load="devtools-inspector"] a[href='/devtools-insepctor'], - app-router[data-load="devtools-inspector"] a:active[href='/devtools-inspector'], - app-router[data-load="devtools-inspector"] a:visited[href='/devtools-inspector'] { + app-router[data-load="developer-tooling"] a[href='/developer-tooling'], + app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'], + app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] { color: rgb(78, 250, 92); }
    - + 
               __ \    _ \   _` |   __|
@@ -262,18 +262,18 @@
    -
    +
    -
    +
    -
    -
    +
    +
    - + diff --git a/lib/app-router.js b/lib/app-router.js index 45d631f..d99b7fd 100644 --- a/lib/app-router.js +++ b/lib/app-router.js @@ -49,6 +49,8 @@ customElements.define('app-router', class AppRouter extends HTMLElement { window.addEventListener('load', () => { if (Pear.config.link.indexOf('pear://pulse') === 0) { this.load(Pear.config.link.slice(12)).catch(console.error) + } else { + this.load('/') } }) } diff --git a/lib/devtools-inspector.js b/lib/developer-tooling.js similarity index 97% rename from lib/devtools-inspector.js rename to lib/developer-tooling.js index 04af0a7..dbad931 100644 --- a/lib/devtools-inspector.js +++ b/lib/developer-tooling.js @@ -4,9 +4,12 @@ import { WebSocketServer } from 'ws' import { Session } from '@holepunchto/pear-inspect' import b4a from 'b4a' -customElements.define('devtools-inspector', class extends HTMLElement { +customElements.define('developer-tooling', class extends HTMLElement { + router = null + constructor () { super() + console.log('[developer-tooling] constructor') this.template = document.createElement('template') this.template.innerHTML = `
    @@ -221,10 +224,12 @@ customElements.define('devtools-inspector', class extends HTMLElement { } load () { + console.log('load', this.style) this.style.display = '' } unload () { + console.log('unload', this.style) this.style.display = 'none' } }) From ed6bc7ea81a51f92ed2df83940d4d455788af1e0 Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Tue, 30 Jan 2024 15:31:29 +0100 Subject: [PATCH 12/14] Cleanup --- lib/developer-tooling.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/developer-tooling.js b/lib/developer-tooling.js index dbad931..ccf9ca2 100644 --- a/lib/developer-tooling.js +++ b/lib/developer-tooling.js @@ -9,7 +9,6 @@ customElements.define('developer-tooling', class extends HTMLElement { constructor () { super() - console.log('[developer-tooling] constructor') this.template = document.createElement('template') this.template.innerHTML = `
    @@ -224,12 +223,10 @@ customElements.define('developer-tooling', class extends HTMLElement { } load () { - console.log('load', this.style) this.style.display = '' } unload () { - console.log('unload', this.style) this.style.display = 'none' } }) From 30dda87d512ca55a928e7cb9d098194ab919dd9d Mon Sep 17 00:00:00 2001 From: dmc Date: Tue, 30 Jan 2024 22:15:49 +0100 Subject: [PATCH 13/14] nav fixes --- index.html | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ca02f41..8456993 100644 --- a/index.html +++ b/index.html @@ -54,9 +54,8 @@ nav { height: 146px; float: left; - padding-left: 2em; + padding-left: .75rem; padding-top: 2em; - margin-right: 30rem; } nav>a { @@ -212,8 +211,8 @@ app-router[data-load="system-status"] a[href='/'], app-router[data-load="system-status"] a:active[href='/'], app-router[data-load="system-status"] a:visited[href='/'], - app-router[data-load="docs-viewer"] a[href='/documentation'] - app-router[data-load="docs-viewer"] a:active[href='/documentation'] + app-router[data-load="docs-viewer"] a[href='/documentation'], + app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'], app-router[data-load="developer-tooling"] a[href='/developer-tooling'], app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'], @@ -250,7 +249,7 @@ From a7383cefb916cd6ab72a1ef07b3e6ad200de423b Mon Sep 17 00:00:00 2001 From: dmc Date: Tue, 30 Jan 2024 22:52:33 +0100 Subject: [PATCH 14/14] align voice, routing, display, instructions, rm optional dep --- index.html | 14 ++-- lib/{developer-tooling.js => devtools.js} | 98 +++++++++++++++-------- package.json | 3 - 3 files changed, 72 insertions(+), 43 deletions(-) rename lib/{developer-tooling.js => devtools.js} (72%) diff --git a/index.html b/index.html index 8456993..7bb2393 100644 --- a/index.html +++ b/index.html @@ -214,14 +214,14 @@ app-router[data-load="docs-viewer"] a[href='/documentation'], app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'], - app-router[data-load="developer-tooling"] a[href='/developer-tooling'], - app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'], - app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] { + app-router[data-load="developer-tooling"] a[href='/devtools'], + app-router[data-load="developer-tooling"] a:active[href='/devtools'], + app-router[data-load="developer-tooling"] a:visited[href='/devtools'] { color: rgb(78, 250, 92); }
    - + 
               __ \    _ \   _` |   __|
@@ -270,9 +270,9 @@
    -
    +
    - + diff --git a/lib/developer-tooling.js b/lib/devtools.js similarity index 72% rename from lib/developer-tooling.js rename to lib/devtools.js index ccf9ca2..a935e19 100644 --- a/lib/developer-tooling.js +++ b/lib/devtools.js @@ -25,12 +25,6 @@ customElements.define('developer-tooling', class extends HTMLElement { display: none; } - #code-installation { - white-space: pre-line; - padding-bottom: 1rem; - font-size: 10px; - } - .app { display: flex; align-items: center; @@ -50,37 +44,75 @@ customElements.define('developer-tooling', class extends HTMLElement { width: 1rem; display: none; } + #remote-inspect-explain { + float:left; + max-width:55%; + } + #remote-inspect { + float:right; + max-width:40%; + } + + h2 { margin: 0 } + p { + margin-block-start: 0.75em; + margin-block-end: 0.75em; + } + + input { + all: unset; + border: 1px ridge #B0D944; + background: #000; + color: #B0D944; + padding: .45rem; + font-family: monospace; + font-size: 1rem; + line-height: 1rem; + } + code { + background: #3a4816; + color: #efeaea; + padding: 0.25rem; + padding-top: 0.1rem; + padding-bottom: 0.15rem; + font-family: 'overpass-mono'; + border-radius: 1px; + font-size: .9em; + } + pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 } -

    Inspector

    - Use DevTools to debug your Pear apps -
    -
      -
    1. npm install pear-inspect in your app
      2. -
    2. - Add this code to your app: -
      - import inspector from 'inspector' - import { Inspector } from 'pear-inspect' - const pearInspector = await new Inspector({ inspector }).enable() - const inspectorKey = await pearInspector.enable() - console.log('Pear Inspector key:', inspectorKey.toString('hex')) +

      Developer Tooling

      +
      +

      Remotely inspect Pear applications.

      + +

      Some application setup is required to enable remote debugging

      +

      First install the pear-inspect module into the application

      + 
      npm install pear-inspect
      +

      Then add the following JavaScript code to the application, at the top:

      + + 
      if (Pear.config.dev) {
+  const { Inspector } = await import('pear-inspect')
+  const inpector = await new Inspector()
+  const key = await inpector.enable()
+  console.log('Pear Inspector key:', key.toString('hex'))
+}
      + +

      When the application is opened in development mode the inspection key will be logged.

      +

      Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target

      -
      3. -
    3. Running your program and the Pear Inspector key will be logged
      4. -
    4. Paste the logged key here
      5. -
    5. In Chrome, open chrome://inspect and the app should appear under Targets
      6. -
    -
    -
    - -

    -
    -
    -

    Apps

    -

    No apps added. Add a key above, to start debugging.

    -
    +
    +
    +
    + +

    +
    +
    +

    Apps

    +

    No apps added. Add an inspect key to start debugging.

    +
    +
    ` this.root = this.attachShadow({ mode: 'open' }) diff --git a/package.json b/package.json index 06ab67f..7a53994 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,5 @@ "bare-path": "^2.1.0", "redhat-overpass-font": "^1.0.0", "ws": "^8.16.0" - }, - "optionalDependencies": { - "bufferutil": "^4.0.8" } }