aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 22:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Able to change port

Browse Source
This commit is contained in:
Tobias Baunbaek
2024-02-01 14:50:01 +01:00
parent 3e2344fddc
commit bb706e06dd
1 changed files with 50 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/devtools.js
View File

@@ -7,6 +7,7 @@ import { spawn } from 'child_process'
customElements.define('developer-tooling', class extends HTMLElement {
router = null
port = 9229
constructor () {
super()
@@ -18,11 +19,12 @@ customElements.define('developer-tooling', class extends HTMLElement {
width: 100%;
}
#add-key-error {
#add-key-error,
#change-port-error {
color: red;
}
#no-apps.hidden {
.hidden {
display: none;
}
@@ -50,6 +52,9 @@ customElements.define('developer-tooling', class extends HTMLElement {
.app .copy,
.app .open-in-chrome,
.app .remove {
display: none;
}
.button {
cursor: pointer;
background: #3a4816;
color: #efeaea;
@@ -57,7 +62,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
font-family: 'overpass-mono';
border-radius: 1px;
white-space: nowrap;
display: none;
}
#remote-inspect-explain {
float:left;
@@ -71,9 +75,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
font-size: 0.8rem;
margin-top: 30px;
}
#server-message.hidden {
display: none;
}
h2 { margin: 0 }
p {
@@ -144,7 +145,19 @@ customElements.define('developer-tooling', class extends HTMLElement {
<h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
<div id="apps"></div>
<div id="server-message" class="hidden">
Pear DevTools connection running on <span id="server-location">localhost</span>
Pear DevTools connection running on
<div>
<span id="server-location">localhost</span>
<span id="change-port-show" class="button">
Change port
</span>
<div>
<form id="change-port-form" class="hidden">
<input id="change-port-input" type="number" placeholder="New port" />
</form>
<p id="change-port-error"></p>
</div>
</div>
</div>
</div>
</div>
@@ -157,20 +170,37 @@ customElements.define('developer-tooling', class extends HTMLElement {
this.addKeyFormElem = this.root.querySelector('#add-key-form')
this.addKeyInputElem = this.root.querySelector('#add-key-input')
this.addKeyErrorElem = this.root.querySelector('#add-key-error')
this.changePortFormElem = this.root.querySelector('#change-port-form')
this.changePortInputElem = this.root.querySelector('#change-port-input')
this.changePortErrorElem = this.root.querySelector('#change-port-error')
this.changePortShowElem = this.root.querySelector('#change-port-show')
this.appsElem = this.root.querySelector('#apps')
this.noAppsElem = this.root.querySelector('#no-apps')
this.changePortElem = this.root.querySelector('#change-port')
this.apps = new Map()
this.addKeyInputElem.addEventListener('keypress', e => {
this.addKeyErrorElem.textContent = ''
})
this.addKeyFormElem.addEventListener('submit', e => {
e.preventDefault()
const inspectorKey = this.addKeyInputElem.value
this.addApp(inspectorKey)
})
this.changePortInputElem.addEventListener('keypress', () => {
this.changePortErrorElem.textContent = ''
})
this.changePortShowElem.addEventListener('click', () => {
this.changePortFormElem.classList.remove('hidden')
})
this.changePortFormElem.addEventListener('submit', e => {
e.preventDefault()
this.port = Number(this.changePortInputElem.value)
this.initServer()
})
const shouldLoadApp = Pear.config.linkData?.startsWith('devtools/')
if (shouldLoadApp) {
this.addApp(Pear.config.linkData)
@@ -185,9 +215,9 @@ customElements.define('developer-tooling', class extends HTMLElement {
div.innerHTML = `
<div class="app">
<div class="title">${app.title} (${app.url})</div>
<div class="copy">Copy URL</div>
<div class="open-in-chrome">Open in Chrome</div>
<div class="remove">✕</div>
<div class="button copy">Copy URL</div>
<div class="button open-in-chrome">Open in Chrome</div>
<div class="button remove">✕</div>
</div>
`
div.querySelector('.copy').addEventListener('click', () => {
@@ -211,7 +241,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
}
if (this.port) {
this.root.querySelector('#server-location').textContent = `localhost:${this.port}`
this.root.querySelector('#server-location').textContent = `http://localhost:${this.port}`
this.root.querySelector('#server-message').classList.remove('hidden')
}
}
@@ -251,15 +281,18 @@ customElements.define('developer-tooling', class extends HTMLElement {
}
initServer () {
const devtoolsHttpServer = http.createServer()
this.devtoolsHttpServer?.close()
this.devtoolsHttpServer = http.createServer()
const devToolsWsServer = new WebSocketServer({ noServer: true })
devtoolsHttpServer.listen(0, () => {
this.port = devtoolsHttpServer.address().port
this.devtoolsHttpServer.listen(this.port, () => {
console.log(`[devtoolsHttpServer] running on port ${this.port}`)
this.render()
this.changePortFormElem.classList.add('hidden')
})
devtoolsHttpServer.on('request', (req, res) => {
this.devtoolsHttpServer.on('error', err => this.changePortErrorElem.textContent = err?.message)
this.devtoolsHttpServer.on('request', (req, res) => {
if (req.url !== '/json/list') {
res.writeHead(404)
res.end()
@@ -285,7 +318,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
})
res.end(JSON.stringify(targets))
})
devtoolsHttpServer.on('upgrade', (request, socket, head) => {
this.devtoolsHttpServer.on('upgrade', (request, socket, head) => {
console.log(`[devtoolsHttpServer] UPGRADE. url=${request.url}`)
const sessionId = request.url.substr(1)
const sessionIdExists = this.apps.has(sessionId)