🐛 Logging & Debugging

Built-in logging system with categorized debug output for development and troubleshooting

Overview: Built-in Logging System

Professional debugging with loglevel

The date picker includes a comprehensive logging system powered by loglevel library. Logs are categorized, timestamped, and easy to filter for troubleshooting.

⚠️ Development Only
Debug logging is for development only. Never ship with show-debug-info enabled in production!

Log Categories

The logging system organizes output into 8 categories:

Category	Badge	What It Logs
`INIT`	INIT	Component initialization, option parsing, setup
`NAVIGATION`	NAVIGATION	Month navigation, keyboard navigation
`UI`	UI	Show/hide calendar, positioning, visibility changes
`RENDERING`	RENDERING	Calendar rendering, day cell updates, DOM operations
`SELECTION`	SELECTION	Date selection, range selection, value changes
`VALIDATION`	VALIDATION	Date validation, disabled date handling, range validation
`DRAG`	DRAG	Drag-to-adjust functionality, drag previews
`INTERACTION`	INTERACTION	User interactions, clicks, hover events

Example 1: Basic Logging

show_debug_info={true}

Enable debug logging with the show-debug-info attribute:

<date-range-picker
  selection-mode="single"
  show-debug-info>
</date-range-picker>

Try it - Open console (F12) and interact:

✅ Open your browser console (F12) and click the input to see initialization and UI logs

Expected console output:

[14:23:15.420] [DEBUG] [INIT] Week starts on day: 1 [14:23:15.425] [DEBUG] [INIT] Creating calendar [14:23:15.428] [DEBUG] [RENDERING] renderCalendar() called [14:23:15.430] [DEBUG] [UI] show() - adding visible class [14:23:15.432] [DEBUG] [UI] Positioning calendar [14:23:15.435] [DEBUG] [RENDERING] Rendering month 0: November 2025

Example 2: Range Selection with Validation Logs

See validation logs when selecting date ranges with disabled dates:

Range picker with disabled weekends:

💡 Try selecting a range that crosses weekends. Watch the console for VALIDATION logs showing how the component adjusts the range.

Expected validation logs:

[14:23:45.122] [DEBUG] [VALIDATION] validateRangeAsync called - mode: block [14:23:45.125] [DEBUG] [VALIDATION] BLOCK mode - adjusted end: Fri Jan 05 2025 [14:23:45.128] [DEBUG] [SELECTION] Range selected: 2025-01-02 to 2025-01-05 [14:23:45.130] [DEBUG] [VALIDATION] Validating 4 enabled dates

Example 3: Navigation & Rendering Logs

Track calendar navigation and rendering:

Multi-month picker:

💡 Click the navigation arrows to switch months. Watch for NAVIGATION and RENDERING logs.

Expected navigation logs:

[14:24:10.250] [DEBUG] [NAVIGATION] Next month clicked for index 0 [14:24:10.253] [DEBUG] [NAVIGATION] New month: December 2025 [14:24:10.255] [DEBUG] [RENDERING] renderCalendar() called [14:24:10.258] [DEBUG] [RENDERING] Rendering month 0: December 2025 [14:24:10.260] [DEBUG] [RENDERING] Rendering month 1: January 2026 [14:24:10.262] [DEBUG] [RENDERING] Rendering month 2: February 2026

Example 4: Drag-to-Adjust Logs

Track drag interactions in range mode:

Range picker with drag support:

💡 Select a range, then drag the start or end dates. Watch for DRAG logs showing drag start, preview, and end.

Expected drag logs:

[14:25:30.100] [DEBUG] [DRAG] Drag started - type: start [14:25:30.450] [DEBUG] [DRAG] Dragging over: 2025-11-08 [14:25:30.455] [DEBUG] [DRAG] Preview range: 2025-11-08 to 2025-11-20 [14:25:30.800] [DEBUG] [DRAG] Drag ended [14:25:30.803] [DEBUG] [SELECTION] Range updated via drag: 2025-11-08 to 2025-11-20

Filtering Console Logs

Use browser console filters to focus on specific categories:

Filter by Category

// In browser console filter box:
[INIT]          // Only initialization logs
[VALIDATION]    // Only validation logs
[SELECTION]     // Only selection logs
[DRAG]          // Only drag logs

Filter by Function

// Filter by function name:
renderCalendar  // Only calendar rendering
validateRange   // Only range validation
selectDate      // Only date selection

Programmatic Control

// Access the picker instance
const picker = document.querySelector('web-daterangepicker').picker;

// Enable/disable specific categories
picker.logger.setLevel('debug');  // Show all
picker.logger.setLevel('error');  // Errors only
picker.logger.setLevel('silent'); // Disable all

Log Message Format

Each log message includes:

[HH:MM:SS.mmm] [LEVEL] [CATEGORY] Message with context

Example:
[14:23:15.420] [DEBUG] [INIT] Week starts on day: 1
    │            │        │       │
    │            │        │       └─ Message with details
    │            │        └───────── Category (INIT, UI, etc.)
    │            └────────────────── Log level (DEBUG, ERROR, etc.)
    └─────────────────────────────── Timestamp (millisecond precision)

Best Practices

Development: Enable show-debug-info when troubleshooting
Production: Always remove show-debug-info attribute
Performance: Logs are minimal overhead when disabled
Filtering: Use console filters to reduce noise
Categories: Focus on specific categories for targeted debugging
Timestamps: Use millisecond precision to measure performance

Complete Example

<!-- HTML with debug enabled -->
<web-daterangepicker
  selection-mode="range"
  visible-months-count="2"
  disabled-weekdays="0,6"
  disabled-dates-handling="block"
  show-debug-info>
</web-daterangepicker>

<script>
  const picker = document.querySelector('web-daterangepicker');
  picker.addEventListener('date-select', (e) => console.log('Date selected event:', e.detail));

  // Disable logging after 30 seconds
  setTimeout(() => {
    if (picker.picker) picker.picker.logger.setLevel('silent');
  }, 30000);
</script>

🔌 Server round-trip

The LiveView server saw 0 event(s) from the wrapper.

(pick a date anywhere on this page)