Comment inspecter un élément sur un Chromebook et la touche du clavier qui pose problème à tout le monde

Un Chromebook exécute Chrome, il a donc les mêmes outils de développement que Chrome sur n’importe quel autre ordinateur - la Console complète, l’onglet Network, l’inspecteur d’éléments, tout. La seule chose qui rend cela une question méritant sa propre réponse est le clavier, qui n’a pas la touche que la plupart des instructions vous disent de presser.

Quelqu’un dit « appuyez sur F12 » ou « ouvrez la console », et sur un Chromebook il n’y a pas de F12 à trouver. Voici comment ouvrir les outils de développement quand même, et ce qu’il faut faire une fois qu’ils sont ouverts.

Ouvrir les outils de développement

Trois façons d’entrer, et la deuxième est celle à retenir car elle ne dépend d’aucune touche que le Chromebook n’a pas.

• Clic droit sur la chose que vous voulez regarder et choisissez Inspect. Si votre Chromebook n’a pas de bouton droit de la souris, tapez le pavé tactile avec deux doigts. Cela ouvre les outils de développement avec cet élément déjà sélectionné, ce qui est généralement exactement ce que vous vouliez.
• Appuyez sur Ctrl + Shift + I pour ouvrir les outils, ou Ctrl + Shift + J pour les ouvrir directement sur la Console. Cela fonctionne sur tous les Chromebook et est la réponse fiable.
• Appuyez sur la touche de la rangée du haut où F12 serait, si vous en avez besoin. Cette rangée est le hic, et elle a sa propre section ci-dessous.

Le problème F12, et comment la rangée du haut fonctionne réellement

La rangée supérieure d’un Chromebook n’a pas de touches de fonction. C’est retour, actualiser, plein écran, luminosité et le reste, et il n’y a pas de F12 imprimé nulle part. C’est la seule chose sur laquelle les gens restent bloqués, et cela a une solution.

Maintenez la touche Launcher - celle avec un cercle ou une loupe, où la touche Verr Maj se trouve sur les autres claviers - et la rangée du haut devient F1 à F12 aussi longtemps que vous la maintenez. Donc Launcher + la douzième touche de la rangée du haut c’est F12, et cela ouvre les outils de développement.

Mais vous en avez rarement besoin, car Ctrl + Shift + I fait le même travail sans compter les touches. Si une instruction dit F12 et que vous êtes sur un Chromebook, lisez-la comme « ouvrez les outils de développement » et utilisez le raccourci à la place.

Le raccourci clavier pour inspecter, sur n’importe quel clavier

Si vous êtes venu pour le raccourci plutôt que pour l’explication : sur un Chromebook, c’est Ctrl + Shift + I, et c’est toute la réponse. Les autres méritent d’être connus parce que la consigne qu’on vous a donnée a presque certainement été écrite pour une autre machine, et la suivre à la lettre est ce qui envoie les gens chercher une touche que leur clavier ne possède pas.

• Chromebook, Windows et Linux : Ctrl + Shift + I ouvre les outils de développement, et Ctrl + Shift + J les ouvre avec la console déjà devant vous.
• Mac : Cmd + Option + I, et Cmd + Option + J pour la console. Safari est encore différent et doit d’abord être activé pour que quoi que ce soit fonctionne, ce que couvre le guide pour Mac.
• Windows et Linux uniquement : F12 fait le même travail que Ctrl + Shift + I. Sur un Chromebook, F12 n’est écrit nulle part, ce dont parle la section précédente.

Deux choses déroutent plus souvent que les touches elles-mêmes. Le raccourci ouvre les outils sans rien sélectionner : quand vous visez un élément précis, faites plutôt un clic droit dessus et choisissez Inspecter, et vous arrivez avec cet élément déjà mis en évidence. Et le raccourci agit sur la page que vous regardez, pas sur le navigateur, donc il ne sert à rien sur un nouvel onglet, un écran de paramètres ou le Web Store.

Si vous êtes sous Windows plutôt que sur un Chromebook, le guide pour Windows enchaîne sur la question de savoir quel panneau répond à quelle question une fois que vous êtes entré.

Lire la Console, qui est généralement l’essentiel

La plupart du temps « inspecter un élément sur un Chromebook » signifie vraiment « quelqu’un m’a demandé ce que la console dit ». L’onglet Console est l’endroit où la page signale ses erreurs, et une ligne rouge ici est souvent toute l’explication pour une page qui ne fonctionnera pas.

Ouvrez les outils, cliquez sur Console, et rechargez la page pour qu’elle s’exécute depuis le début avec la console qui regarde. Le rouge est une erreur, l’orange est un avertissement. La première ligne rouge est généralement celle qui compte ; les autres sont souvent des conséquences de celle-ci. Si on vous a demandé d’envoyer ce qu’elle dit, la façon honnête est de capturer le tout plutôt que de réécrire une ligne, car la ligne sous la ligne rouge est souvent où se trouve le vrai détail.

L’onglet Network, pour quand rien ne se charge

Si le problème est que quelque chose ne s’est pas chargé plutôt que la page a levé une erreur, l’onglet Network est l’endroit. Ouvrez-le, rechargez, et regardez la liste se remplir avec chaque demande que la page a faite. Une ligne rouge est une demande qui a échoué, et son code de statut dit comment. L’onglet Network a son propre guide si le panneau est nouveau pour vous.

Inspecter un téléphone Android depuis votre Chromebook

Mérite d’être su, car un Chromebook est souvent l’ordinateur qu’un testeur a réellement : il peut ouvrir les outils de développement pour une page s’exécutant sur un téléphone Android, sur un câble USB, exactement comme une machine Windows ou Mac peut le faire. Tapez chrome://inspect dans la barre d’adresse, connectez le téléphone, et les pages ouvertes sur celui-ci apparaissent dans la liste avec un lien inspect à côté de chacune. Les étapes complètes sont dans comment inspecter un élément sur Android ; rien à leur sujet ne change parce que l’ordinateur est un Chromebook.

Si vous êtes celui qui demande à quelqu’un de faire cela

Si vous guidez une personne sur un Chromebook à travers cela - un testeur, un client, un collègue - ne lui dites pas d’appuyer sur F12. Ils la chercheront, ne la trouveront pas, et décideront que les instructions sont fausses. Dites « clic droit sur la page et choisissez Inspect », ce qui n’a besoin d’aucune touche du tout, ou « Ctrl + Shift + J ouvre la console. » Les deux fonctionnent du premier coup, ce qui est la différence entre obtenir une réponse et obtenir une capture d’écran du mauvais écran.

Parce qu’il s’exécute dans Chrome, il s’exécute sur un Chromebook, et il capture la console et le journal réseau pour quiconque reçoit le rapport - de sorte que la personne sur le Chromebook n’a pas à trouver une touche qui n’est pas là avant de pouvoir vous dire ce qui s’est mal passé.

Référence rapide

• Ouvrir les outils de développement : clic droit et Inspect, ou Ctrl + Shift + I.
• Ouvrir directement sur la Console : Ctrl + Shift + J.
• Si vous avez vraiment besoin de F12 : maintenez la touche Launcher et appuyez sur la douzième touche de la rangée du haut.
• Inspecter un téléphone Android : chrome://inspect avec le téléphone sur un câble.