Able to change port

lib/devtools.js

@@ -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="button copy">Copy URL</div>
-          <div class="open-in-chrome">Open in Chrome</div>
+          <div class="button open-in-chrome">Open in Chrome</div>
-          <div class="remove">✕</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.devtoolsHttpServer.listen(this.port, () => {
-      this.port = devtoolsHttpServer.address().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)