xdevtool

v1.0.0

Published

5 months ago

XDevTool is a lightweight JavaScript library for mobile debugging that provides an in-browser console overlay, allowing developers to debug their applications directly on mobile devices.

0High
0Medium
0Low

cabdi_waaxid

xdev xdevtool mobile mobile_debugging

XDevTool - Mobile Debugging Library

XDevTool is a lightweight JavaScript library for mobile debugging that provides an in-browser console overlay, allowing developers to debug their applications directly on mobile devices.

Features

🖥️ In-browser Console Overlay - Access browser console directly on mobile devices
🎨 Theme Support - Light and dark themes
📍 Customizable Position - Multiple positioning options for the debug button
🔧 Console Method Override - Captures log, error, warn, info, debug, and table
⚡ Real-time Execution - Execute JavaScript commands in current context
🧮 Persistent Memory - Maintains variables and functions between commands
🐛 Error Capture - Automatically captures global errors and unhandled promise rejections
📱 Mobile Optimized - Responsive design optimized for mobile devices

Installation

Include the script in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/xdev.js"></script>

Quick Start

// Initialize with default options
xdev.init();

// Or initialize with custom options
xdev.init({
  theme: 'dark', // 'light' or 'dark'
  position: 'bottomRight' // Position of the debug button
});

Configuration Options

Theme

'light' (default) - Light theme
'dark' - Dark theme

Position

Available positions for the debug button:

'topLeft' - Top left corner
'topLeftCenter' (default) - Left side, vertically centered
'topRight' - Top right corner
'topRightCenter' - Right side, vertically centered
'bottomLeft' - Bottom left corner
'bottomRight' - Bottom right corner

Usage

Basic Console Usage

The library automatically captures all standard console methods:

console.log('This will appear in XDev console');
console.error('Error messages');
console.warn('Warning messages');
console.table([{name: 'John', age: 30}]);

Interactive Console

Click the floating debug button to open the console overlay where you can:

View captured logs - All console output appears here
Execute JavaScript - Type commands in the input field
Persistent context - Variables and functions persist between commands

Console Commands

In the console input, you can:

// Define variables
let myVar = "Hello World";
const PI = 3.14159;

// Create functions
function greet(name) { return `Hello ${name}`; }

// Execute any JavaScript
document.title = "New Title";
localStorage.setItem('key', 'value');

// Built-in commands
clear        // Clear console output
clearMemory  // Clear all variables and functions from memory

API Reference

Initialization

xdev.init(options) - Initialize the library with options

Console Methods

All standard console methods are automatically captured:

console.log()
console.error()
console.warn()
console.info()
console.debug()
console.table()

Utility Methods

xdev.toggleOverlay() - Show/hide the console overlay
xdev.toggleTheme() - Switch between light and dark themes
xdev.clearConsole() - Clear all console messages
xdev.clearMemory() - Clear execution context (variables/functions)

Error Handling

XDevTool automatically captures:

Global JavaScript errors
Unhandled promise rejections
Console errors and warnings

Error count is displayed as a badge on the debug button.

Example

<!DOCTYPE html>
<html>
<head>
    <title>XDevTool Example</title>
</head>
<body>
    <h1>My App</h1>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/xdev.js"></script>
    <script>
        // Initialize XDev
        xdev.init({
            theme: 'dark',
            position: 'bottomRight'
        });
        
        // Test some console methods
        console.log('App started successfully');
        console.table([{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]);
        
        // Simulate an error
        setTimeout(() => {
            try {
                undefinedFunction();
            } catch (e) {
                console.error('Caught error:', e);
            }
        }, 1000);
    </script>
</body>
</html>

License

MIT License - feel free to use in personal and commercial projects.

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

Note: This library is designed for development and debugging purposes. It's recommended to remove or disable it in production environments.