Change devtools url (#12)

* Change devtools url * Remove comment
holepunchto · May 6, 2024 · 6f07b9b · 6f07b9b
1 parent a5f5b2e
commit 6f07b9b
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/lib/devtools.js b/lib/devtools.js
@@ -172,7 +172,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
               <div id="server-message" class="hidden">
                 Pear DevTools connection running on
                 <div>
-                  <span id="server-location">localhost</span>
+                  <span id="server-location">http://localhost</span>
                   <span id="change-port-show" class="button">
                     Change port
                   </span>
@@ -187,6 +187,9 @@ customElements.define('developer-tooling', class extends HTMLElement {
                       />
                     </form>
                     <p id="change-port-error"></p>
+                    <p>
+                      This port needs to be added to Chrome. Go to chrome://inspect, then click on Configure and add <span id="host-location">localhost</span>.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -259,7 +262,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
         navigator.clipboard.writeText(`devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`)
       })
       div.querySelector('.open-in-chrome').addEventListener('click', () => {
-        openChrome(`devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:${this.port}/${sessionId}`)
+        openChrome('chrome://inspect')
       })
       div.querySelector('.remove').addEventListener('click', () => {
         this.apps.delete(sessionId)
@@ -276,8 +279,9 @@ customElements.define('developer-tooling', class extends HTMLElement {
     }
 
     if (this.port) {
-      this.root.querySelector('#server-location').textContent = `http://localhost:${this.port}`
       this.root.querySelector('#server-message').classList.remove('hidden')
+      this.root.querySelector('#server-location').textContent = `http://localhost:${this.port}`
+      this.root.querySelector('#host-location').textContent = `localhost:${this.port}`
     }
   }