// Firebase Debugging Helper
document.addEventListener('DOMContentLoaded', function() {
// Create a debugging panel
const debugPanel = document.createElement('div');
debugPanel.id = 'firebase-debug-panel';
debugPanel.style.position = 'fixed';
debugPanel.style.bottom = '20px';
debugPanel.style.right = '20px';
debugPanel.style.width = '400px';
debugPanel.style.maxHeight = '80vh';
debugPanel.style.overflowY = 'auto';
debugPanel.style.backgroundColor = '#f8f9fa';
debugPanel.style.border = '1px solid #dee2e6';
debugPanel.style.borderRadius = '4px';
debugPanel.style.padding = '15px';
debugPanel.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.15)';
debugPanel.style.zIndex = '9999';
debugPanel.style.display = 'none';
debugPanel.innerHTML = `
Firebase Debug Console
×
Test Connection
Clear Log
`;
document.body.appendChild(debugPanel);
// Add toggle button
const toggleButton = document.createElement('button');
toggleButton.id = 'toggle-debug-panel';
toggleButton.textContent = '🔍 Debug Firebase';
toggleButton.style.position = 'fixed';
toggleButton.style.bottom = '20px';
toggleButton.style.right = '20px';
toggleButton.style.backgroundColor = '#007bff';
toggleButton.style.color = 'white';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '4px';
toggleButton.style.padding = '8px 15px';
toggleButton.style.cursor = 'pointer';
toggleButton.style.zIndex = '9998';
document.body.appendChild(toggleButton);
// Event listeners
document.getElementById('toggle-debug-panel').addEventListener('click', function() {
const panel = document.getElementById('firebase-debug-panel');
if (panel.style.display === 'none') {
panel.style.display = 'block';
this.style.display = 'none';
checkFirebaseConfig();
testFirebaseConnection();
}
});
document.getElementById('close-debug-panel').addEventListener('click', function() {
document.getElementById('firebase-debug-panel').style.display = 'none';
document.getElementById('toggle-debug-panel').style.display = 'block';
});
document.getElementById('test-firebase-connection').addEventListener('click', testFirebaseConnection);
document.getElementById('clear-error-log').addEventListener('click', function() {
document.getElementById('firebase-error-log').innerHTML = '';
});
// Check Firebase configuration
function checkFirebaseConfig() {
const configStatus = document.getElementById('firebase-config-status');
try {
if (typeof firebase === 'undefined') {
configStatus.innerHTML = `
Error: Firebase is not defined. Make sure you've included the Firebase SDK.
`;
return;
}
// Check if firebaseConfig exists and has required fields
if (typeof firebaseConfig === 'undefined') {
configStatus.innerHTML = `
Error: firebaseConfig is not defined.
`;
return;
}
const requiredFields = ['apiKey', 'authDomain', 'projectId'];
const missingFields = [];
for (const field of requiredFields) {
if (!firebaseConfig[field]) {
missingFields.push(field);
}
}
if (missingFields.length > 0) {
configStatus.innerHTML = `
Error: Missing required fields in firebaseConfig: ${missingFields.join(', ')}
`;
return;
}
// Check if the API key looks like a placeholder
const apiKey = firebaseConfig.apiKey;
if (apiKey.includes('AIzaSyDQzGnxw9RUq0H5Qp-1Bv_qbCR_JRQJdvM') ||
apiKey.includes('your-api-key') ||
apiKey.includes('placeholder')) {
configStatus.innerHTML = `
Warning: Your API key appears to be a placeholder. Replace it with your actual Firebase API key.
How to fix:
Go to the Firebase Console
Create a new project or select an existing one
Click the web icon () to add a web app
Register your app with a nickname (e.g., "Fence Estimator")
Copy the firebaseConfig object
Replace the placeholder config in index.html with yours
`;
return;
}
configStatus.innerHTML = `
Firebase Config: Looks valid
API Key: ${firebaseConfig.apiKey}Project ID: ${firebaseConfig.projectId}Auth Domain: ${firebaseConfig.authDomain}
`;
} catch (error) {
configStatus.innerHTML = `
Error checking config: ${error.message}
`;
}
}
// Test Firebase connection
function testFirebaseConnection() {
const connectionStatus = document.getElementById('firebase-connection-status');
const errorLog = document.getElementById('firebase-error-log');
connectionStatus.innerHTML = `
Testing connection...
`;
try {
if (typeof firebase === 'undefined' || typeof firebase.firestore !== 'function') {
connectionStatus.innerHTML = `
Error: Firebase Firestore is not available.
`;
return;
}
// Try to access Firestore
const db = firebase.firestore();
// Try to read from a test collection
db.collection('test').limit(1).get()
.then(() => {
connectionStatus.innerHTML = `
Connection successful! Firebase is working correctly.
`;
})
.catch(error => {
let errorMessage = error.message;
let solution = '';
// Provide specific guidance based on error
if (error.code === 'permission-denied') {
solution = `
How to fix:
Go to the Firebase Console
Select your project
Go to Firestore Database
Go to Rules tab
Update your rules to allow read/write access (for testing):
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true; // WARNING: Only for testing!
}
}
}
Click "Publish"
`;
} else if (error.code === 'invalid-argument' || errorMessage.includes('400')) {
solution = `
How to fix:
The 400 error usually means your Firebase configuration is invalid
Make sure you've replaced the placeholder config with your own
Check that your project exists in the Firebase Console
Verify that Firestore is enabled in your project
`;
}
connectionStatus.innerHTML = `
Connection failed: ${errorMessage}
Error code: ${error.code || 'unknown'}
${solution}
`;
// Add to error log
const timestamp = new Date().toLocaleTimeString();
errorLog.innerHTML += `
${timestamp}
Error: ${errorMessage}
Code: ${error.code || 'unknown'}
`;
});
} catch (error) {
connectionStatus.innerHTML = `
Error testing connection: ${error.message}
`;
// Add to error log
const timestamp = new Date().toLocaleTimeString();
errorLog.innerHTML += `
${timestamp}
Error: ${error.message}
`;
}
}
// Monitor for Firebase errors
const originalConsoleError = console.error;
console.error = function() {
originalConsoleError.apply(console, arguments);
// Check if this is a Firebase error
const errorString = Array.from(arguments).join(' ');
if (errorString.includes('firebase') || errorString.includes('firestore') || errorString.includes('400')) {
const errorLog = document.getElementById('firebase-error-log');
const timestamp = new Date().toLocaleTimeString();
errorLog.innerHTML += `
${timestamp}
Console Error: ${errorString}
`;
// Show the debug button with an alert indicator
const toggleButton = document.getElementById('toggle-debug-panel');
if (toggleButton.style.display !== 'none') {
toggleButton.textContent = '🔴 Debug Firebase';
toggleButton.style.backgroundColor = '#dc3545';
}
}
};
});