XDN Devtools
In-browser devtools for the Moovweb XDN
Installation
Libraries
You need both @xdn/devtools and @xdn/prefetch installed in your project
npm install --save @xdn/devtools @xdn/prefetch
Service worker
You need to enable @xdn/prefetch in your service worker.
Check our prefetching guide, or @xdn/prefetch README for more information
Client widget
Note: you can skip this step if you are using @xdn/next or @xdn/nuxt
Then load the widget in the Browser's javascript
import installDevtools from '@xdn/devtools/install'
installDevtools()Alternatively you can also inject the widget install script directly in your HTML <head>
<script defer src="/__xdn__/devtools/install.js"></script>Enabling or disabling the devtools
By default, the devtools is enabled when your app is served from localhost, 127.0.0.1 or any *.moovweb-edge.io domain.
But that can be customized:
Per environment
In XDN console environment, set the PREVIEW_XDN_DEVTOOLS_ENABLED to true or false to explicitly enable or disable the devtools on the given environment, no matter what domain it runs on.
Per user
Point your browser to /__xdn__/devtools/enable or /__xdn__/devtools/disable to explicitly enable/disable the devtools on your browser. This takes precedence over the environment config and the domain default.
If the devtools was previously enabled and you disable it, you may want to remove the service worker to get rid of the devtools-specific route handlers that were installed on-demand when enabling it. This can be done using the Application tab in Chrome Developer Tools.