Como Inspecionar Elementos em um Chromebook e a Tecla do Teclado que Confunde Todos

Um Chromebook executa Chrome, portanto possui as mesmas ferramentas de desenvolvimento do Chrome em qualquer outro computador - o Console completo, a aba Network, o inspetor de elementos, tudo. A única coisa que faz isso uma pergunta que merece sua própria resposta é o teclado, que não possui a tecla que a maioria das instruções diz para pressionar.

Alguém diz “pressione F12” ou “abra o console”, e em um Chromebook não há F12 para encontrar. Aqui está como abrir ferramentas de desenvolvimento mesmo assim, e o que fazer uma vez que estejam abertas.

Abrindo as ferramentas de desenvolvimento

Três formas de entrar, e a segunda é a que vale a pena lembrar porque não depende de nenhuma tecla que o Chromebook não possui.

• Clique com o botão direito na coisa que você quer examinar e escolha Inspect. Se seu Chromebook não possui botão direito do mouse, toque o touchpad com dois dedos. Isso abre ferramentas de desenvolvimento com esse elemento já selecionado, que é geralmente exatamente o que você queria.
• Pressione Ctrl + Shift + I para abrir as ferramentas, ou Ctrl + Shift + J para abri-las direto no Console. Isso funciona em todos os Chromebooks e é a resposta confiável.
• Pressione a tecla na linha superior onde F12 estaria, se você precisar. Essa linha é o ponto problemático, e possui sua própria seção abaixo.

O problema do F12, e como a linha superior realmente funciona

A linha superior de um Chromebook não são teclas de função. É voltar, atualizar, tela cheia, brilho e o resto, e não há F12 impresso em lugar nenhum. Este é o único ponto em que as pessoas ficam presas, e tem uma solução.

Segure a tecla Launcher - a que tem um círculo ou uma lupa, onde a tecla Caps Lock fica em outros teclados - e a linha superior se torna F1 até F12 enquanto você a segura. Então Launcher + a décima segunda tecla na linha superior é F12, e abre ferramentas de desenvolvimento.

Mas você raramente precisa disso, porque Ctrl + Shift + I faz o mesmo trabalho sem contar teclas. Se uma instrução diz F12 e você está em um Chromebook, leia como “abra ferramentas de desenvolvimento” e use o atalho em vez disso.

O atalho de teclado para inspecionar, em qualquer teclado

Se você veio pelo atalho e não pela explicação: em um Chromebook é Ctrl + Shift + I, e essa é a resposta inteira. Vale a pena conhecer os outros porque a instrução que lhe deram quase certamente foi escrita para outra máquina, e segui-la ao pé da letra é o que faz as pessoas procurarem uma tecla que o teclado delas não tem.

• Chromebook, Windows e Linux: Ctrl + Shift + I abre as ferramentas de desenvolvimento, e Ctrl + Shift + J as abre com o console já à frente.
• Mac: Cmd + Option + I, e Cmd + Option + J para o console. O Safari é diferente de novo e precisa ser ativado antes que qualquer coisa funcione, o que o guia para Mac cobre.
• Apenas Windows e Linux: F12 faz o mesmo que Ctrl + Shift + I. Em um Chromebook não há F12 impresso em lugar nenhum, que é o assunto da seção acima.

Duas coisas confundem mais do que as próprias teclas. O atalho abre as ferramentas sem selecionar nada, então quando você quer um elemento específico, clique nele com o botão direito e escolha Inspecionar: você chega com aquele elemento já destacado. E o atalho age sobre a página que você está vendo, não sobre o navegador, de modo que não adianta nada em uma nova aba, em uma tela de configurações ou na Web Store.

Se você está no Windows e não em um Chromebook, o guia para Windows segue para qual painel responde a qual pergunta depois que você entra.

Lendo o console, que geralmente é o objetivo

A maioria do tempo “inspecionar elemento em um Chromebook” é realmente “alguém me pediu para verificar o que o console diz.” A aba Console é onde a página relata seus erros, e uma linha vermelha lá é frequentemente a explicação completa para uma página que não funciona.

Abra as ferramentas, clique em Console, e recarregue a página para que seja executada desde o início com o console monitorando. Vermelho é um erro, laranja é um aviso. A primeira linha vermelha é geralmente a que importa; o resto são frequentemente consequências dela. Se foi pedido que você enviasse o que ela diz, a forma honesta é capturar tudo em vez de redigitar uma linha, porque a linha sob a vermelha é frequentemente onde está o detalhe real.

A aba Network, para quando nada carrega

Se o problema é que algo não carregou em vez de a página ter lançado um erro, a aba Network é o lugar. Abra-a, recarregue, e veja a lista preenchida com cada requisição que a página fez. Uma linha vermelha é uma requisição que falhou, e seu código de status diz como. A aba Network tem seu próprio guia se o painel é novo para você.

Inspecionando um telefone Android a partir do seu Chromebook

Vale a pena saber, porque um Chromebook é frequentemente o computador que um testador realmente possui: ele pode abrir ferramentas de desenvolvimento para uma página em execução em um telefone Android, através de um cabo USB, exatamente da maneira que um computador Windows ou Mac pode. Digite chrome://inspect na barra de endereços, conecte o telefone, e as páginas abertas nele aparecem na lista com um link Inspect ao lado de cada uma. Os passos completos estão em como inspecionar elemento no Android; nada sobre eles muda porque o computador é um Chromebook.

Se você é quem está pedindo isso a alguém

Se você está guiando uma pessoa em um Chromebook através disso - um testador, um cliente, um colega - não diga a ela para pressionar F12. Ela procurará por isso, não encontrará, e decidirá que as instruções estão erradas. Diga “clique com o botão direito na página e escolha Inspect”, que não precisa de nenhuma tecla, ou “Ctrl + Shift + J abre o console.” Ambas funcionam na primeira tentativa, que é a diferença entre obter uma resposta e obter uma captura de tela da tela errada.

Como ele é executado no Chrome, é executado em um Chromebook, e captura o console e o log de rede para quem recebe o relatório - para que a pessoa no Chromebook não precise encontrar uma tecla que não existe antes de poder dizer o que deu errado.

Referência rápida

• Abrir ferramentas de desenvolvimento: clique com o botão direito e escolha Inspect, ou Ctrl + Shift + I.
• Abrir direto no Console: Ctrl + Shift + J.
• Se você realmente precisar de F12: segure a tecla Launcher e pressione a décima segunda tecla na linha superior.
• Inspecionar um telefone Android: chrome://inspect com o telefone em um cabo.