DebugFlow JavaScript Driver

JavaScript/Node.js driver for DebugFlow debugging tool.

Installation

npm install debugflow-js

Usage

Node.js

import debugFlow from 'debugflow-js';

debugFlow.log('Hello from Node.js!');
debugFlow.dump(userData);

debugFlow.log('API Response')
  .green()
  .label('Success')
  .tag('api');

Browser (ES Module)

import debugFlow from 'debugflow-js';

debugFlow.log('Page loaded!').green();

document.querySelector('#button').addEventListener('click', () => {
  debugFlow.log('Button clicked').orange();
});

Browser (UMD/CDN)

<script src="node_modules/debugflow-js/dist/index.umd.js"></script>
<script>
  window.debugFlow.log('Hello!').green();
  window.df('Quick debug');
</script>

jQuery Integration

import debugFlow, { installJQueryPlugin } from 'debugflow-js';

installJQueryPlugin(debugFlow);

$('#myButton').debugFlow('Button rendered');
$('#myDiv').df('Div created').purple();

Or in browser:

<script src="jquery.js"></script>
<script src="debugflow-js/dist/index.umd.js"></script>
<script>
  $('#button').debugFlow('Button clicked');
</script>

Configuration

import { DebugFlowClient } from 'debugflow-js';

const debugFlow = new DebugFlowClient({
  enabled: true,
  host: 'localhost',
  port: 23518,
  timeout: 1000,
  logFailures: false
});

Available Methods

• log(content) - Log message
• dump(content) - Dump variable
• exception(error) - Log exception
• measure(name, callback) - Measure performance
• http(request, response) - Log HTTP
• event(name, payload) - Log event

Chainable Methods

debugFlow
  .log('Important message')
  .red()
  .label('Critical')
  .large()
  .tag('security', 'urgent');

Colors

• red()
• orange()
• yellow()
• green()
• blue()
• purple()
• gray()
• pink()

Sizes

• large()
• small()

Examples

Measure Performance

const result = await debugFlow.measure('api-call', async () => {
  return await fetch('/api/users');
});

Exception Tracking

try {
  // code
} catch (error) {
  debugFlow.exception(error).red();
  throw error;
}

Complex Data

debugFlow.dump({
  user: { id: 1, name: 'John' },
  settings: new Map([['theme', 'dark']]),
  timestamp: new Date()
}).purple().label('User State');

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Node.js 14+

Requirements

• uuid package (auto-installed)