v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
147
visual_workflow_builder/debug_documentation_manual.html
Normal file
147
visual_workflow_builder/debug_documentation_manual.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test Documentation Debug</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
.result { padding: 10px; margin: 10px 0; border-radius: 5px; }
|
||||
.success { background: #d4edda; color: #155724; }
|
||||
.error { background: #f8d7da; color: #721c24; }
|
||||
.info { background: #d1ecf1; color: #0c5460; }
|
||||
textarea { width: 100%; height: 200px; font-family: monospace; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🧪 Test Documentation - Debug</h1>
|
||||
|
||||
<div class="info result">
|
||||
<strong>PROBLÈME:</strong> L'onglet Documentation ne montre pas de contenu quand on clique dessus.
|
||||
</div>
|
||||
|
||||
<h2>Instructions de test manuel:</h2>
|
||||
<ol>
|
||||
<li>Ouvrez <a href="http://localhost:3000" target="_blank">http://localhost:3000</a></li>
|
||||
<li>Créez un élément de workflow (glissez depuis la palette)</li>
|
||||
<li>Ouvrez les outils de développement (F12)</li>
|
||||
<li>Allez dans l'onglet Console</li>
|
||||
<li>Copiez et collez ce script:</li>
|
||||
</ol>
|
||||
|
||||
<textarea readonly>
|
||||
// Test de la documentation côté client
|
||||
console.log('=== TEST DOCUMENTATION ===');
|
||||
|
||||
// 1. Vérifier que React est chargé
|
||||
if (typeof React !== 'undefined') {
|
||||
console.log('✅ React chargé');
|
||||
} else {
|
||||
console.log('❌ React non chargé');
|
||||
}
|
||||
|
||||
// 2. Vérifier les onglets
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
console.log('📑 Onglets trouvés:', tabs.length);
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
const text = tab.textContent || tab.getAttribute('aria-label') || '';
|
||||
console.log(` Onglet ${index}: "${text}"`);
|
||||
|
||||
if (text.toLowerCase().includes('documentation') ||
|
||||
text.toLowerCase().includes('help') ||
|
||||
text.toLowerCase().includes('aide')) {
|
||||
console.log('✅ Onglet Documentation trouvé!');
|
||||
|
||||
// Vérifier l'état avant clic
|
||||
const isActive = tab.getAttribute('aria-selected') === 'true';
|
||||
console.log(' État avant clic:', isActive ? 'actif' : 'inactif');
|
||||
|
||||
// Cliquer sur l'onglet
|
||||
console.log('🖱️ Clic sur l\'onglet Documentation...');
|
||||
tab.click();
|
||||
|
||||
setTimeout(() => {
|
||||
// Vérifier l'état après clic
|
||||
const isActiveAfter = tab.getAttribute('aria-selected') === 'true';
|
||||
console.log(' État après clic:', isActiveAfter ? 'actif' : 'inactif');
|
||||
|
||||
// Chercher le contenu
|
||||
const tabpanels = document.querySelectorAll('[role="tabpanel"]');
|
||||
console.log('📋 Tabpanels trouvés:', tabpanels.length);
|
||||
|
||||
let contentFound = false;
|
||||
tabpanels.forEach((panel, i) => {
|
||||
const isVisible = panel.offsetParent !== null &&
|
||||
getComputedStyle(panel).display !== 'none';
|
||||
const hasContent = panel.textContent.trim().length > 0;
|
||||
console.log(` Panel ${i}: visible=${isVisible}, contenu=${hasContent}`);
|
||||
|
||||
if (isVisible && hasContent) {
|
||||
console.log('✅ SUCCÈS: Contenu trouvé!');
|
||||
console.log(' Aperçu:', panel.textContent.substring(0, 100) + '...');
|
||||
contentFound = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!contentFound) {
|
||||
console.log('❌ PROBLÈME: Aucun contenu visible');
|
||||
|
||||
// Debug supplémentaire
|
||||
console.log('🔍 Debug supplémentaire:');
|
||||
|
||||
// Vérifier les éléments cachés
|
||||
const hiddenElements = document.querySelectorAll('[style*="display: none"], [hidden]');
|
||||
console.log(' Éléments cachés:', hiddenElements.length);
|
||||
|
||||
// Vérifier les erreurs
|
||||
const errors = document.querySelectorAll('[class*="error"]');
|
||||
console.log(' Erreurs possibles:', errors.length);
|
||||
|
||||
// Vérifier l'état des composants React
|
||||
const reactElements = document.querySelectorAll('[data-reactroot], [data-react-helmet]');
|
||||
console.log(' Éléments React:', reactElements.length);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('=== FIN TEST ===');
|
||||
</textarea>
|
||||
|
||||
<h2>Que chercher dans la console:</h2>
|
||||
<ul>
|
||||
<li><strong>✅ "Onglet Documentation trouvé!"</strong> - L'onglet existe</li>
|
||||
<li><strong>État avant/après clic</strong> - Vérifier si l'onglet s'active</li>
|
||||
<li><strong>✅ "SUCCÈS: Contenu trouvé!"</strong> - Le contenu s'affiche</li>
|
||||
<li><strong>❌ "PROBLÈME: Aucun contenu visible"</strong> - Le problème est confirmé</li>
|
||||
</ul>
|
||||
|
||||
<h2>Problèmes possibles et solutions:</h2>
|
||||
<div class="info result">
|
||||
<h3>1. Onglet ne s'active pas</h3>
|
||||
<p><strong>Cause:</strong> Problème de gestion d'état React</p>
|
||||
<p><strong>Solution:</strong> Vérifier le handleTabChange dans PropertiesPanel</p>
|
||||
</div>
|
||||
|
||||
<div class="info result">
|
||||
<h3>2. Onglet s'active mais pas de contenu</h3>
|
||||
<p><strong>Cause:</strong> Problème de rendu conditionnel</p>
|
||||
<p><strong>Solution:</strong> Vérifier la condition activeTab === 1</p>
|
||||
</div>
|
||||
|
||||
<div class="info result">
|
||||
<h3>3. Contenu existe mais invisible</h3>
|
||||
<p><strong>Cause:</strong> Problème CSS ou de layout</p>
|
||||
<p><strong>Solution:</strong> Vérifier les styles et la visibilité</p>
|
||||
</div>
|
||||
|
||||
<div class="info result">
|
||||
<h3>4. Erreurs JavaScript</h3>
|
||||
<p><strong>Cause:</strong> Erreur dans DocumentationTab ou DocumentationService</p>
|
||||
<p><strong>Solution:</strong> Vérifier les imports et la logique</p>
|
||||
</div>
|
||||
|
||||
<h2>Test rapide:</h2>
|
||||
<p>Si vous voyez "❌ PROBLÈME: Aucun contenu visible", le problème est confirmé et nous devons examiner le code React plus en détail.</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user