Display port

lib/devtools.js

@@ -67,6 +67,13 @@ customElements.define('developer-tooling', class extends HTMLElement {
             float:right;
             max-width:40%;
           }
+          #server-message {
+            font-size: 0.8rem;
+            margin-top: 30px;
+          }
+          #server-message.hidden {
+            display: none;
+          }
 
           h2 { margin: 0 }
           p {
@@ -136,6 +143,9 @@ customElements.define('developer-tooling', class extends HTMLElement {
               <h2>Apps</h2>
               <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>
+              </div>
             </div>
           </div>
         </div>
@@ -199,6 +209,11 @@ customElements.define('developer-tooling', class extends HTMLElement {
     } else {
       this.noAppsElem.classList.remove('hidden')
     }
+
+    if (this.port) {
+      this.root.querySelector('#server-location').textContent = `location:${this.port}`
+      this.root.querySelector('#server-message').classList.remove('hidden')
+    }
   }
 
   addApp (inspectorKey) {
@@ -242,6 +257,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
     devtoolsHttpServer.listen(0, () => {
       this.port = devtoolsHttpServer.address().port
       console.log(`[devtoolsHttpServer] running on port ${this.port}`)
+      this.render()
     })
     devtoolsHttpServer.on('request', (req, res) => {
       if (req.url !== '/json/list') {