Visão geral do DevTools

O navegador Microsoft Edge vem com ferramentas internas de desenvolvimento na Web, chamadas Microsoft Edge DevTools. O DevTools é um conjunto de ferramentas de desenvolvimento na Web que aparece ao lado de uma página da Web renderizada no navegador.

Conteúdo detalhado:

Introdução

O DevTools fornece uma maneira poderosa de inspecionar e depurar páginas da Web e aplicativos Web. Você pode até editar arquivos de origem e criar projetos de site, tudo dentro do ambiente DevTools.

Com o DevTools, você pode fazer o seguinte:

  • Inspecione, ajuste e altere os estilos dos elementos na página da web usando ferramentas dinâmicas com interface visual. Inspecione onde o navegador armazenou o conteúdo para construir a página da Web, incluindo .html, .css, .jse .png formatos de arquivo.

  • Emule como seu site se comporta em diferentes dispositivos e simule um ambiente móvel, completo com diferentes condições de rede. Inspecione o tráfego de rede e veja a localização dos problemas.

  • Depure seu JavaScript usando a depuração de ponto de interrupção e com o console ao vivo. Encontre problemas de memória e de renderização com seus aplicativos Web.

  • Encontre problemas de acessibilidade, desempenho, compatibilidade e segurança em seus produtos e use o DevTools para corrigir os problemas de acessibilidade encontrados.

  • Use um ambiente de desenvolvimento para sincronizar alterações no DevTools com o sistema de arquivos e da Web.

Vídeo: Entender a interface do usuário do DevTools

Imagem em miniatura do vídeo

Este vídeo um pouco mais antigo, de setembro de 2022, mostra a interface do usuário herdada para DevTools:

  • Em vez da Barra de Atividades, o vídeo mostra a barra de ferramentas principal herdada.
  • Em vez do painel Visualização Rápida (na parte inferior do DevTools), o vídeo mostra a Gaveta.

Abrir DevTools

No Microsoft Edge, você pode abrir o DevTools usando o mouse ou o teclado, de qualquer uma das seguintes maneiras. A ferramenta aberta depende de como você abre o DevTools.

Principais maneiras:

Ação Ferramenta resultante
Clique com o botão direito do mouse em qualquer item em uma página da Web e selecione Inspecionar. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página clicado com o botão direito do mouse.
Pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). A ferramenta usada anteriormente ou a ferramenta Bem-vindo .
Pressione F12. A ferramenta usada anteriormente ou a ferramenta Bem-vindo .

Formas adicionais:

Ação Ferramenta resultante
Na barra de ferramentas do Microsoft Edge, selecione Configurações e mais (O ícone 'Configurações e mais') >Mais ferramentasFerramentas>de desenvolvedor. A ferramenta usada anteriormente ou a ferramenta Bem-vindo .
Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console .
Pressione Ctrl+Shift+C (Windows, Linux) ou Command+Option+C (macOS). A ferramenta Elementos , com a árvore DOM expandida para mostrar o <body> elemento.
Pressione Shift+F10 para abrir o menu de atalho. Para selecionar o comando Inspecionar , pressione Seta para Cima e Enter. A ferramenta Elementos , com a árvore DOM expandida para mostrar o <html> elemento.
Pressione Tab ou Shift+Tab para colocar o foco em um elemento da página. Em seguida, pressione Shift+F10 para abrir o menu de clique com o botão direito. Para selecionar o comando Inspecionar , pressione Seta para Cima e Enter. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página focado.

Abra o DevTools clicando com o botão direito do mouse em um item em uma página da Web

Uma boa maneira de abrir o DevTools é clicar com o botão direito do mouse em um item em uma página da Web e selecionar Inspecionar:

Clicando com o botão direito do mouse no link Sobre nós em uma página da Web de demonstração e selecionando o comando Inspecionar

O DevTools é aberto, com o elemento clicado com o botão direito realçado na árvore DOM na ferramenta Elementos :

O DevTools foi aberto no lado direito do Microsoft Edge, com um elemento DOM selecionado na árvore DOM na ferramenta Elementos

Abra o DevTools usando a barra de ferramentas do Microsoft Edge

Na barra de ferramentas do Microsoft Edge, selecione Configurações e mais (...) >Mais ferramentasFerramentas>de desenvolvedor:

O menu 'Configurações e mais' do Microsoft Edge, com o submenu 'Mais ferramentas' e o comando 'Ferramentas de desenvolvedor'

Faça com que o DevTools abra automaticamente quando você abrir uma nova guia

Para que o DevTools seja aberto automaticamente sempre que você abrir uma nova guia no navegador:

  1. Na linha de comando, abra o Microsoft Edge, passando o --auto-open-devtools-for-tabs sinalizador, da seguinte maneira:

    Prompt de comando do Windows:

    start msedge --auto-open-devtools-for-tabs

    Windows PowerShell:

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

    Terminal macOS:

    /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs

    shell bash no Linux:

    microsoft-edge --auto-open-devtools-for-tabs
Desativando o início rápido

Importante: Não deve haver processos do Microsoft Edge em execução ao iniciar via auto-open-devtools-for-tabs, portanto, talvez seja necessário desabilitar o início rápido no edge://settings/system.

O recurso de início rápido mantém um processo mínimo do Microsoft Edge em execução em segundo plano. Isso interfere no recurso e precisaria ser desabilitado auto-open-devtools-for-tabs para usá-lo. Para obter mais informações, consulte Obter ajuda com o início rápido.

Desativando o atalho de teclado F12

Para evitar que pressionar F12 abra o DevTools:

  1. No Microsoft Edge, vá para edge://settings/system.

  2. Role para baixo até a seção Ferramentas de desenvolvedor e, em seguida, desative a tecla Usar F12 para abrir a alternância de Ferramentas de desenvolvedor.

    A página Configurações do Edge, com a seção Ferramentas de desenvolvedor e o botão para desabilitar a tecla F12

Suporte ao teclado

Você pode interagir com o DevTools usando o mouse ou o teclado. Os atalhos do teclado fornecem uma maneira rápida de acessar a funcionalidade e são necessários para acessibilidade. Várias ferramentas estão cada vez mais acessíveis por meio do teclado e tecnologias assistivas, como leitores de tela.

Veja Atalhos de teclado e Navegue no DevTools com tecnologia adaptativa.

Alterar onde o DevTools está encaixado no navegador

Você pode encaixar o DevTools à direita, à esquerda ou na parte inferior do navegador ou desencaixá-lo em uma janela separada. Consulte Alterar o posicionamento do DevTools (Desencaixar, Encaixar na parte inferior, Encaixar à esquerda).

Ampliar ou reduzir o DevTools

A interface do usuário do DevTools é implementada usando HTML e CSS, como páginas da Web, para que você possa ampliar e reduzir o zoom usando os atalhos de teclado padrão. Os níveis de zoom para DevTools e a página renderizada são independentes.

Para ampliar a parte do DevTools do navegador:

  1. Se o foco ainda não estiver no DevTools, clique em algum lugar no DevTools.
  2. Pressione Ctrl++ ou Ctrl+- (Windows ou Linux). Ou pressione Command++ ou Command+- (macOS).

DevTools reduzido

Para ampliar a página renderizada, clique na página e use os mesmos atalhos de teclado acima.

Para restaurar o zoom para 100%:

  1. Certifique-se de que o foco esteja na parte desejada do navegador, DevTools ou a página renderizada.
  2. Pressione Ctrl+0 ou Ctrl+NumPad0 (Windows ou Linux) ou Command+0 (macOS).

Para ampliar as configurações do DevTools:

  1. Em Configurações do DevTools, clique em Fechar (x) no canto superior direito.
  2. Altere o nível de zoom do DevTools, conforme descrito acima.
  3. Clique no botão Configurações (ícone Configurações).

Para ampliar o DevTools usando o Menu de Comando:

  1. Clique no botão de menu Personalizar e controlar o DevTools (ícone Personalizar) e selecione Executar comando.
  2. No Menu de Comando, comece a digitar zoom e selecione um comando de zoom:
    • Restaurar nível de zoom
    • Ampliar
    • Reduzir

Visão geral da interface do usuário

A interface do usuário do DevTools tem as seguintes áreas principais:

  • A Barra de Atividades na parte superior, que contém ícones usados para acessar ferramentas, configurações, documentação e muito mais.

    • A área de ferramentas atual, onde aparece a ferramenta selecionada na Barra de Atividades no momento.

  • A barra de ferramentas de Visualização Rápida , na parte inferior, que contém guias usadas para acessar ferramentas.

    • A área de ferramenta inferior, onde aparece a ferramenta selecionada na barra de ferramentas Visualização Rápida .

Microsoft Edge, com DevTools aberto na lateral, com as 4 áreas principais da interface do usuário realçadas

Por padrão, a Barra de Atividades contém as seguintes ferramentas:

  • Botão de alternância da ferramenta Inspecionar (ícone da ferramenta Inspecionar).

  • Botão da ferramenta de Emulação de Dispositivo (ícone de Emulação de Dispositivo).

  • Ferramenta de boas-vindas (ícone da ferramenta de boas-vindas).

  • Ferramenta Elementos (ícone da ferramenta Elementos).

  • Ferramenta Console (Ícone da ferramenta Console).

  • Ferramenta Fontes (ícone da ferramenta Fontes).

  • Ferramenta Rede (ícone da ferramenta Rede).

  • Ferramenta Desempenho (Ícone da ferramenta Desempenho).

  • Ferramenta Memória (Ícone da ferramenta Memória).

  • Ferramenta de aplicativo (Ícone de ferramenta de aplicativo).

Por padrão, a barra de ferramentas Visualização Rápida contém as seguintes ferramentas:

  • Ferramenta Console (Ícone da ferramenta Console).

  • Ferramenta Issues (ícone da ferramenta Issues).

Na Barra de Atividades, as guias de ferramentas contêm o nome e o ícone da ferramenta ou apenas o ícone da ferramenta, dependendo da largura da janela do DevTools. Se a janela for larga o suficiente, o nome e o ícone da ferramenta serão exibidos. Se a janela for muito estreita, somente o ícone da ferramenta aparecerá e o nome da ferramenta aparecerá quando você passar o mouse sobre o ícone da ferramenta.

Alterar a localização da Visualização Rápida

Por padrão, o painel Visualização Rápida está na parte inferior do DevTools. Você também pode colocar o painel Visualização Rápida no lado direito do DevTools.

Para exibir o painel Visualização rápida , pressione Esc.

Para alterar a localização do painel Visualização rápida , na barra de ferramentas Visualização rápida , clique no botão Visualização rápida do Dock à direita (o ícone ") ou no botão Visualização rápida do Dock na parte inferior :

O ícone de Visualização Rápida do Dock, exibido na barra de ferramentas de Visualização Rápida, na parte inferior do DevTool

Recursos da Barra de Atividades

O DevTools oferece uma quantidade incrível de poder para inspecionar, depurar e alterar o site atualmente exibido no navegador. A maioria das ferramentas exibe as alterações ao vivo. As atualizações ao vivo tornam as ferramentas úteis para refinar a aparência e a navegação ou funcionalidade de uma página da Web sem a necessidade de atualizá-la ou construí-la.

Painéis de ferramentas com guias contendo guias e páginas

Além da ferramenta Inspecionar e da Emulação de Dispositivo, o DevTools é dividido em um conjunto de ferramentas com guias, como a ferramenta Elementos , a ferramenta Console e a ferramenta Fontes . No Menu de Comando, as ferramentas são chamadas de painéis. A guia de uma ferramenta contém um painel que contém a interface do usuário da ferramenta.

Guias de nível superior:

As ferramentas são organizadas em um conjunto de guias na Barra de Atividades e na barra de ferramentas de Visualização Rápida . A maioria das ferramentas também é chamada de painéis. Um painel é a interface do usuário interna de uma ferramenta. Uma ferramenta tem uma guia que pode estar presente na Barra de Atividades e na barra de ferramentas de Visualização Rápida .

Guias de nível inferior:

Dentro do painel de algumas ferramentas, há um ou mais conjuntos de guias (painéis com guias). Por exemplo, a ferramenta Elementos contém um conjunto de guias que inclui as guias Estilos, Ouvintes de Eventos e Acessibilidade . Para outras ferramentas, o painel da ferramenta tem páginas listadas ao longo do lado esquerdo.

A Barra de Atividades e a barra de ferramentas de Visualização Rápida

Há duas barras de ferramentas: a Barra de Atividades na parte superior do DevTools e a barra de ferramentas de Visualização Rápida na parte inferior quando você pressiona Esc.

A Barra de Atividades contém os seguintes recursos:

  • Ferramentas de ícone:
    • Botão de alternância da ferramenta Inspecionar (ícone da ferramenta Inspecionar).
    • Botão Emulação do Dispositivo (Ícone de Emulação do Dispositivo).

  • Guias de ferramentas:

    • Ferramenta de boas-vindas .
    • Ferramenta Elementos . Permanente.
    • Ferramenta Console . Permanente.
    • Ferramenta Fontes . Permanente.
    • Ferramenta Rede .
    • Ferramenta Desempenho .
    • Ferramenta Memória .
    • Ferramenta de aplicativo .

  • Ícones:

    • Botão Mais ferramentas (ícone Mais ferramentas).
    • Personalizar e controlar o botão de menu DevTools (ícone Personalizar).
    • Botão Ajuda (ícone de ajuda).
    • Fechar Botão DevTools (Fechar ícone de DevTools).

A Barra de Atividades, com rótulos que identificam seus recursos

Os recursos da Barra de Atividades são descritos abaixo.

Fixar e reorganizar as ferramentas na Barra de Atividades

Além das ferramentas permanentes Elementos, Console e Fontes , você pode controlar quais ferramentas aparecem na Barra de Atividades para personalizar o DevTools para se concentrar em suas atividades atuais.

  1. Clique no botão Mais ferramentas (ícone Mais ferramentas) para listar todas as ferramentas disponíveis:

    O menu Mais ferramentas na Barra de Atividades, com a lista expandida de todas as ferramentas

  2. Selecione uma ferramenta para fixá-la na Barra de Atividades. A ferramenta estará presente na Barra de Atividades sempre que o DevTools for aberto.

Se não houver espaço suficiente na Barra de Atividades para exibir todas as ferramentas fixadas, as ferramentas que estão abertas, mas não exibidas, serão movidas para o menu Mais ferramentas :

O menu Mais ferramentas, mostrando algumas ferramentas fixadas que não cabiam na Barra de Atividades

Para desafixar uma ferramenta da Barra de Atividades, clique com o botão direito do mouse na guia da ferramenta e selecione Remover da Barra de Atividades:

O menu de clique com o botão direito do mouse na guia da ferramenta Desempenho para remover a ferramenta da Barra de Atividades

Ferramenta Inspecionar

Ao clicar no botão Inspecionar ferramenta (ícone da ferramenta Inspecionar), você pode selecionar um elemento na página da Web atual. Enquanto a ferramenta Inspecionar estiver ativa, você pode mover o mouse sobre diferentes partes da página da Web para obter informações detalhadas sobre os elementos da página, juntamente com uma sobreposição multicolorida que mostra as dimensões do layout, o preenchimento e a margem do elemento da página.

A ferramenta Inspecionar ao passar o mouse sobre o primeiro título deste artigo

Emulação do dispositivo

Clique no botão Emulação do dispositivo (ícone de emulação do dispositivo) para exibir o site atual em um modo de dispositivo emulado. A ferramenta de Emulação de Dispositivo permite que você execute e teste como seu produto reage quando você redimensiona o navegador. Também fornece uma estimativa do layout e do comportamento em um dispositivo móvel.

Exibição do DevTools deste artigo em um telefone celular emulado

Consulte Emular dispositivos móveis (Emulação de dispositivo).

Ferramenta de boas-vindas

Inclui informações sobre os novos recursos do DevTools, como contatar a equipe e fornece informações sobre determinados recursos.

Ferramenta Elementos

Permite inspecionar, editar e depurar seu HTML e CSS. Você pode editar na ferramenta enquanto exibe as alterações ao vivo no navegador.

A ferramenta Elementos está sempre presente na Barra de Atividades.

Ferramenta Console

Na ferramenta Console , você pode:

  • Exiba e filtre mensagens registradas de solicitações de rede ou de instruções de log JavaScript.
  • Insira instruções JavaScript para avaliar em tempo real. As expressões são avaliadas no contexto atual, como quando o depurador JavaScript na ferramenta Fontes é pausado em um ponto de interrupção.

A ferramenta Console está sempre presente na Barra de Atividades e na barra de ferramentas de Exibição Rápida .

Consulte Console.

Ferramenta Fontes

A ferramenta Fontes é um editor de código e depurador de JavaScript. Você pode editar projetos, manter trechos e depurar seu projeto atual.

A ferramenta Fontes está sempre presente na Barra de Atividades.

Ferramenta Rede

A ferramenta Rede permite monitorar e inspecionar solicitações ou respostas da rede e do cache do navegador. É possível filtrar solicitações e respostas para atender às suas necessidades e simular diferentes condições de rede.

Consulte Inspecionar atividade de rede.

Ferramenta Desempenho

Consulte Analisar o desempenho do tempo de execução (tutorial).

Ferramenta Memória

Consulte Corrigir problemas de memória.

Ferramenta aplicativo

Consulte Exibir, editar e excluir cookies.

Botão Mais Ferramentas

Para adicionar uma ferramenta à Barra de Atividades, clique no botão Mais ferramentas (ícone Mais ferramentas).

Personalizar e controlar o menu DevTools

O botão Personalizar e controlar o DevTools (Personalizar e controlar o DevTools) abre um menu suspenso para:

  • Encaixe DevTools.
  • Encaixar a Barra de Atividades.
  • Selecione um tema.
  • Mostrar atalhos de teclado.
  • Alterar as configurações do DevTools.
  • Abra a emulação do dispositivo.
  • Alterne o painel Visualização Rápida .
  • Execute um comando.
  • Pesquise o código.
  • Abra um arquivo.

Botão Ajuda

O botão Ajuda (ícone de Ajuda) abre um menu suspenso com os seguintes itens:

Botão Fechar DevTools

Clique no botão Fechar DevTools (ícone Fechar DevTools) no canto superior direito do DevTools para fechar o DevTools e usar a janela inteira para exibir a página da Web atual.

Recursos da barra de ferramentas Visualização Rápida

Use o painel Visualização rápida para abrir uma segunda ferramenta abaixo ou à direita da ferramenta que já está selecionada na Barra de atividades:

  1. Selecione uma ferramenta na Barra de Atividades.

  2. Na barra de ferramentas Visualização Rápida , clique em Mais ferramentas (ícone Mais ferramentas) e selecione uma ferramenta diferente na lista.

Por exemplo, abra a ferramenta Renderização no painel Visualização rápida , abaixo da ferramenta Rede que está aberta na Barra de atividades:

DevTools com a ferramenta Rede na parte superior e a ferramenta Renderização na parte inferior

Para ocultar ou expandir a Visualização Rápida, clique em Recolher Visualização Rápida (ícone Recolhido) ou Expandir Visualização Rápida (ícone de expansão), ou pressione a tecla Esc .

Visão geral de todas as ferramentas

Para obter um resumo de cada ferramenta, consulte Sobre a lista de ferramentas.

Ferramenta, guia ou painel

As palavras "ferramenta", "guia" e "painel" são um tanto intercambiáveis. No Menu de Comando, as ferramentas são chamadas de painéis; por exemplo, a ferramenta Elementos é chamada de painel Elementos . Para alternar para a ferramenta Elementos , clique na guia Elementos . Há um botão Mais ferramentas (ícone Mais ferramentas) e uma lista usada para selecionar ferramentas. As ferramentas do DevTools também são chamadas de painéis do DevTools.

Você pode personalizar cada uma das ferramentas e o conteúdo de uma ferramenta pode mudar com base no contexto.

Sobre a Barra de Atividades e ferramentas de Visualização Rápida

O botão Mais ferramentas (ícone Mais ferramentas) é exibido na Barra de Atividades e na barra de ferramentas de Visualização Rápida . Quando você abre uma ferramenta na lista Mais ferramentas localizada na Barra de Atividades, a ferramenta aparece na Barra de Atividades. Quando você abre uma ferramenta na lista Mais ferramentas na barra de ferramentas Visualização rápida , a ferramenta é aberta no painel Visualização rápida .

Tarefa Etapas
Abra uma ferramenta na Barra de Atividades na parte superior do DevTools Na Barra de Atividades na parte superior do DevTools, clique em Mais ferramentas (ícone Mais ferramentas) e selecione uma ferramenta.
Abrir uma ferramenta na barra de ferramentas Visualização Rápida Quando o DevTools estiver em foco, pressione Esc para mostrar a barra de ferramentas de Exibição Rápida , caso ela ainda não tenha sido mostrada. Na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas (ícone Mais ferramentas) e selecione uma ferramenta.
Mover uma ferramenta da barra de ferramentas Visualização Rápida para a Barra de Atividades Quando o DevTools estiver em foco, pressione Esc para mostrar a Exibição Rápida. Na barra de ferramentas Visualização Rápida , clique com o botão direito do mouse na guia da ferramenta e selecione Mover para a Barra de Atividades superior.
Mover uma ferramenta da Barra de Atividades para a barra de ferramentas de Visualização Rápida Na Barra de Atividades, clique com o botão direito do mouse na guia da ferramenta e selecione Mover para a Exibição Rápida inferior ou Mover para a Exibição Rápida lateral.
Abra uma ferramenta em sua barra de ferramentas padrão (Barra de Atividades ou Exibição Rápida) Quando o DevTools estiver em foco, abra o Menu de Comando pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). Digite o nome da ferramenta e selecione um comando Mostrar <ferramenta> .

Além da Barra de Atividades e das ferramentas de Visualização Rápida , o DevTools inclui as seguintes ferramentas:

Confira também

Dica poderosa: Usar o Menu de Comando

O DevTools fornece muitos recursos e funcionalidades para usar com seu site. Você pode acessar as diferentes partes do DevTools de várias maneiras, mas geralmente uma maneira rápida é usar o Menu de Comando.

o Menu de Comando no DevTools

No Menu de Comando, as ferramentas são chamadas de "painéis"; por exemplo, a ferramenta Elementos é chamada de painel Elementos . Para alternar para a ferramenta Elementos , selecione a guia Elementos .

  1. Para abrir o Menu de Comando, siga um destes procedimentos:

    • Clique no botão Personalizar e controlar o DevTools (Personalizar e controlar o DevTools) e selecione Executar comando.
    • Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).

    O Menu de Comando permite que você digite comandos para exibir, ocultar ou executar recursos no DevTools.

  2. No Menu de Comando, comece a digitar o nome de uma ferramenta, como alterações, e selecione um comando Mostrar , como Mostrar Alterações. O Menu de Comandos exibe os comandos correspondentes:

    O menu de comandos exibe as opções depois que você digita 'cha', incluindo 'Mostrar ferramenta de alterações na Exibição rápida'

  3. Pressione Enter para selecionar um comando Mostrar , como Mostrar Alterações. A ferramenta selecionada é aberta no painel Visualização rápida , na parte inferior:

    O DevTools com a ferramenta Alterações aberta no painel Visualização Rápida

    A ferramenta Alterações é útil quando você edita CSS. Neste exemplo, o Menu de Comando fornece uma alternativa rápida para selecionar Mais ferramentas (ícone Mais ferramentas) e, em seguida, selecionar Alterações. Este exemplo também fornece uma alternativa para editar um .js arquivo na ferramenta Fontes e, em seguida, clicar com o botão direito do mouse e selecionar Modificações locais.

Consulte também Executar comandos com o menu Comando do Microsoft Edge DevTools.

Personalização do DevTools

Você pode personalizar o DevTools para atender às suas necessidades da maneira como você trabalha. Para alterar as configurações, clique no botão Personalizar e controlar o DevTools (Personalizar e controlar o DevTools) e selecione Configurações (ícone Configurações) ou pressione F1.

Na página Preferências de Configurações>, você pode alterar várias partes do DevTools. Por exemplo, você pode usar a configuração de idioma da interface do usuário do navegador para usar o mesmo idioma no DevTools usado em seu navegador. Para outro exemplo, use a configuração Tema para alterar o tema de cores do DevTools.

Todas as configurações no DevTools

Você também pode alterar as configurações de recursos avançados, como:

  • Adicionar arquivos locais a um Workspace.
  • Filtre o código da biblioteca usando a Lista de Ignorados.
  • Defina os dispositivos que deseja incluir na simulação do dispositivo e modo de teste. Para obter mais informações, consulte Emular dispositivos móveis (Emulação de dispositivo).
  • Selecione um perfil de limitação de rede.
  • Defina locais simulados.
  • Personalize os atalhos do teclado. Por exemplo, para usar os mesmos atalhos no DevTools e no Visual Studio Code, selecione Corresponder aos atalhos do presetVisual>Studio Code.

Todos os atalhos de teclado e o menu para corresponder a cada um dos atalhos no Visual Studio Code

Experimentando recursos experimentais

A equipe do DevTools fornece novos recursos como experimentos no DevTools. Você pode ativar ou desativar cada um dos experimentos. Para ver a lista completa de recursos experimentais no Microsoft Edge DevTools, no DevTools, selecione Configurações (ícone Configurações) e, em seguida, selecione Experimentos.

Para visualizar os recursos mais recentes que chegam ao DevTools, baixe o Microsoft Edge Canary, que é compilado todas as noites.

Veja também:

Confira também

  • Last updated on