Passer au contenu principal
Console du Navigateur

Affichage de la console du navigateur sur tes pièces jointes pour différents navigateurs et systèmes d'exploitation.

Andrew Radchanka avatar
Écrit par Andrew Radchanka
Mis à jour il y a plus d'un an

"Qu'est-ce que la console du navigateur, pourquoi en ai-je besoin, et comment l'ouvrir ?"

Motivation

Certains tests nécessitent l'ouverture de la Console. La console web fait partie des outils de développement que ton navigateur fournit. Elle affiche les informations de gestion des erreurs mises en œuvre par les développeurs d'un site web, ou les informations recueillies par ton navigateur si le problème est lié, par exemple, à JavaScript. Elle aidera le client - en particulier les développeurs - à identifier ce qui cause le bogue.

La façon d'ouvrir la console sera expliquée étape par étape pour différents navigateurs et systèmes d'exploitation dans l'article suivant.

Note que bon nombre des étapes pour configurer ton système ne doivent être effectuées qu'une seule fois, et que chaque utilisation ultérieure nécessitera moins d'étapes.

Obtenir des journaux de console de navigateur sur Windows et macOS

Microsoft Edge, Chrome, Firefox, Opera, Brave

  1. Ouvre le site web à tester.

  2. Appuie sur ton clavier sur Ctrl + Shift + I (Windows) ou sur alt + cmd + I (macOS).

  3. Clique sur l'onglet Console (si l'onglet Console n'est pas déjà sélectionné).

Safari

Prérequis :

  1. Ouvre le navigateur Safari sur ton ordinateur macOS.

  2. Ouvre le menu Préférences... (appuie sur ton clavier sur cmd + , ou ouvre Safari dans la barre de menu --> Préférences...).

  3. Accède à l'onglet Avancé.

  4. Coche la case Afficher le menu Développement dans la barre de menu. Après cela, tu devrais être en mesure de voir le menu Développement dans la barre de menu.

Une fois que tu as activé le menu Développement:

  1. Ouvre le site web à tester.

  2. Appuie sur ton clavier sur alt + cmd + C (macOS).

  3. Clique sur l'onglet Console (si l'onglet Console n'est pas déjà sélectionné).

Dans tous les cas ci-dessus, tu devrais voir la Console ouverte. Si, pour une raison quelconque, la Console ne se lance pas, il existe une solution rapide, et tout ce que tu as à faire est de faire un clic droit sur un site web, et dans le menu ouvert, clique sur Inspecter ou Élément inspecter et sélectionne l'onglet Console.

Si tu veux changer l'emplacement de la superposition des outils de développement, clique sur le bouton des ❝trois points❞ en haut à droite de la superposition. Tu pourras y choisir le côté d'accostage.

Obtenir des journaux de console de navigateur sur Android

Chrome

Il n'est pas possible d'afficher la console sur ton appareil mobile lui-même, mais il est possible de l'afficher sur un ordinateur connecté. Pour ce faire, les options de développement et le débogage USB de ton appareil Android doivent être activés. Si cela est déjà fait, tu peux passer à la Partie 2.

Partie 1: Prépare ton téléphone Android pour le débogage USB

1. Ouvre l'application Paramètres.

​2. Recherche le Numéro de build (Généralement situé sous "Informations sur le logiciel" dans la partie "À propos du téléphone").

​3. Appuie plusieurs fois sur le Numéro de build jusqu'à ce que tu voies un message Vous êtes maintenant un développeur!

4. Maintenant que tu as activé les options de développement, trouve-les dans les Paramètres et ouvre-les.

​5. Si les options de développement ne sont pas encore activées, active-les en appuyant sur le bouton basculer.

​6. Trouve l'option de débogage USB et active-la en appuyant sur le bouton basculer.

Partie 2 : Connecte Chrome sur ton ordinateur avec ton appareil Android

1. Sur ton téléphone Android, ouvre le site web qui doit être testé.

​2. Ouvre Google Chrome sur ton ordinateur Windows ou macOS.

​3. Dans la barre d'URL, entre chrome://inspect et accède à cette page.

​4. Assure-toi que la case à cocher Découvrir les périphériques USB est activée.

​5. Connecte ton téléphone Android à ton ordinateur via un câble USB.

​6. Si tu n'as pas utilisé précédemment le débogage USB, sur ton téléphone Android, tu devrais voir un message Autoriser le débogage USB? Appuie sur OK. Tu peux également cocher Toujours autoriser cet ordinateur, puis appuie sur OK pour t'assurer de ne pas être constamment sollicité lorsque tu essaies d'obtenir des journaux de navigateur.

​7. Tu devrais maintenant pouvoir voir ton appareil sous la section Cible distante. De plus, tu verras des onglets ouverts dans le navigateur sur ton téléphone. Pour commencer le test, tu devras cliquer sur le bouton Inspecter sous l'onglet que tu veux tester, et une nouvelle fenêtre s'ouvrira avec l'écran de ton appareil et DevTools (assure-toi que l'onglet Console est sélectionné dans DevTools).

Dépannage: Si l'appareil n'est pas détecté, essaie les correctifs suivants:

​1. Débranche ton téléphone du câble USB et reconnecte-le.

​2. Essaie de changer de port USB sur ton ordinateur.

​3. Essaie un autre câble USB.

​4. Si les correctifs ci-dessus n'aident pas, tu peux trouver des conseils de dépannage dans ce post du forum des développeurs de Google.

Obtenir des journaux de console de navigateur depuis l'appareil iOS sur macOS

Safari

Pour obtenir les journaux de la console du navigateur depuis Safari sur un appareil iOS, tu auras besoin d'un ordinateur macOS. Afin d'obtenir les journaux du navigateur depuis Safari sur ton appareil iOS, tu dois activer le menu Développement dans Safari sur ton macOS, et activer l'Inspecteur Web dans les paramètres de Safari sur ton appareil iOS. Si cela est déjà fait, tu peux passer à la Partie 2.

Partie 1: Prépare ton navigateur Safari sur macOS et tes appareils iOS pour le débogage

1. Ouvre le navigateur Safari sur ton ordinateur macOS.

​2. Ouvre le menu Préférences... (appuie sur ton clavier sur cmd + , ou ouvre Safari dans la barre de menu --> Préférences...)

3. Accède à l'onglet Avancé.

​4. Coche la case Afficher le menu Développement dans la barre de menu. Après cela, tu devrais être en mesure de voir le menu Développement dans la barre de menu.

5. Sur ton appareil iOS, ouvre les Paramètres.

6. Trouve et ouvre l'application Safari.

7. Fais défiler jusqu'en bas et appuie sur l'option Avancé.

​8. Active l'Inspecteur Web en appuyant sur le bouton basculer.

Partie 2 : Obtention des journaux de la console

1. Ouvre l'application Safari sur ton appareil iOS et accède au site web qui doit être testé.

​2. Connecte ton appareil iOS à ton ordinateur macOS via un câble USB.

2a. Si la fenêtre de confirmation Faire confiance à cet ordinateur ? s'affiche sur ton appareil, appuie sur Faire confiance et entre ton code d'accès si nécessaire.

​3. Ouvre l'application Safari sur ton macOS.

​4. Clique sur le menu Développement dans la barre de menu.

​5. Passe la souris sur le nom de ton appareil iOS et clique sur le nom du site web qui doit être testé.

​6. Maintenant, tu devrais pouvoir voir l'Inspecteur Web, et tu peux commencer le test (assure-toi que l'onglet Console est sélectionné dans l'Inspecteur Web).

Avez-vous trouvé la réponse à votre question ?