mozilla
Vos résultats de recherche

    Console Web

    La Console Web :

    1. enregistre les informations associées à la page web : toutes les requêtes réseau, JavaScript, CSS, tout comme les erreurs et les avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.
    2. vous permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.

    La Console Web remplace en partie la Console d'Erreurs intégrée à Firefox : mais la Console d'Erreurs affichait les erreurs, les avertissements et les messages de toutes les pages web, du code du navigateur, et des modules. Ceci rendait la lecture de ces messages très difficile. La Console Web est toujours associée à une page spécifique et ne montre que les informations associées à cette page.

    L'autre partie remplaçant la Console d'Erreurs est la Console du Navigateur, qui affiche les erreurs, les avertissements et les messages du code du navigateur et des modules.

    Ouvrir la Console Web

    Pour ouvrir la Console Web, sélectionnez "Console web" depuis le sous-menu "Développeur web" (dans le menu "Outils" si vous affichez la barre de menu ou que vous êtes sous Mac OS X), ou en appuyant sur le raccourci clavier Ctrl-MAJ-K (Cmd-Option-K sur un Mac).

    La boite à outils apparaitra en bas de la fenêtre de votre navigateur, avec la Console Web activée (elle est simplement appelée "Console" dans la barre de le boite à outils.

    L'interface de la Console Web se découpe en trois sections :

    • Barre d'outils : en haut se trouve une barre d'outils avec des boutons "Réseau", "CSS, "JS", … Cette barre d'outils sert à filter les messages affichés
    • Ligne de commande : en bas se trouve la ligne de commande que vous pouvez utiliser pour entrer des expressions JavaScript
    • Panneau d'affichage des messages : entre la barre d'outils et la ligne de commande, et occupant la majeure partie de la Console Web, se trouve l'espace servant à afficher les messages
       

    Section d'affichage des messages

    La majorité de la Console Web est occupée par le panneau d'affichage des messages :

    Les messages suivant sont affichés :

    • Requêtes HTTP
    • Erreurs et avertissements JavaScript
    • Erreurs, avertissements, et évènements de reflow CSS
    • Erreurs et avertissements de sécurité
    • Appels à l'API console
    • Messages d'entrées/sorties : commandes envoyées au navigateur par la ligne de commande, et leurs résultats

    Chaque message est affiché sur une nouvelle ligne.

    Temps La date et heure à laquelle le message a été enregistré. A partir de Firefox 28, cette information n'est plus affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils
    Catégorie

    Indique le type de message :

    • Noir : Requête HTTP
    • Bleu  : Avertissement/erreur CSS
    • Orange  : Avertissement/erreur JavaScript
    • Rouge : Avertissement/erreur de sécurité
    • Gris léger  : message explicitement loggé dans le code JavaScript en utilisant l'API console
    • Gris foncé : Les messages d'entrées/sorties venant de la ligne de commande JavaScript
    Type Pour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif
    Message Le message lui-même
    Nombre d’occurrences Si une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée
    Nom du fichier et numéro de ligne Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message

    Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.

    Requêtes HTTP

    Les requêtes HTTP sont affichées sous cette forme :

    Temps La date et heure à laquelle le message a été enregistré
    Catégorie Indique que ce message concerne une requête HTTP
    Méthode La méthode HTTP utilisée
    URI L'URI cible
    Résumé La version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer

    Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :

    Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.

    Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.

    A partir de Firefox 30, les messages de journalisation des requêtes réseaux ne sont plus affichés par défaut.

    Erreurs et avertissements JavaScript

    Les messages JavaScript ressemblent à :

     

    Erreurs CSS, avertissements et évènements de reflow

    Les messages CSS ressemblent à ceci :

    Par défaut, les avertissements CSS ne sont pas affichés.

    Évènements de reflow

    La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.
    Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.

    Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.

    Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".

    Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :


    Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :


    Cliquez sur le lien pour ouvrir le fichier dans le Débogueur.

    Reflows synchrones et asynchrones

    Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow asynchrone pour calculer le style calculé ("computed style") à retourner.

    Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :

    var thing = document.getElementById("the-thing");
    thing.style.display = "inline-block";
    var thingHeight = window.getComputedStyle(thing).height;
    

    A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.

    Avertissements et erreurs de sécurité

    Les avertissements et les erreurs de sécurité ressemblent à ceci :

    Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.

    La liste complète des messages de sécurité est la suivante :

    Message Details
    Blocage du chargement du contenu mixte actif La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
    Blocage du chargement du contenu mixte non actif La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
    Chargement de contenu mixte actif (non sécurisé) sur une page sécurisée La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
    Chargement de contenu mixte non actif (non sécurisé) sur une page sécurisée La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
    Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré. Voir Content Security Policy pour plus de détails.
    Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place. Voir Content Security Policy pour plus de détails.
    Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur. Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
    Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur. Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.
    Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur. Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
    Le site a spécifié un en-tête Strict-Transport-Security invalide. Voir HTTP Strict Transport Security pour plus d'informations

    Le Bug 863874 est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.

    Message console API


    Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa page de documentation.

    Messages d'erreurs

    API Contenu du message
    error()

    L'argument à  error().

    console.error("an error");

    A partir de Firefox 31, la console affiche la pile complète des erreurs :

    function error() {
      console.error("an error");
    }
    
    function call_error() {
      error();
    }
    
    call_error();

    exception() Un alias de error().
    assert()

    Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :

    console.assert(false, "My assertion always fails");

    A partir de Firefox 31, la console affiche la pile complète des insertions :

    function assertion() {
      console.assert(false, "assertion failed");
    }
    
    function call_assertion() {
      assertion();
    }
    
    call_assertion();

    Messages d'avertissement

    API Contenu du message
    warn()

    L'argument à warn().

    console.warn("a warning");

    Messages d'information

    API Contenu du message
    info()

    L'argument à info().

    console.info("some info");

    Message de log

    API Contenu du message
    count()

    Le label fourni, si présent, et le nombre d'occurrences que count() a appelé avec le label donné.

    console.count(user.value);

    log()

    L'argument à log().

    console.log("logged");
    trace() Trace de la pile.
    console.trace();
    dir()

    Liste les propriétés d'un objet.

    var user = document.getElementById('user');
    console.dir(user);
    time()

    Notifie que le timer a démarré.

    console.time("t");
    timeEnd()

    Durée du timer.

    console.timeEnd("t");
    table()

    Ce message est une des nouveautés de Firefox 34.

    Affiche des données de tableau comme un tableau.

    Messages groupés

    il est possible d'utiliser console.group() pour créer des groupes indentés dans la console. Voir Using groups in the console pour plus d'informations.

    Personnalisation des messages

    Depuis Firefox 31, il est possible d'utiliser le spécificateur de format "%c" pour personnaliser les messages console :

    console.log("%cMy stylish message", "color: red; font-style: italic");

    Messages d'entrée/sortie

    Les commandes envoyées au navigateur en utilisant la ligne de commande de la Console Web, et les réponses correspondantes, sont affichés de cette façon :

    La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.

    Filtrer et rechercher

    Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :

    Vous pouvez n'afficher que certains types de messages, ou des messages contenant un texte en particulier.

    Enfin, vous pouvez aussi vider la Console Web de tous ses messages.

    L'interpréteur de lignes de commande

    Vous pouvez traiter des expressions JavaScript en temps réel en utilisant la ligne de commande fournie avec la Console Web.

    Entrer des expressions

    Pour entrer des expressions, tapez juste dans la ligne de commande et appuyez sur "Entrée". Pour entrer des expressions de plusieurs lignes, utiliser "MAJ+Entrée", au lieu de "Entrée".

    L'expression que vous avez tapée, vous est retournée, suivie de son résultat :

    Accéder aux variables

    Vous pouvez accéder aux variables définies dans la page, aussi bien les variables par défaut comme window, que les variables ajoutées par le code JavaScript comme jQuery :

    Auto-complétion

    La ligne de commande possède une auto complétion : entrez les premières lettres et un pop-up apparait vous montrant les suggestions possibles :

    Tapez "Entrée" ou "Tab" pour accepter une suggestion, utilisez les flèches haut/bas de votre clavier pour vous déplacer d'une suggestion à l'autre, ou continuez à taper si aucune suggestion ne vous convient.

    La console suggère des complétions dans le périmètre de la frame s'exécutant actuellement. Ce qui veut dire que lorsque le code s'arrête sur un point d'arrêt dans une fonction, l'auto-complétion sera réalisée par rapport aux objets locaux de la fonction.

    Depuis Firefox 30, les suggestions de l'auto-complétion fonctionnent pour les tableaux également :

    Inspecter les objets

    Si le résultat est un objet, il apparait en italique. Cliquez dessus pour voir apparaitre un nouveau panneau contenant le détail de l'objet.

    Pour faire partir le panneau, appuyez sur "Esc".

    Définir des variables

    Vous pouvez définir vos propres variables, et ensuite y accéder :

    Mettre en surbrillance et inspecter les nœuds

    Cette fonctionnalité est une des nouveautés de Firefox 30.

    Survoler n'importe quel élément DOM dans la console le mettra en surbrillance dans la page :

    Dans la capture d'écran ci-dessus, il y a également une icône de "cible" bleue à côté du nœud dans la console : cliquer dessus fera passer les outils de développement à l'inspecteur avec ce nœud sélectionné.

    Historique des commandes

    La ligne de commande se souvient des commandes que vous avez tapées : pour vous déplacer dans l'historique, utilisez les flèches haut et bas de votre clavier.

    Travailler avec des iframes

    Cette fonctionnalité est une des nouveautés de Firefox 30.

    Si une page contient des iframes intégrés, il est possible d'utiliser la commande cd() pour changer la portée de la console à un iframe spécifique, il est alors possible d'exécuter les fonctions définies dans le document hébergé par cet iframe. Il y a trois moyens de sélectionner un iframe en utilisant cd():

    Il est possible de passer l'iframe DOM en paramètre :

    var frame = document.getElementById("frame1");
    cd(frame);

    Il est possible de passer un sélecteur CSS en paramètre :

    cd("#frame1");

    Il est possible de passer l'objet window global de l'iframe :

    var frame = document.getElementById("frame1");
    cd(frame.contentWindow);

    Pour remettre le contexte à la fenêtre principale, il suffit d'appeler cd() sans arguments :

    cd();

    Par exemple, supposons que l'on ait un document qui inclut un iframe :

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
      </body>
    </html>

    L'iframe définit une nouvelle fonction :

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <script>
          function whoAreYou() {
            return "I'm frame1";
          }
       </script>
      </head>
      <body>
      </body>
    </html>

    Il est possible de changer le contexte comme ceci :

    cd("#frame1");

    L'objet window global est maintenant l'iframe :

    Et il est possible d'appeler les fonctions définies dans l'iframe :

    Console scindée

    La console scindée est une des nouveautés de Firefox 28.

    Depuis Firefox 28, il est possible d'utiliser la console aux côtés d'autres outils. En étant dans un autre outil de la boite à outils, il suffit de presser "Échap" ou d'appuyer sur le bouton "Console scindée" dans la barre d'outils. La boite à outils apparaitra alors scindée, avec les outils d'origine en haut et la console en dessous.

    Comme toujours,  $0 sert de raccourci pour l'élément actuellement sélectionné dans l'inspecteur :

    Lors d'une utilisation de la console scindée et du débogueur, la portée de la console est celle de la frame actuelle. Donc, si le code rencontre un point d'arrêt dans une fonction, la portée sera celle de la fonction. La console a alors l'auto-complétion pour les objets définis dans la fonction, et il est possible de les modifier à la volée :

    Raccourcis clavier

    Raccourci Description
    Restaure l'entrée précédente dans l'historique de la ligne de commande, ou si la pop-up d'auto-complétion est ouverte, met en évidence la suggestion précédente.
    Restaure l'entrée suivant dans l'historique de la ligne de commande, ou si la pop-up d'auto-complétion est ouverte, met en évidence la suggestion suivante.
    Ctrl-A Déplace le curseur au début de la ligne (Note : à partir de Firefox 22, cela sélectionnera tout le texte sous Windows).
    Ctrl-E Déplace le curseur à la fin de la ligne.
    Entrée Exécute le code tapé dans la ligne de commande, ou si la pop-up d'auto-complétion est ouverte, choisit la suggestion actuelle.
    Shift-Entrée Augmente la hauteur du champ texte de la ligne de commande d'une ligne.
    Esc Annule la pop-up d'auto-complétion.
    Tab Génère une suggestion d'auto-complétion et accepte la première.

    Fonctions d'aide

    La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simple.

    $()
    Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à document.querySelector(), ou appelle la fonction $ de la page, si elle existe.
    $$()
    Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de document.querySelectorAll().
    $0
    L'élément actuellement inspecté sur la page.
    $_
    Nouveau dans Firefox 39. Stocke le résultat de la dernière expression éxécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis entrée et ensuite $_ puis entrée, la console affichera 4.
    $x()
    Evalue une expression XPath et renvoie un tableau des nœuds correspondant.
    keys()
    À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.
    values()
    À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().
    clear()
    Vide l'affichage des messages de la console.
    inspect()
    À partir d'un objet, ouvre un inspecteur d'objet.
    pprint()
    Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.
    help()
    Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.
    cd()
    Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Voir travailler avec des iframes.
    copy()
    Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quel. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papiers.
    clearHistory()
    Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souviens des commandes tapées.
    Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, maximelore, dataG, trevorh, teoli, Thegennok, J.DMB, milc, sperling
    Dernière mise à jour par : Thegennok,