devtools page with BEX ? #18005

Dylan190774 · 2025-05-13T10:18:51Z

Dylan190774
May 13, 2025

I setup Quasar with BEX. I can build it and install it in the Chrome Extensions. But now I want to create a devtools-tab. The Quasar documentation on how to do this is very scarce. I added a devtools folder in src-bex with a Devtools.vue and a panel.ts. It can't seem to create something like a devtools.html .

Google Gemini told me to add this to the bex: section in quasar.config :

      pages: {
        devtools: {
          entry: './src-bex/devtools/panel.ts', // Let op de .ts extensie
          component: './src-bex/devtools/Devtools.vue',
          htmlFilename: 'devtools.html', // Blijft hetzelfde
          chunkFilename: 'js/devtools',
        },
        // ... andere pagina's (popup, options)
      },

devtools/panel.ts looks like this:

chrome.devtools.panels.create(
  'Mijn Quasar Panel', // De titel die in de DevTools sidebar verschijnt
  'icon.png', // Optioneel: een icoon voor je panel (pad relatief t.o.v. de build output of manifest.json)
  'devtools.html', // Het HTML-bestand dat Quasar genereert en je Vue component host
);

I even tried adding devtoools.html manually after the build process, to see if it works, but nothing helps.

Has anyone ever made a devtools-page in BEX with Quasar successfully ?

Dylan190774 · 2025-05-13T22:30:42Z

Dylan190774
May 13, 2025
Author

Found it myself . You need a separate devtools_loader.html with a devtools_loader.js that creates the panel pointing to a devtools page that is defined in src and routes:

My devtools_loader.html is a simple html that loads the script:

<!doctype html>
<html>
  <head>
    <title>Devtools Loader</title>
  </head>
  <body>
    <script src="devtools_loader.js"></script>
  </body>
</html>

and in devtools_loader.js you put:

chrome.devtools.panels.create('My Devtools Page', null, 'www/index.html#/devtools', function (panel) {
  console.log('Devtools page created');
});

I put both of these in public, so they get copied to the www folder in the build.

In src-bex/manifest.json you have to make sure that the devtools_page points to the loader :

"all": {

"devtools_page": "www/devtools_loader.html",

}

No idea if it's the best way to do it, but this works to get a devtools page.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

devtools page with BEX ? #18005

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

devtools page with BEX ? #18005

Uh oh!

Dylan190774 May 13, 2025

Replies: 1 comment

Uh oh!

Uh oh!

Dylan190774 May 13, 2025 Author

Dylan190774
May 13, 2025

Dylan190774
May 13, 2025
Author