🐛 Frontend-debug

Debug tool for front-end dev

Installation

NPM Package

Install NPM package

npm i @viivue/frontend-debug

Import

import "@viivue/frontend-debug";

CDN

Inject this script tag at the end of your page, right above </body>

<script src="https://fdebug.netlify.app/script.js"></script>

Or you can download the file and serve it the way you want.

Usage

Show debug dialog

Add ?debug to site URL

https://fdebug.netlify.app/?debug

Once enabled, the debug dialog will remain showing as long as you still stay in the same tab.

Hide debug dialog

Add ?nodebug to site URL

https://fdebug.netlify.app/?nodebug

Or just close the current tab.

How does this work?

• The script will generate some HTML for the debug UI.
• Calculate values using requestAnimationFrame.
• Show/hide debug UI with JavaScript session storage.

Deployment

# Run dev server
npm run dev

# Release (update package.json carefully first)
npm run publish

# Build production site (for Netlify)
npm run publish