Descrição geral das DevTools
O browser Microsoft Edge inclui ferramentas de desenvolvimento Web incorporadas, denominadas Microsoft Edge DevTools. DevTools é um conjunto de ferramentas de desenvolvimento Web que aparece junto a uma página Web composta no browser. O DevTools fornece uma forma avançada de inspecionar e depurar páginas Web e aplicações Web. Pode até editar ficheiros de origem e criar projetos de site, tudo no ambiente DevTools.
Com o DevTools, pode fazer o seguinte:
Inspecione, ajuste e altere os estilos dos elementos na página Web com ferramentas dinâmicas com uma interface visual. Inspecione onde o browser armazenou conteúdo para construir a página Web, incluindo
.htmlos formatos de ficheiro ,.css,.jse.png.Emula o comportamento do seu site em diferentes dispositivos e simula 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 o JavaScript com a depuração de pontos de interrupção e com a consola dinâmica. Encontre problemas de memória e problemas de composição com as suas aplicações Web.
Encontre problemas de acessibilidade, desempenho, compatibilidade e segurança nos seus produtos e utilize DevTools para corrigir os problemas de acessibilidade encontrados.
Utilize um ambiente de desenvolvimento para sincronizar as alterações no DevTools com o sistema de ficheiros e a partir da Web.
Vídeo: Compreender a interface de utilizador do DevTools
Este vídeo de setembro de 2022, ligeiramente mais antigo, mostra a IU legada para DevTools:
- Em vez da Barra de Atividade, o vídeo mostra a barra de ferramentas principal legada.
- Em vez do painel Vista Rápida (na parte inferior de DevTools), o vídeo mostra a Gaveta.
Abrir DevTools
No Microsoft Edge, pode abrir DevTools com o rato ou teclado, de qualquer uma das seguintes formas. A ferramenta aberta depende da forma como abre o DevTools.
Principais formas:
| Ação | Ferramenta resultante |
|---|---|
| Clique com o botão direito do rato em qualquer item numa página Web e, em seguida, selecione Inspecionar. | A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página com o botão direito do rato. |
| Prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). | A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas . |
| Prima F12. | A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas . |
Formas adicionais:
| Ação | Ferramenta resultante |
|---|---|
Na barra de ferramentas do Microsoft Edge, selecione Definições e muito mais ( ) >Mais ferramentas Ferramentas> deprogramação. |
A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas . |
| Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). | A ferramenta Consola . |
| Prima Ctrl+Shift+C (Windows, Linux) ou Comando+Opção+C (macOS). | A ferramenta Elementos , com a árvore DOM expandida para mostrar o <body> elemento . |
| Prima Shift+F10 para abrir o menu de contexto. Para selecionar o comando Inspecionar , prima Seta Para Cima e, em seguida, Enter. | A ferramenta Elementos , com a árvore DOM expandida para mostrar o <html> elemento . |
| Prima a Tecla de Tabulação ou Shift+Tecla de Tabulação para colocar o foco num elemento de página. Em seguida, prima Shift+F10 para abrir o menu de contexto. Para selecionar o comando Inspecionar , prima Seta Para Cima e, em seguida, Enter. | A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página destaques. |
Abra DevTools ao clicar com o botão direito do rato num item numa página Web
Uma boa forma de abrir o DevTools é clicar com o botão direito do rato num item numa página Web e, em seguida, selecionar Inspecionar:
O DevTools é aberto, com o elemento com o botão direito do rato realçado na árvore DOM na ferramenta Elementos :
Abra o DevTools com a barra de ferramentas do Microsoft Edge
Na barra de ferramentas do Microsoft Edge, selecione Definições e muito mais (...) >Mais ferramentas Ferramentas> deprogramação:
Fazer com que as DevTools abram automaticamente quando abre um novo separador
Para que as DevTools abram automaticamente sempre que abrir um novo separador no browser:
Na linha de comandos, abra o Microsoft Edge, transmitindo o
--auto-open-devtools-for-tabssinalizador da seguinte forma:Linha de comandos do Windows:
start msedge --auto-open-devtools-for-tabsWindows PowerShell:
Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"Terminal do macOS:
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabsshell bash no Linux:
microsoft-edge --auto-open-devtools-for-tabs
Desativar o aumento do arranque
Importante: Não pode haver processos do Microsoft Edge em execução ao iniciar através auto-open-devtools-for-tabsdo , pelo que poderá ter de desativar o Arranque no edge://settings/system.
A funcionalidade de aumento de arranque mantém um processo mínimo do Microsoft Edge em execução em segundo plano. Isto interfere com a auto-open-devtools-for-tabs funcionalidade e teria de ser desativada para a utilizar. Para obter mais informações, veja Obter ajuda sobre o arranque.
Desativar o atalho de teclado F12
Para impedir que a tecla F12 abra DevTools:
No Microsoft Edge, aceda a
edge://settings/system.Desloque-se para baixo até à secção Ferramentas de Programação e, em seguida, desative a tecla Use F12 para abrir o botão de alternar Ferramentas de programação.
Suporte de teclado
Pode interagir com DevTools com o rato ou teclado. Os atalhos de teclado proporcionam uma forma rápida de aceder à funcionalidade e são necessários para a acessibilidade. Várias ferramentas são cada vez mais acessíveis através do teclado e tecnologias de apoio, como leitores de ecrã.
Consulte Atalhos de teclado e Navegar em DevTools com tecnologia de apoio.
Alterar o local onde o DevTools está ancorado no browser
Pode ancorar DevTools à direita, à esquerda ou na parte inferior do browser ou desancorá-lo numa janela separada. Consulte Alterar o posicionamento de DevTools (Desancorar, Ancorar para baixo, Ancorar para a esquerda).
Ampliar Ou reduzir DevTools
A IU do DevTools é implementada através de HTML e CSS, como páginas Web, para que possa ampliar e reduzir utilizando os atalhos de teclado padrão. Os níveis de zoom para DevTools e a página composta são independentes.
Para ampliar a parte de DevTools do browser:
- Se o foco ainda não estiver no DevTools, clique algures em DevTools.
- Prima Ctrl++ ou Ctrl+- (Windows ou Linux). Em alternativa, prima Comando++ ou Comando+- (macOS).
Para ampliar a página composta, clique na página e, em seguida, utilize os mesmos atalhos de teclado acima.
Para restaurar o zoom para 100%:
- Certifique-se de que o foco está na parte pretendida do browser, quer nas DevTools, quer na página composta.
- Prima Ctrl+0 ou Ctrl+NumPad0 (Windows ou Linux) ou Comando+0 (macOS).
Para ampliar as Definições de DevTools:
- Em Definições de DevTools, clique em Fechar (x) no canto superior direito.
- Altere o nível de zoom de DevTools, conforme descrito acima.
- Clique no botão Definições (
).
Para ampliar as DevTools com o Menu de Comandos:
- Clique no botão de menu Personalizar e controlar DevTools (
) e, em seguida, selecione Executar comando. - No Menu de Comandos, comece a escrever zoom e, em seguida, selecione um comando de zoom:
- Repor o nível de zoom
- Ampliar
- Reduzir
Descrição geral da interface de utilizador
A interface de utilizador DevTools tem as seguintes áreas principais:
A Barra de Atividade na parte superior ou no lado esquerdo, que contém ícones utilizados para aceder a ferramentas, definições, documentação e muito mais.
- A área de ferramentas atual, onde é apresentada a ferramenta atualmente selecionada na Barra de Atividade .
A barra de ferramentas Vista Rápida , na parte inferior, que contém separadores utilizados para aceder às ferramentas.
- A área de ferramentas inferior, onde é apresentada a ferramenta atualmente selecionada na barra de ferramentas Vista Rápida .
Por predefinição, a Barra de Atividade contém as seguintes ferramentas:
Botão de alternar Ferramenta de inspeção (
).Botão Device Emulation tool (
]).Ferramenta de boas-vindas (
).Ferramenta Elementos (
).Ferramenta de consola (
).Ferramenta Origens (
).Ferramenta de rede (
).Ferramenta de desempenho (
).Ferramenta de memória (
).Ferramenta de aplicação (
).
Por predefinição, a barra de ferramentas vista rápida contém as seguintes ferramentas:
Ferramenta de consola (
).Ferramenta problemas (
).
Na Barra de Atividade, os separadores de ferramentas contêm o nome e o ícone da ferramenta ou apenas o ícone da ferramenta, consoante a largura da janela DevTools. Se a janela for suficientemente larga, o nome e o ícone da ferramenta são apresentados. Se a janela for demasiado estreita, só é apresentado o ícone da ferramenta e o nome da ferramenta é apresentado quando paira o cursor sobre o ícone da ferramenta.
Se a Barra de Atividade estiver localizada no lado esquerdo da janela DevTools, na vertical, só são apresentados os ícones da ferramenta e os nomes das ferramentas são apresentados quando paira o rato sobre os ícones da ferramenta.
Alterar a localização da Barra de Atividade
Por predefinição, a Barra de Atividade é apresentada horizontalmente na parte superior da janela DevTools. Para maximizar o espaço utilizável no ecrã numa variedade de localizações e tamanhos de janela de DevTools, pode alterar a localização da Barra de Atividade para o lado esquerdo da janela DevTools ou para ser definida automaticamente consoante a localização de ancoragem da janela DevTools.
A Barra de Atividade pode estar numa das seguintes localizações:
Superior (predefinição): a Barra de Atividade será sempre horizontal.
Lado esquerdo: a Barra de Atividade será sempre vertical.
Adaptar à localização da estação de ancoragem: a Barra de Atividade estará numa orientação horizontal ou vertical, consoante o local onde as DevTools estão ancoradas.
Quando o DevTools está ancorado no lado esquerdo ou direito da janela do browser, a Barra de Atividade é vertical.
Quando o DevTools está ancorado na parte inferior da janela do browser ou desancorado na sua própria janela, a Barra de Atividade é horizontal.
Quando a Barra de Atividade é horizontal, os nomes das ferramentas são apresentados junto aos ícones da ferramenta se houver espaço suficiente para os apresentar.
Se não houver espaço suficiente para apresentar todos os nomes de ferramentas, a Barra de Atividade horizontal mostra alguns separadores com ícones e nomes de ferramentas e alguns separadores com ícones com uma descrição:
Para alterar a localização da Barra de Atividade, efetue um dos seguintes procedimentos:
Clique no botão Personalizar e controlar DevTools (
) e, em seguida, selecione uma localização na localização da Barra de Atividade:
Na Barra de Atividade, clique em Mover Barra de Atividade para a esquerda (
) ou Mover Barra de Atividade para a parte superior (
).Utilize o Menu de Comandos. Prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS), introduza as palavras barra de atividade e, em seguida, selecione Mover Barra de Atividade para a esquerda ou Mover Barra de Atividade para a parte superior. Consulte Sugestão de energia: Utilize o Menu de Comandos.
Alterar a localização da Vista Rápida
Por predefinição, o painel Vista Rápida encontra-se na parte inferior de DevTools. Também pode colocar o painel Vista Rápida no lado direito das DevTools.
Para apresentar o painel Vista Rápida , prima Esc.
Para alterar a localização do painel Vista Rápida , na barra de ferramentas Vista Rápida , clique na Vista Rápida da Estação de Ancoragem à direita (o botão 
) ou na Vista Rápida da Ancoragem para o botão inferior :
Funcionalidades da Barra de Atividade
O DevTools dá-lhe uma enorme quantidade de energia para inspecionar, depurar e alterar o site atualmente apresentado no browser. A maioria das ferramentas apresenta as alterações em direto. As atualizações em direto tornam as ferramentas úteis para refinar o aspeto e a navegação ou a funcionalidade de uma página Web sem a necessidade de a atualizar ou criar.
Painéis de ferramentas com separadores que contêm separadores e páginas
Para além da ferramenta Inspecionar e da Emulação do Dispositivo, o DevTools está dividido num conjunto de ferramentas com separadores, como a ferramenta Elementos , a ferramenta Consola e a ferramenta Origens . No Menu de Comandos, as ferramentas são referidas como painéis. O separador de uma ferramenta contém um painel que contém a IU da ferramenta.
Separadores de nível superior:
As ferramentas estão organizadas num conjunto de separadores na Barra de Atividade e na barra de ferramentas Vista Rápida . A maioria das ferramentas também são denominadas painéis. Um painel é a IU interna de uma ferramenta. Uma ferramenta tem um separador que pode estar presente na Barra de Atividade e na barra de ferramentas vista rápida .
Separadores de nível inferior:
No painel de algumas ferramentas, existe um ou mais conjuntos de separadores (painéis com separadores). Por exemplo, a ferramenta Elementos contém um conjunto de separadores que inclui os separadores Estilos, Serviços de Escuta de Eventos e Acessibilidade . Para outras ferramentas, o painel da ferramenta tem páginas listadas no lado esquerdo.
A Barra de Atividade e a barra de ferramentas vista rápida
Existem duas barras de ferramentas: a Barra de Atividade na parte superior das DevTools e a barra de ferramentas Vista Rápida na parte inferior quando prime Esc.
A Barra de Atividade contém as seguintes funcionalidades:
- Ferramentas de ícones:
- Botão de alternar Ferramenta de inspeção ().
- Botão Emulação do Dispositivo ().
- Botão de alternar Ferramenta de inspeção (
Separadores de ferramentas:
- Ferramenta de boas-vindas .
- Ferramenta elementos . Permanente.
- Ferramenta de consola . Permanente.
- Ferramenta de origens . Permanente.
- Ferramenta de rede .
- Ferramenta de desempenho .
- Ferramenta de memória .
- Ferramenta de aplicação .
Ícones:
- Mova a Barra de Atividade para a esquerda ().
- Botão Mais ferramentas (
). - Botão de menu Personalizar e controlar DevTools ().
- Botão Ajuda (
). - Fechar Botão DevTools (
).
- Mova a Barra de Atividade para a esquerda (
As funcionalidades da Barra de Atividade estão descritas abaixo.
Afixar e reorganizar ferramentas na Barra de Atividade
Além das ferramentas DevTools, Consola e Origens permanentes, pode controlar que ferramentas aparecem na Barra de Atividade, para personalizar as DevTools para se concentrar nas suas atividades atuais.
Clique no botão Mais ferramentas (
) para listar todas as ferramentas disponíveis:
Selecione uma ferramenta para afixá-la à Barra de Atividade. Em seguida, a ferramenta está presente na Barra de Atividade sempre que o DevTools é aberto.
Se não houver espaço suficiente na Barra de Atividade para apresentar todas as ferramentas afixadas, as ferramentas abertas mas não apresentadas são movidas para o menu Mais ferramentas :
Para remover uma ferramenta da Barra de Atividade, clique com o botão direito do rato no separador da ferramenta e, em seguida, selecione Remover da Barra de Atividade:
Ferramenta inspecionar
Quando clica no botão Inspecionar ferramenta (), pode selecionar um elemento na página Web atual. Enquanto a ferramenta Inspecionar estiver ativa, pode mover o rato sobre diferentes partes da página Web para obter informações detalhadas sobre os elementos da página, juntamente com uma sobreposição com várias cores que mostra as dimensões do esquema, o preenchimento e a margem do elemento da página.
Emulação do Dispositivo
Clique no botão Emulação do Dispositivo () para apresentar o site atual num modo de dispositivo emulado. A ferramenta Deulação de Dispositivos permite-lhe executar e testar a forma como o produto reage quando redimensiona o browser. Também lhe dá uma estimativa do esquema e do comportamento num dispositivo móvel.
Veja Emular dispositivos móveis (Emulação de Dispositivos).
Ferramenta de boas-vindas
Inclui informações sobre as novas funcionalidades do DevTools, como contactar a equipa e fornece informações sobre determinadas funcionalidades.
Ferramenta elementos
Permite-lhe inspecionar, editar e depurar o HTML e o CSS. Pode editar na ferramenta enquanto apresenta as alterações em direto no browser.
A ferramenta Elementos está sempre presente na Barra de Atividade.
Ferramenta de consola
Na ferramenta Consola , pode:
- Ver e filtrar mensagens registadas a partir de pedidos de rede ou de instruções de registo javaScript.
- Introduza instruções JavaScript para avaliar em tempo real. As expressões são avaliadas no contexto atual, como quando o depurador JavaScript na ferramenta Origens é colocado em pausa num ponto de interrupção.
A ferramenta Consola está sempre presente na Barra de Atividade e na barra de ferramentas vista rápida .
Veja Consola.
Ferramenta de origens
A ferramenta Origens é um editor de código e um depurador JavaScript. Pode editar projetos, manter fragmentos e depurar o projeto atual.
A ferramenta Origens está sempre presente na Barra de Atividade.
Ferramenta de rede
A Ferramenta de rede permite-lhe monitorizar e inspecionar pedidos ou respostas da cache de rede e browser. Pode filtrar pedidos e respostas de acordo com as suas necessidades e simular diferentes condições de rede.
Veja Inspecionar a atividade de rede.
Ferramenta de desempenho
Veja Introdução à Ferramenta de desempenho.
Ferramenta de memória
Veja Corrigir problemas de memória.
Ferramenta de aplicação
Consulte Ver, editar e eliminar cookies.
Botão Mais Ferramentas
Para adicionar uma ferramenta à Barra de Atividade, clique no botão Mais ferramentas ().
Personalizar e controlar o menu DevTools
O botão Personalizar e controlar DevTools () abre um menu pendente para:
- Dock DevTools.
- Ancore a Barra de Atividade.
- Selecione um tema.
- Mostrar atalhos de teclado.
- Alterar as definições de DevTools.
- Abra a Emulação do Dispositivo.
- Alterne o painel Vista Rápida .
- Execute um comando.
- Procure código.
- Abra um ficheiro.
Botão Ajuda
O botão Ajuda () abre um menu pendente que dá acesso à documentação do DevTools, às notas de versão e à ferramenta Comentários (
).
Para enviar uma ligação com a equipa do Microsoft Edge DevTools para comunicar problemas, problemas ou sugerir ideias, clique no botão Feedback . A caixa de diálogo Enviar Comentários é aberta. Introduza informações para descrever o que aconteceu e inclua uma captura de ecrã. Consulte Contactar a equipa do Microsoft Edge DevTools.
Botão Fechar DevTools
Clique no botão Fechar DevTools () no canto superior direito do DevTools para fechar as DevTools e utilizar toda a janela para apresentar a página Web atual.
Funcionalidades da barra de ferramentas vista rápida
Utilize o painel Vista Rápida para abrir uma segunda ferramenta abaixo ou à direita da ferramenta que já está selecionada na Barra de Atividade:
Selecione uma ferramenta na Barra de Atividade.
Na barra de ferramentas Vista Rápida , clique em Mais ferramentas (
e, em seguida, selecione uma ferramenta diferente na lista.
Por exemplo, abra a ferramenta Composição no painel Vista Rápida , abaixo da ferramenta Rede aberta na Barra de Atividade:
Para ocultar ou expandir a Vista Rápida, clique em Fechar Vista Rápida (
) ou Expandir Vista Rápida (
) ou prima a tecla Escape .
Descrição geral de todas as ferramentas
Para obter um resumo de cada ferramenta, consulte Descrição geral de todas as ferramentas em Acerca da lista de ferramentas.
Ferramenta, separador ou painel
As palavras "ferramenta", "separador" e "painel" são um pouco intercambiáveis. No Menu de Comandos, as ferramentas são denominadas painéis; por exemplo, a ferramenta Elementos é denominada painel Elementos . Para mudar para a ferramenta Elementos , clique no separador Elementos . Existe um botão mais ferramentas () e uma lista utilizadas para selecionar ferramentas. As ferramentas DevTools também são denominadas painéis DevTools.
Pode personalizar cada uma das ferramentas e o conteúdo de uma ferramenta pode ser alterado com base no contexto.
Acerca da Barra de Atividade e das ferramentas de Vista Rápida
O botão Mais ferramentas () é apresentado na Barra de Atividade e na barra de ferramentas Vista Rápida . Quando abre uma ferramenta a partir da lista Mais ferramentas localizada na Barra de Atividade, a ferramenta é apresentada na Barra de Atividade. Quando abre uma ferramenta a partir da lista Mais ferramentas na barra de ferramentas Vista Rápida , a ferramenta é aberta no painel Vista Rápida .
| Tarefa | Etapas |
|---|---|
| Abrir uma ferramenta na Barra de Atividade na parte superior das DevTools | Na Barra de Atividade na parte superior de DevTools, clique em Mais ferramentas () e, em seguida, selecione uma ferramenta. |
| Abrir uma ferramenta na barra de ferramentas vista rápida | Quando o DevTools tiver o foco, prima Esc para mostrar a barra de ferramentas vista rápida se ainda não for apresentada. Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas () e, em seguida, selecione uma ferramenta. |
| Mover uma ferramenta da barra de ferramentas vista rápida para a Barra de Atividade | Quando o DevTools tiver o foco, prima Esc para mostrar a Vista Rápida. Na barra de ferramentas Vista Rápida , clique com o botão direito do rato no separador da ferramenta e, em seguida, selecione Mover para a Barra de Atividade superior ou Mover para a Barra de Atividade à esquerda. |
| Mover uma ferramenta da Barra de Atividade para a barra de ferramentas vista rápida | Na Barra de Atividade, clique com o botão direito do rato no separador da ferramenta e, em seguida, selecione Mover para a Vista Rápida inferior ou Mover para a Vista Rápida lateral. |
| Abrir uma ferramenta na barra de ferramentas predefinida (Barra de Atividade ou Vista Rápida) | Quando o DevTools tiver foco, abra o Menu de Comandos premindo Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS). Escreva o nome da ferramenta e, em seguida, selecione um comando Mostrar <ferramenta> . |
Além das ferramentas Barra de Atividade e Vista Rápida , o DevTools inclui as seguintes ferramentas:
- A ferramenta Inspecionar . Veja Utilizar a ferramenta Inspecionar para detetar problemas de acessibilidade ao pairar o rato sobre a página Web.
- A ferramenta de Emulação de Dispositivos . Veja Emular dispositivos móveis (Emulação de Dispositivos).
- O Menu de Comandos. Veja Executar comandos com o Menu de Comandos de DevTools do Microsoft Edge.
Confira também
Sugestão de energia: Utilizar o Menu de Comandos
O DevTools fornece muitas funcionalidades para utilizar com o seu site. Pode aceder às diferentes partes de DevTools de várias formas, mas muitas vezes uma forma rápida é utilizar o Menu de Comandos.
No Menu de Comandos, as ferramentas são denominadas "painéis"; por exemplo, a ferramenta Elementos é denominada painel Elementos . Para mudar para a ferramenta Elementos , selecione o separador Elementos .
Para abrir o Menu de Comandos, efetue um dos seguintes procedimentos:
- Clique no botão Personalizar e controlar DevTools () e, em seguida, selecione Executar comando.
- Prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS).
O Menu de Comandos permite-lhe escrever comandos para apresentar, ocultar ou executar funcionalidades no DevTools.
- Clique no botão Personalizar e controlar DevTools (
No Menu de Comandos, comece a escrever o nome de uma ferramenta, como alterações e, em seguida, selecione um comando Mostrar , como Mostrar Alterações. O Menu de Comandos apresenta os comandos correspondentes:
Prima Enter para selecionar um comando Mostrar , como Mostrar Alterações. A ferramenta selecionada é aberta no painel Vista Rápida , na parte inferior:
A ferramenta Alterações é útil quando edita CSS. Neste exemplo, o Menu de Comandos fornece uma alternativa rápida para selecionar Mais ferramentas (
) e, em seguida, selecionar Alterações. Este exemplo também fornece uma alternativa à edição de um .jsficheiro na ferramenta Origens e, em seguida, ao clicar com o botão direito do rato e selecionar Modificações locais.
Veja também Executar comandos com o menu Comando DevTools do Microsoft Edge.
Personalizar DevTools
Pode personalizar DevTools para satisfazer as suas necessidades para a forma como trabalha. Para alterar as definições, clique no botão Personalizar e controlar DevTools () e, em seguida, selecione Definições ( ou prima F1.
Na páginaPreferências de Definições>, pode alterar várias partes das DevTools. Por exemplo, pode utilizar a definição de idioma da IU do Browser para utilizar o mesmo idioma no DevTools que é utilizado no seu browser. Noutro exemplo, utilize a definição Tema para alterar o tema de cor de DevTools.
Também pode alterar as definições de funcionalidades avançadas, tais como:
- Adicionar ficheiros locais a uma Área de Trabalho.
- Filtre o código da biblioteca com a lista Ignorar.
- Defina os Dispositivos que pretende incluir no modo de simulação e teste do dispositivo. Para obter mais informações, veja Emular dispositivos móveis (Emulação do Dispositivo).
- Selecione um perfil de Limitação de rede.
- Definir Localizações simuladas.
- Personalizar atalhos de teclado. Por exemplo, para utilizar os mesmos atalhos em DevTools que no Visual Studio Code, selecione Corresponder atalhos doVisual Studio Code predefinido>.
Experimentar funcionalidades experimentais
A equipa de DevTools fornece novas funcionalidades como experimentações no DevTools. Pode ativar ou desativar cada uma das experimentações. Para ver a lista completa de funcionalidades experimentais no Microsoft Edge DevTools, em DevTools, selecione Definições ( e, em seguida, selecione Experimentações.
Para pré-visualizar as funcionalidades mais recentes que chegam ao DevTools, transfira o Microsoft Edge Canary, que é concebido à noite.
Veja também:
Confira também
- Acerca da lista de ferramentas
- Inspecionar e alterar a página Web atual
- Emular o comportamento do produto em diferentes dispositivos
- Inspecionar, ajustar e alterar os estilos dos elementos
- Depurar o JavaScript
- Consola dinâmica
- Problemas de acessibilidade, desempenho, compatibilidade e segurança
- Inspecionar o tráfego de rede
- Inspecionar onde o browser armazenou o conteúdo
- Avaliar o desempenho
- Problemas de memória
- Problemas de composição
- Utilizar um ambiente de desenvolvimento
- Sincronizar alterações no DevTools com o sistema de ficheiros
- Substituir ficheiros da Web