Aller au contenu
DEVARY
Tous les outils

HTML Studio

Disponible

Modifiez des documents HTML complets avec un aperçu en direct exécuté dans un bac à sable isolé du navigateur.

Devary n'envoie ni ne persiste votre HTML.
Envoyer vers

Outils compatibles

JSON StudioRegex LabCron StudioBase64 StudioTimestamp StudioText DiffUUID StudioData Converter

Document HTML

1530 caractères

Aperçu en direct

Synchronisé

Console

0

La capture de console est disponible en mode Interactive. Le mode Safe garde les scripts désactivés.

HTML Intelligence

Une seule analyse locale alimente l’arbre DOM, les diagnostics, le SEO/métadonnées, les ressources et la revue statique d’accessibilité.

13 éléments0 erreurs0 avertissements
  • <!doctype html>L1:1
  • <html>L2:1
    lang="en"
    • <head>L3:3
      • <meta>L4:5
        charset="utf-8"
      • <meta>L5:5
        name="viewport"content="width=device-width, initial-scale=1"
      • <title>L6:5
      • <style>L7:5
    • <body>L46:3
      • <main>L47:5
      • <script>L56:5

Le mode Safe bloque le contenu actif

JavaScript, connexions réseau, frames externes, objets et soumissions de formulaires sont bloqués. Le CSS inline et les médias data/blob peuvent être rendus.

Un espace dédié aux documents HTML

Collez ou écrivez un document HTML complet, modifiez-le avec CodeMirror et voyez le rendu se mettre à jour immédiatement à côté du code.

L'isolation fait partie de la fonctionnalité

L'aperçu s'exécute dans un iframe sandboxé, pas dans le DOM de Devary. Le mode Safe bloque par défaut les scripts et les ressources réseau.

Guide développeur

Déboguer des documents HTML en aperçu isolé

HTML Studio combine édition, aperçu isolé et diagnostics. Comprenez les différences avec votre environnement final.

Méthode pratique

  1. Configurer

    Chargez un document HTML complet et examinez le DOM, les ressources et les diagnostics.

  2. Essayer

    Formatez ou minifiez prudemment, puis comparez le code à l’aperçu et à la console.

  3. Vérifier

    Interprétez les indications SEO et accessibilité comme des vérifications préliminaires.

Exemples expliqués

Préserver l’espacement visible

La minification prudente garde les espaces entre éléments en ligne.

Configuration

Conservative minify

Entrée d’exemple

<main>  <span>A</span> <span>B</span> </main>

Résultat attendu

<main> <span>A</span> <span>B</span> </main>

Préserver le texte préformaté

Le contenu des blocs préformatés garde indentation et retours à la ligne.

Configuration

Preserve preformatted content

Entrée d’exemple

<pre>  line 1
  line 2 </pre>

Résultat attendu

<pre>  line 1
  line 2 </pre>

Limites et précautions

Fonctions prises en charge

Un aperçu isolé ne reproduit pas toutes les politiques de scripts ou de ressources du déploiement.

Avant la production

Les diagnostics automatiques ne remplacent pas des tests de sécurité et d’accessibilité complets.

Question fréquente

Un aperçu correct garantit-il le résultat en production ?

Non. Vérifiez les ressources, l’affichage mobile et les politiques de sécurité sur votre site final.