Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
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 de desenvolvedor. |
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 de desenvolvedor:
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 Utilizar F12 para abrir o botão de alternar Ferramentas de desenvolvedor.
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 Analisar o desempenho do runtime (tutorial).
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 com os seguintes itens:
Documentação – abre a documentação do Microsoft Edge DevTools.
Notas de versão – abre as Novidades nas DevTools do Microsoft Edge.
Feedback (
) – abre a caixa de diálogo Enviar comentários . Para se ligar à equipa de DevTools do Microsoft Edge para comunicar um problema ou problema (ou sugerir uma ideia), descreva 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 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 de predefinição>Visual Studio Code.
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
- O seu primeiro site (MDN) – como utilizar HTML, CSS e JavaScript para criar uma página Web.