fix: Clean up excessive debug logging in JavaScript console
- Add conditional verbose logging controlled by ?verbose URL param or localStorage - Reduce frequent WebSocket message logging to verbose mode only - Minimize aircraft position update logging to prevent console spam - Make 3D radar initialization logging conditional on verbose flag - Reduce WebSocket message counter frequency from every 10 to every 500 messages - Preserve important error messages and connection status logging Users can enable verbose logging with: - URL parameter: http://localhost:8080?verbose - localStorage: localStorage.setItem('skyview-verbose', 'true') 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
7d54aa4fae
commit
2ba2192044
3 changed files with 90 additions and 38 deletions
|
|
@ -28,6 +28,14 @@ class SkyView {
|
|||
this.selectedAircraft = null;
|
||||
this.selectedTrailEnabled = false;
|
||||
|
||||
// Debug/verbose logging control
|
||||
// Enable verbose logging with: ?verbose in URL or localStorage.setItem('skyview-verbose', 'true')
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.verbose = urlParams.has('verbose') || localStorage.getItem('skyview-verbose') === 'true';
|
||||
|
||||
// Set global verbose flag for other modules
|
||||
window.skyviewVerbose = this.verbose;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +236,10 @@ class SkyView {
|
|||
|
||||
handleWebSocketMessage(message) {
|
||||
const aircraftCount = Object.keys(message.data.aircraft || {}).length;
|
||||
console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`);
|
||||
// Only log WebSocket messages in verbose mode
|
||||
if (this.verbose) {
|
||||
console.debug(`WebSocket message: ${message.type}, ${aircraftCount} aircraft, timestamp: ${message.timestamp}`);
|
||||
}
|
||||
|
||||
switch (message.type) {
|
||||
case 'initial_data':
|
||||
|
|
@ -247,7 +258,10 @@ class SkyView {
|
|||
|
||||
updateData(data) {
|
||||
// Update all managers with new data - ORDER MATTERS
|
||||
console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`);
|
||||
// Only log data updates in verbose mode
|
||||
if (this.verbose) {
|
||||
console.debug(`Updating data: ${Object.keys(data.aircraft || {}).length} aircraft`);
|
||||
}
|
||||
|
||||
this.uiManager.updateData(data);
|
||||
this.aircraftManager.updateAircraftData(data);
|
||||
|
|
@ -277,7 +291,10 @@ class SkyView {
|
|||
this.update3DRadar();
|
||||
}
|
||||
|
||||
console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`);
|
||||
// Only log completion messages in verbose mode
|
||||
if (this.verbose) {
|
||||
console.debug(`Data update complete: ${this.aircraftManager.aircraftMarkers.size} markers displayed`);
|
||||
}
|
||||
}
|
||||
|
||||
// View switching
|
||||
|
|
@ -377,7 +394,9 @@ class SkyView {
|
|||
|
||||
// 3D Radar (basic implementation)
|
||||
initialize3DRadar() {
|
||||
console.log('🚀 Starting 3D radar initialization');
|
||||
if (this.verbose) {
|
||||
console.log('🚀 Starting 3D radar initialization');
|
||||
}
|
||||
|
||||
try {
|
||||
const container = document.getElementById('radar3d-container');
|
||||
|
|
@ -386,23 +405,28 @@ class SkyView {
|
|||
return;
|
||||
}
|
||||
|
||||
console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight);
|
||||
if (this.verbose) {
|
||||
console.log('✅ Container found:', container, 'Size:', container.clientWidth, 'x', container.clientHeight);
|
||||
|
||||
// Check if container is visible
|
||||
const containerStyles = window.getComputedStyle(container);
|
||||
console.log('📋 Container styles:', {
|
||||
display: containerStyles.display,
|
||||
visibility: containerStyles.visibility,
|
||||
width: containerStyles.width,
|
||||
height: containerStyles.height
|
||||
});
|
||||
// Check if container is visible
|
||||
const containerStyles = window.getComputedStyle(container);
|
||||
console.log('📋 Container styles:', {
|
||||
display: containerStyles.display,
|
||||
visibility: containerStyles.visibility,
|
||||
width: containerStyles.width,
|
||||
height: containerStyles.height
|
||||
});
|
||||
}
|
||||
|
||||
// Check if Three.js is available
|
||||
if (typeof THREE === 'undefined') {
|
||||
console.error('❌ Three.js is not available');
|
||||
return;
|
||||
}
|
||||
console.log('✅ Three.js available, version:', THREE.REVISION);
|
||||
|
||||
if (this.verbose) {
|
||||
console.log('✅ Three.js available, version:', THREE.REVISION);
|
||||
}
|
||||
|
||||
// Quick WebGL test
|
||||
const testCanvas = document.createElement('canvas');
|
||||
|
|
@ -412,7 +436,10 @@ class SkyView {
|
|||
container.innerHTML = '<div style="color: red; padding: 20px; text-align: center;">WebGL not supported. Please use a modern browser that supports WebGL.</div>';
|
||||
return;
|
||||
}
|
||||
console.log('✅ WebGL is supported');
|
||||
|
||||
if (this.verbose) {
|
||||
console.log('✅ WebGL is supported');
|
||||
}
|
||||
|
||||
// Check container dimensions first
|
||||
if (container.clientWidth === 0 || container.clientHeight === 0) {
|
||||
|
|
@ -420,7 +447,9 @@ class SkyView {
|
|||
// Force minimum size for initialization
|
||||
const width = Math.max(container.clientWidth, 800);
|
||||
const height = Math.max(container.clientHeight, 600);
|
||||
console.log('📐 Using forced dimensions:', width, 'x', height);
|
||||
if (this.verbose) {
|
||||
console.log('📐 Using forced dimensions:', width, 'x', height);
|
||||
}
|
||||
|
||||
// Create scene with forced dimensions
|
||||
this.radar3d = {
|
||||
|
|
@ -447,11 +476,13 @@ class SkyView {
|
|||
this.radar3d.renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
}
|
||||
|
||||
console.log('✅ Three.js objects created:', {
|
||||
scene: this.radar3d.scene,
|
||||
camera: this.radar3d.camera,
|
||||
renderer: this.radar3d.renderer
|
||||
});
|
||||
if (this.verbose) {
|
||||
console.log('✅ Three.js objects created:', {
|
||||
scene: this.radar3d.scene,
|
||||
camera: this.radar3d.camera,
|
||||
renderer: this.radar3d.renderer
|
||||
});
|
||||
}
|
||||
|
||||
// Check WebGL context
|
||||
const rendererGL = this.radar3d.renderer.getContext();
|
||||
|
|
@ -459,11 +490,17 @@ class SkyView {
|
|||
console.error('❌ Failed to get WebGL context');
|
||||
return;
|
||||
}
|
||||
console.log('✅ WebGL context created');
|
||||
|
||||
if (this.verbose) {
|
||||
console.log('✅ WebGL context created');
|
||||
}
|
||||
|
||||
this.radar3d.renderer.setClearColor(0x0a0a0a, 0.9);
|
||||
container.appendChild(this.radar3d.renderer.domElement);
|
||||
console.log('✅ Renderer added to container');
|
||||
|
||||
if (this.verbose) {
|
||||
console.log('✅ Renderer added to container');
|
||||
}
|
||||
|
||||
// Add lighting - ensure the scene is visible
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // Increased intensity
|
||||
|
|
@ -483,7 +520,9 @@ class SkyView {
|
|||
this.radar3d.camera.lookAt(0, 0, 0);
|
||||
|
||||
// Add controls
|
||||
console.log('🎮 Adding OrbitControls...');
|
||||
if (this.verbose) {
|
||||
console.log('🎮 Adding OrbitControls...');
|
||||
}
|
||||
if (typeof OrbitControls === 'undefined') {
|
||||
console.error('❌ OrbitControls not available');
|
||||
return;
|
||||
|
|
@ -492,7 +531,10 @@ class SkyView {
|
|||
this.radar3d.controls = new OrbitControls(this.radar3d.camera, this.radar3d.renderer.domElement);
|
||||
this.radar3d.controls.enableDamping = true;
|
||||
this.radar3d.controls.dampingFactor = 0.05;
|
||||
console.log('✅ OrbitControls added');
|
||||
|
||||
if (this.verbose) {
|
||||
console.log('✅ OrbitControls added');
|
||||
}
|
||||
|
||||
// Store default camera position for reset functionality
|
||||
this.radar3d.defaultPosition = { x: 0, y: 50, z: 50 };
|
||||
|
|
@ -530,11 +572,13 @@ class SkyView {
|
|||
cube.position.set(10, 1, 10);
|
||||
this.radar3d.scene.add(cube);
|
||||
|
||||
console.log('3D Radar initialized successfully', {
|
||||
scene: this.radar3d.scene,
|
||||
camera: this.radar3d.camera,
|
||||
renderer: this.radar3d.renderer
|
||||
});
|
||||
if (this.verbose) {
|
||||
console.log('3D Radar initialized successfully', {
|
||||
scene: this.radar3d.scene,
|
||||
camera: this.radar3d.camera,
|
||||
renderer: this.radar3d.renderer
|
||||
});
|
||||
}
|
||||
|
||||
// Start render loop
|
||||
this.render3DRadar();
|
||||
|
|
@ -697,7 +741,9 @@ class SkyView {
|
|||
if (response.ok) {
|
||||
const origin = await response.json();
|
||||
this.radar3d.origin = origin;
|
||||
console.log('3D Radar origin set to:', origin);
|
||||
if (this.verbose) {
|
||||
console.log('3D Radar origin set to:', origin);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to fetch origin, using fallback:', error);
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ export class AircraftManager {
|
|||
this.aircraftData.set(icao, aircraft);
|
||||
}
|
||||
|
||||
// Debug logging for track propagation issues
|
||||
if (newCount > 0 || positionChanges > 0) {
|
||||
// Debug logging for track propagation issues (only if significant changes)
|
||||
if (newCount > 0 || (positionChanges > 5 && window.skyviewVerbose)) {
|
||||
console.debug(`Aircraft update: ${newCount} new, ${updatedCount} updated, ${positionChanges} position changes`);
|
||||
}
|
||||
}
|
||||
|
|
@ -167,7 +167,10 @@ export class AircraftManager {
|
|||
// If no coordinates, we still want to process for other updates (trails, etc.)
|
||||
}
|
||||
|
||||
console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`);
|
||||
// Only log marker updates in verbose mode
|
||||
if (window.skyviewVerbose) {
|
||||
console.debug(`Markers update complete: ${this.aircraftMarkers.size} active markers, ${this.aircraftData.size} aircraft`);
|
||||
}
|
||||
}
|
||||
|
||||
updateAircraftMarker(icao, aircraft) {
|
||||
|
|
@ -196,7 +199,10 @@ export class AircraftManager {
|
|||
|
||||
if (positionChanged) {
|
||||
// Debug significant position updates
|
||||
console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`);
|
||||
// Only log individual position changes in verbose mode
|
||||
if (window.skyviewVerbose) {
|
||||
console.debug(`Position change for ${icao}: [${pos[0].toFixed(4)}, ${pos[1].toFixed(4)}] (was [${oldPos.lat.toFixed(4)}, ${oldPos.lng.toFixed(4)}])`);
|
||||
}
|
||||
}
|
||||
|
||||
// Check if icon needs to be updated (track rotation, aircraft type, or ground status changes)
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ export class WebSocketManager {
|
|||
this.lastMessageTime = Date.now();
|
||||
this.messageCount++;
|
||||
|
||||
// Log message reception for debugging
|
||||
if (this.messageCount % 10 === 0) {
|
||||
// Only log message counts in verbose mode and less frequently
|
||||
if (window.skyviewVerbose && this.messageCount % 500 === 0) {
|
||||
console.debug(`Received ${this.messageCount} WebSocket messages`);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue