Kayce Basques
Sofia Emelianova
Esta página é uma referência de atalhos do teclado no Chrome DevTools.
Você também pode encontrar atalhos em dicas. Passe o cursor sobre um elemento da interface do DevTools para mostrar a dica. Se o elemento tiver um atalho, a dica vai incluí-lo.
Atalhos do teclado para abrir o DevTools
Para abrir o DevTools, pressione os seguintes atalhos do teclado enquanto o cursor estiver focado na janela de visualização do navegador:
| Ação | Mac | Windows / Linux |
|---|---|---|
| Abrir o último painel usado | Command+Option+I | F12 ou Control+Shift+I |
| Abrir o painel Console | Command+Option+J | Control+Shift+J |
| Abrir o painel Elementos | Command+Shift+C ou Command+Option+C | Control+Shift+C |
Atalhos de teclado globais
Os atalhos de teclado a seguir estão disponíveis na maioria dos painéis do DevTools, se não em todos.
| Ação | Mac | Windows / Linux |
|---|---|---|
| Mostrar Configurações | ? ou Function+F1 | ? ou F1 |
| Focar no próximo painel | Command+] | Control+] |
| Focar no painel anterior | Command+[ | Control+[ |
| Voltar para a posição de ancoragem usada por último. Se o DevTools estiver na posição padrão durante toda a sessão, esse atalho vai desancorar o DevTools em uma janela separada | Command+Shift+D | Control+Shift+D |
| Ativar/desativar o modo de dispositivo | Command+Shift+M | Control+Shift+M |
| Ativar/desativar o modo de inspecionar elemento | Command+Shift+C | Control+Shift+C |
| Abrir o menu de comandos | Command+Shift+P | Control+Shift+P |
| Ativar/desativar a gaveta | Escape | Escape |
| Atualização normal | Command+R | F5 ou Control+R |
| Atualização forçada | Command+Shift+R | Control+F5 ou Control+Shift+R |
| Pesquisar texto no painel atual. Compatível apenas com os painéis Elementos, Console, Origens, Performance, Memória, Profiler JavaScript e Origem rápida. | Command+F | Control+F |
| Abre a guia Pesquisar na gaveta, que permite pesquisar texto em todos os recursos carregados | Command+Option+F | Control+Shift+F |
| Abrir um arquivo no painel Origens | Command+O ou Command+P | Control+O ou Control+P |
| Aumentar zoom | Command+Shift++ | Control+Shift++ |
| Diminuir zoom | Command+- | Control+- |
| Restaurar o nível de zoom padrão | Command+0 | Control+0 |
| Executar snippet | Pressione Command+O para abrir o menu de comandos, digite ! seguido pelo nome do script e pressione Enter | Pressione Control+O para abrir o menu de comandos, digite ! seguido pelo nome do script e pressione Enter |
Atalhos do teclado do painel "Elementos"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Desfazer alteração | Command+Z | Control+Z |
| Refazer alteração | Command+Shift+Z | Control+Y |
| Selecionar o elemento acima / abaixo do elemento selecionado no momento | Up Arrow / Down Arrow | Up Arrow / Down Arrow |
| Expandir o nó selecionado no momento. Se o nó já estiver expandido, esse atalho vai selecionar o elemento abaixo dele | Right Arrow | Right Arrow |
| Recolher o nó selecionado no momento. Se o nó já estiver recolhido, esse atalho vai selecionar o elemento acima dele | Left Arrow | Left Arrow |
| Expandir ou recolher o nó selecionado no momento e todos os filhos dele | Mantenha Option pressionado e clique no ícone de seta ao lado do nome do elemento | Mantenha Control+Alt pressionado e clique no ícone de seta ao lado do nome do elemento |
| Ativar/desativar o modo Editar atributos no elemento selecionado no momento | Enter | Enter |
| Selecionar o próximo / atributo anterior depois de entrar no modo Editar atributos | Tab / Shift+Tab | Tab / Shift+Tab |
| Ocultar o elemento selecionado no momento | H | H |
| Ativar/desativar o modo Editar como HTML no elemento selecionado no momento | Function+F2 | F2 |
Atalhos do teclado do painel "Estilos"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Acessar a linha em que um valor de propriedade é declarado | Mantenha Command pressionado e clique no valor da propriedade | Mantenha Control pressionado e clique no valor da propriedade |
| Alternar entre as regras de CSS | Up Arrow / Down Arrow | Up Arrow / Down Arrow |
| Alternar entre as propriedades e os controles nos valores de propriedade em uma regra de CSS | Left Arrow / Right Arrow | Left Arrow / Right Arrow |
| Abrir a dica de valor de CSS ao focar uma função em um valor de propriedade (por exemplo, var, calc, clamp etc., identificados por um sublinhado pontilhado) | Option+ Down Arrow | Alt+Down Arrow |
| Mudar a representação de um valor de cor (por exemplo, RGB, hexadecimal, oklch etc.) | Mantenha Shift pressionado e clique na caixa Visualização de cores ao lado do valor | Mantenha Shift pressionado e clique na caixa Visualização de cores ao lado do valor |
| Editar a próxima / propriedade ou valor anterior | Clique em um nome ou valor de propriedade e pressione Tab / Shift+Tab | Clique em um nome ou valor de propriedade e pressione Tab / Shift+Tab |
| Incrementar / diminuir um valor de propriedade em 0,1 | Clique em um valor e pressione Option+Up Arrow / Option+Down Arrow | Clique em um valor e pressione Alt+Up Arrow / Alt+Down Arrow |
| Incrementar / diminuir um valor de propriedade em 1 | Clique em um valor e pressione Up Arrow / Down Arrow | Clique em um valor e pressione Up Arrow / Down Arrow |
| Incrementar / diminuir um valor de propriedade em 10 | Clique em um valor e pressione Shift+Up Arrow / Shift+Down Arrow | Clique em um valor e pressione Shift+Up Arrow / Shift+Down Arrow |
| Incrementar / diminuir um valor de propriedade em 100 | Clique em um valor e pressione Command+Up Arrow / Command+Down Arrow | Clique em um valor e pressione Control+Up Arrow / Control+Down Arrow |
| Alternar entre as representações de graus (deg), gradianos (grad), radianos (rad) e voltas (turn) de um valor de ângulo | Mantenha Shift pressionado e clique na caixa Visualização de ângulo ao lado do valor | Mantenha Shift pressionado e clique na caixa Visualização de ângulo ao lado do valor |
| Incrementar / diminuir um valor de ângulo em 1 | Clique na caixa Visualização de ângulo ao lado do valor e pressione Up Arrow / Down Arrow | Clique na caixa Visualização de ângulo ao lado do valor e pressione Up Arrow / Down Arrow |
| Incrementar / diminuir um valor de ângulo em 10 | Clique na caixa Visualização de ângulo ao lado do valor e pressione Shift+Up Arrow / Shift+Down Arrow | Clique na caixa Visualização de ângulo ao lado do valor e pressione Shift+Up Arrow / Shift+Down Arrow |
| Incrementar / diminuir um valor de ângulo em 15 | Clique na caixa Visualização de ângulo ao lado do valor e pressione Shift, clique / deslize o mouse na sobreposição do relógio de ângulo | Clique na caixa Visualização de ângulo ao lado do valor e pressione Shift, clique / deslize o mouse na sobreposição do relógio de ângulo |
Atalhos do teclado do painel "Origens"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Pausar a execução do script (se estiver em execução) ou retomar (se estiver pausado) | F8 ou Command+\ | F8 ou Control+\ |
| Ignorar a próxima chamada de função | F10 ou Command+' | F10 ou Control+' |
| Entrar na próxima chamada de função | F11 ou Command+; | F11 ou Control+; |
| Sair da função atual | Shift+F11 ou Command+Shift+; | Shift+F11 ou Control+Shift+; |
| Continuar até uma determinada linha de código enquanto estiver pausado | Mantenha Command pressionado e clique na linha de código | Mantenha Control pressionado e clique na linha de código |
| Selecionar o frame de chamada abaixo / acima do frame selecionado no momento | Control+. / Control+, | Control+. / Control+, |
| Salvar alterações nas modificações locais | Command+S | Control+S |
| Salvar todas as alterações | Command+Option+S | Control+Alt+S |
| Ir para a linha | Control+G | Control+G |
| Acessar um número de linha do arquivo aberto no momento | Pressione Command+O para abrir o menu de comandos, digite : seguido pelo número da linha e pressione Enter | Pressione Control+O para abrir o menu de comandos, digite : seguido pelo número da linha e pressione Enter |
| Acessar uma coluna do arquivo aberto no momento (por exemplo, linha 5, coluna 9) | Pressione Command+O para abrir o menu de comandos, digite :, depois o número da linha, outro :, o número da coluna e pressione Enter | Pressione Control+O para abrir o menu de comandos, digite :, depois o número da linha, outro :, o número da coluna e pressione Enter |
| Acessar uma declaração de função (se o arquivo aberto no momento for HTML ou um script) ou um conjunto de regras (se o arquivo aberto no momento for uma folha de estilo) | Pressione Command+Shift+O e digite o nome da declaração / conjunto de regras ou selecione na lista de opções | Pressione Control+Shift+O e digite o nome da declaração / conjunto de regras ou selecione na lista de opções |
| Fechar a guia ativa | Option+W | Alt+W |
| Abrir a próxima ou a guia anterior | Function+Command+Up ou Down | Control+Page Up ou Page Down |
| Ativar/desativar a barra lateral Navegação à esquerda | Command+Shift+Y | Control+Shift+Y |
| Ativar/desativar a barra lateral Debugger à direita | Command+Shift+H | Control+Shift+H |
Atalhos do teclado do editor de código
| Ação | Mac | Windows / Linux |
|---|---|---|
| Excluir todos os caracteres da última palavra, até o cursor | Option+Delete | Control+Delete |
| Adicionar ou remover um ponto de interrupção de linha de código | Foque o cursor na linha e pressione Command+B | Foque o cursor na linha e pressione Control+B |
| Abrir a caixa de diálogo de edição de ponto de interrupção para editar pontos de interrupção condicionais ou pontos de registro | Foque o cursor na linha e pressione Command+Alt+B | Foque o cursor na linha e pressione Control+Alt+B |
| Abrir a caixa de diálogo de ponto de interrupção condicional | Command+clique em um número de linha | Control+clique em um número de linha |
| Abrir a caixa de diálogo de logpoint | Command+Shift+clique em um número de linha | Control+Shift+clique em um número de linha |
| Acessar o colchete correspondente | Control+M | Control+M |
| Ativar/desativar o comentário de linha única. Se várias linhas forem selecionadas, o DevTools vai adicionar um comentário ao início de cada linha | Command+/ | Control+/ |
| Selecionar / desmarcar a próxima ocorrência da palavra em que o cursor está. Cada ocorrência é destacada simultaneamente | Command+D / Command+U | Control+D / Control+U |
Atalhos do teclado do painel Network
| Ação | Mac | Windows / Linux |
|---|---|---|
| Pesquisar cabeçalhos, payloads e respostas | Command+F | Control+F |
| Iniciar / parar gravação | Command+E | Control+E |
| Gravar uma atualização | Command+R | Control+R |
| Ocultar os detalhes de uma solicitação selecionada | Escape | Escape |
Atalhos do teclado do painel "Performance"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Iniciar / parar gravação | Command+E | Control+E |
| Salvar gravação | Command+S | Control+S |
| Carregar gravação | Command+O | Control+O |
Atalhos do teclado do painel "Memória"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Iniciar / parar gravação | Command+E | Control+E |
Atalhos do teclado do painel "Console"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Aceitar sugestão de preenchimento automático | Right Arrow ou Tab | Right Arrow ou Tab |
| Rejeitar sugestão de preenchimento automático | Escape | Escape |
| Navegar na lista de preenchimento automático para cima ou para baixo | Up / Down ou Control+P / N | Up / Down ou Control+P / N |
| Receber a instrução anterior | Up Arrow | Up Arrow |
| Receber a próxima instrução | Down Arrow | Down Arrow |
| Focar no console | Control+` | Control+` |
| Limpar o console | Command+K ou Option+L | Control+L |
| Forçar uma entrada de várias linhas. O DevTools detecta cenários de várias linhas por padrão, então esse atalho geralmente não é necessário | Shift+Return | Shift+Enter |
| Executar | Return | Enter |
| Expandir todas as subpropriedades de um objeto registrado no console | Mantenha Alt pressionado e clique em Expandir > | Mantenha Alt pressionado e clique em Expandir > |
Atalhos do teclado da guia "Pesquisar"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Expandir/recolher todos os resultados da pesquisa | Command+Option+{ ou } | Control+Shift+{ ou } |
Atalhos do teclado do painel "Gravador"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Iniciar ou parar a gravação | Command+E | Control+E |
| Reproduzir gravação | Command+Enter | Control+Enter |
| Copiar gravação ou etapa selecionada | Command+C | Control+C |
| Alternar visualização de código | Command+B | Control+B |
Atalhos do teclado do painel "Camadas"
| Ação | Mac | Windows / Linux |
|---|---|---|
| Mover o diagrama ao longo dos eixos X e Y | W (para cima), A (para a esquerda), S (para baixo), D (para a direita) | W (para cima), A (para a esquerda), S (para baixo), D (para a direita) |
| Ativar/desativar o modo de movimentação | X | X |
| Ativar/desativar o modo de rotação | V | V |
| Redefinir a posição e a rotação do diagrama | 0 | 0 |
| Aumentar o zoom no diagrama | Shift++ ou roda do mouse para cima | Shift++ ou roda do mouse para cima |
| Diminuir o zoom do diagrama | Shift+- ou roda do mouse para baixo | Shift+- ou roda do mouse para baixo |