Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Seguindo a agenda atualizada do Chromium, estamos ajustando nossa agenda para os próximos lançamentos do Microsoft Edge e cancelando o lançamento do Microsoft Edge 82. Confira nossa postagem no blog para obter mais informações.
Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.
Comunicados da equipe Microsoft Edge DevTools
Depurar remotamente o Microsoft Edge em dispositivos Windows 10 ou posteriores
O aplicativo Ferramentas Remotas para Microsoft Edge agora está disponível na Microsoft Store. Esse aplicativo estende o Portal de Dispositivos do Windows. Você pode se conectar do Microsoft Edge em execução em seu computador de desenvolvimento a um dispositivo Windows 10 remoto ou posterior e exibir uma lista de destinos. Essa lista de destinos inclui todas as guias no Microsoft Edge e PWAs abertas no dispositivo Windows. Use o DevTools em seu computador de desenvolvimento em um destino em execução no dispositivo Windows remoto.
Leia nosso guia para configurar seu dispositivo Windows 10 e seu computador de desenvolvimento para depuração remota: Depurar remotamente dispositivos Windows.
Informe-nos sobre sua experiência de depuração remota twittando ou clicando no ícone Enviar comentários .
Novas maneiras de acessar as Configurações
Há várias configurações para DevTools que você pode personalizar para fazer com que o DevTools pareça, sinta e funcione da maneira que você precisa. No Microsoft Edge 83, acessar Configurações no DevTools agora é muito mais fácil. Abra as Configurações clicando no ícone de engrenagem ao lado de Alertas do console e do menu principal.
Você também pode abrir Configurações no Menu Principal em Mais ferramentas.
Chromium problema #1050855
Barras de informações novas e aprimoradas
As barras de notificação informativa (barras de informações) no DevTools agora têm uma aparência aprimorada e mais funcionalidade. No Microsoft Edge 83, as barras de informações são mais fáceis de ler e fornecem botões para que você possa executar a ação relevante imediatamente.
Chromium problema #1056348
Navegar no Seletor de Cores com o teclado
Em versões anteriores do Microsoft Edge, você não podia navegar pela seção Tons do Seletor de Cor com o teclado. No Microsoft Edge 83, agora você pode usar o teclado para mover o seletor na seção Tons do Seletor de Cor.
O Seletor de cores é uma GUI no painel Elementos para alterações color e background-color declarações:
Chromium problema #963183
Veja também:
Agora, a guia Propriedades é preenchida depois de atualizar uma página
No Microsoft Edge 81 e anterior, a guia Propriedades no painel Elementos era interrompida por atualizações de página. Quando você atualizou a página, a guia Propriedades não preencheu as propriedades do elemento selecionado no momento:
No Microsoft Edge 83, agora você pode exibir as propriedades do elemento selecionado no momento após uma atualização de página na guia Propriedades:
Chromium problema #1050999
Veja também:
Usar as teclas de direção para rolar na ferramenta Alterações
A ferramenta Alterações rastreia todas as alterações feitas no CSS ou JavaScript no DevTools. Você pode usar a ferramenta Alterações para exibir rapidamente todas as alterações e levá-las de volta ao editor/IDE.
Para abrir a ferramenta Alterações, no DevTools, pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando e digite changes. Selecione o comando Mostrar Alterações e pressione Enter. A ferramenta Alterações é aberta no painel Visualização Rápida na parte inferior do DevTools.
Quando você tiver feito uma alteração em um arquivo minificado, a ferramenta Alterações permitirá rolar horizontalmente para exibir todo o seu código minificado. A partir do Microsoft Edge 83, agora você pode rolar horizontalmente usando as teclas de seta do teclado.
Se você usa leitores de tela ou o teclado para navegar pelo DevTools, envie-nos seus comentários twittando para nós ou clicando no ícone Enviar comentários .
Chromium problema #963183
Veja também:
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge 83 que foram contribuídos para o projeto código aberto Chromium.
Emular deficiências visuais
Na ferramenta Renderização , use o novo recurso Emular deficiências visuais para ter uma ideia melhor de como as pessoas com diferentes tipos de deficiências visuais vivenciam seu site:
O DevTools pode emular a visão turva e os seguintes tipos de deficiências da visão de cores:
| Deficiência de visão de cores | Detalhes |
|---|---|
| Protanopia | A incapacidade de perceber qualquer luz vermelha. |
| Deuteranopia | A incapacidade de perceber qualquer luz verde. |
| Tritanopia | A incapacidade de perceber qualquer luz azul. |
| Acromatopsia | A incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente raro). |
Existem versões menos extremas dessas deficiências de visão de cores e são mais comuns. Por exemplo, a protanomania é uma sensibilidade reduzida à luz vermelha (em oposição à protanopia, que é a completa incapacidade de perceber a luz vermelha). No entanto, essas deficiências visuais não são tão claramente definidas: cada pessoa com essa deficiência visual é diferente e pode ver as coisas de maneira diferente (sendo capaz de perceber mais ou menos das cores relevantes).
Ao projetar para as simulações mais extremas no DevTools, seus aplicativos Web têm a garantia de serem acessíveis também a pessoas com deficiências visuais.
Envie seus comentários twittando ou clicando no ícone Enviar comentários .
Problema do Chromium #1003700
Veja também:
- Emular deficiências visuais
- Analisar o desempenho da renderização com a ferramenta Renderização na referência de recursos de desempenho
- Tipos de Daltonismo, em Colourblindawareness.org.
Emular localidades
Para emular localidades, na ferramenta Sensores , selecione um local na lista suspensa Local . (Para acessar a ferramenta Sensores , abra o Menu de Comando e digite Sensors.) Depois de selecionar um local, o DevTools modifica a localidade padrão atual, o que afeta o seguinte código:
-
Intl.*APIs, por exemplo:new Intl.NumberFormat().resolvedOptions().locale - Outras APIs JavaScript com reconhecimento de localidade, como
String.prototype.localeComparee*.prototype.toLocaleString, por exemplo:123_456..toLocaleString() - APIs DOM, como
navigator.languageenavigator.languages - O cabeçalho de solicitação HTTP Accept-Language
Observação
Atualizações e navigator.languagenavigator.languages não são visíveis imediatamente, mas somente após a próxima navegação ou atualização de página. As alterações no cabeçalho HTTP só são refletidas Accept-Language para solicitações subsequentes.
Para experimentar uma demonstração, consulte Exemplo de código dependente de localidade.
Chromium problema #1051822
Veja também:
- Substituir a geolocalização em Emular sensores de dispositivo.
Depuração da Política de Incorporação entre Origens (COEP)
O painel Rede agora fornece informações de depuração da Política de Incorporação entre Origens .
A coluna Status agora fornece uma explicação rápida do motivo pelo qual uma solicitação foi bloqueada, bem como um link para exibir os cabeçalhos dessa solicitação para depuração adicional:
A seção Cabeçalhos de Resposta da guia Cabeçalhos fornece mais orientações sobre como resolver os problemas:
Envie seus comentários twittando ou clicando no ícone Enviar comentários .
Chromium problema #1051466
Veja também:
- Bloqueie solicitações em Inspecionar atividade de rede.
Novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de log
Atualização: a partir de 2022, os pontos de interrupção agora são indicados por um retângulo azul, em vez de um círculo vermelho.
O painel Fontes tem novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de log:
- Os pontos de interrupção (
) são representados por círculos vermelhos. - Os pontos de interrupção
) são representados por círculos meio vermelhos e meio brancos. - Os pontos de registro (
) são representados por círculos vermelhos com ícones de console.
A motivação para os novos ícones foi tornar a interface do usuário mais consistente com outras ferramentas de depuração de GUI (que geralmente colorem os pontos de interrupção de vermelho) e facilitar a distinção entre os 3 recursos de relance.
Chromium problema #1041830
Veja também:
Exibir solicitações de rede que definem um caminho de cookie específico
Use a nova cookie-path palavra-chave de filtro na ferramenta Rede para se concentrar nas solicitações de rede que definem um caminho de cookie específico.
Para descobrir mais palavras-chave como cookie-path, consulte Filtrar solicitações por propriedades na Referência de recursos de rede.
Encaixe para a esquerda no Menu de Comando
Para mover o DevTools para a esquerda do visor (página da Web renderizada), abra o Menu de Comando e execute o Dock to left comando. O recurso Encaixar para a esquerda está disponível desde o Microsoft Edge 75, mas anteriormente só era acessível no menu principal. Agora você também pode acessar o recurso Dock para a esquerda no Menu de Comando.
"
Envie seus comentários twittando ou clicando no ícone Enviar comentários .
Chromium problema #1011679
Veja também:
O painel Auditorias agora é o painel Lighthouse
A equipe do DevTools frequentemente recebia feedback de desenvolvedores da Web que, embora fosse possível executar o Lighthouse a partir do DevTools, quando eles o experimentaram, não conseguiram encontrar um painel "Lighthouse". Portanto, o painel de Auditorias agora é chamado de painel Farol .
Observação: o painel Lighthouse fornece links para conteúdo hospedado em sites de terceiros. A Microsoft não é responsável e não tem controle sobre o conteúdo desses sites e quaisquer dados que eles possam coletar.
Veja também:
Excluir todas as Substituições Locais de uma pasta
Depois de configurar as Substituições Locais, você pode clicar com o botão direito do mouse em um diretório e selecionar a nova opção Excluir todas as substituições para excluir todas as Substituições Locais dessa pasta.
Envie seus comentários twittando ou clicando no ícone Enviar comentários .
Chromium problema #1016501
Veja também:
Interface do usuário de tarefas longas atualizada
A Long Task é um código JavaScript que monopoliza o thread principal por um longo tempo, fazendo com que uma página da Web congele.
Você pode visualizar Tarefas Longas no painel Desempenho há algum tempo, mas no Microsoft Edge 83 a interface do usuário de visualização de Tarefa Longa na ferramenta Desempenho foi atualizada. A parte de Tarefa Longa de uma tarefa agora é colorida com um fundo vermelho listrado:
Envie seus comentários twittando ou clicando no ícone Enviar comentários .
Chromium problema #1054447
Suporte ao ícone mascarável no painel Manifesto
Há uma nova caixa de seleção, Mostrar apenas a área mínima segura para ícones mascaráveis, no painel Manifesto da ferramenta Aplicativo .
O Android Oreo introduziu ícones adaptáveis, que exibem ícones de aplicativos em uma variedade de formas em diferentes modelos de dispositivos. Os ícones mascaráveis são um novo formato de ícone que dá suporte a ícones adaptáveis, que permitem garantir que o ícone PWA tenha uma boa aparência em dispositivos compatíveis com o padrão ícones mascaráveis.
Para marcar se o ícone mascarável fica bem em dispositivos Android Oreo, no painel Manifesto da ferramenta Aplicativo, marque a nova caixa de seleção Mostrar apenas a área mínima segura para ícones mascaráveis:
Esse recurso foi lançado no Microsoft Edge 81. As atualizações abordadas aqui no Microsoft Edge 83 não foram abordadas em Novidades no DevTools (Microsoft Edge 81).
Veja também:
- Exibir, editar e excluir cookies - Artigos sobre a ferramenta Aplicativo .
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.