Vídeos sobre desenvolvimento para a Web com o Microsoft Edge

Descubra e aprenda sobre as novas tecnologias e produtos de desenvolvimento na Web do Microsoft Edge, incluindo DevTools, APIs e recursos de plataforma Web, Aplicativos Web Progressivos e WebView2.

Esta página contém links para vídeos curtos, cada um focado em apenas um recurso e incluindo uma demonstração.

A Microsoft publica novos vídeos regularmente no canal do YouTube do Microsoft Edge, e eles também estão listados abaixo.

Clique em uma miniatura da lista a seguir para assistir ao vídeo correspondente no YouTube.

Canal do Microsoft Edge no YouTube

Você pode encontrar todos os vídeos sobre desenvolvimento usando o Microsoft Edge no canal do Microsoft Edge (@MSFTEdge) no YouTube.

O canal do Microsoft Edge inclui as seguintes listas de reprodução:

Explicar os erros do Console do DevTools ao usar o Copilot no Edge

8 de Fevereiro de 2024

Imagem em miniatura do vídeo

As ferramentas Console e Fontes no Microsoft Edge DevTools agora se integram ao Copilot no Microsoft Edge para ajudar você a entender erros e código-fonte. Use esse recurso para obter ajuda com a depuração do código.

Consulte também:

O visualizador JSON

17 de agosto de 2023

Imagem em miniatura do vídeo

O visualizador JSON formata e destaca automaticamente as respostas e os arquivos JSON nas guias do navegador. Quando seu servidor Web responde a solicitações HTTP com dados codificados como JSON, esses dados nem sempre são fáceis de ler e, às vezes, são retornados como uma linha de texto. O visualizador JSON altera os dados retornados para facilitar a leitura. A sintaxe JSON é realçada com cores diferentes, as propriedades do objeto são exibidas em suas próprias linhas e recuadas e os objetos podem ser recolhidos ou expandidos.

Consulte também:

Microsoft Edge | Novidades no DevTools 113 e 114

24 de Julho de 2023

Imagem em miniatura do vídeo

Abrange:

  • A ferramenta Analisador de Falhas .
  • Agregar estatísticas do seletor CSS.
  • Avisos para propriedades CSS que acionam o layout.
  • Aperfeiçoamentos na ferramenta de memória.
  • Melhorias de acessibilidade.
  • Melhor suporte ao modo de alto contraste na extensão DevTools para VS Code.
  • console.table().

Consulte também:

Microsoft Edge | Novidades no DevTools 112

26 de abril de 2023

Imagem em miniatura do vídeo

Abrange:

  • Nomes JS não minificados para OOPIFs na ferramenta Desempenho .
  • Seletores CSS não simples na ferramenta de visão geral do CSS .
  • Dobramento de código no visualizador JSON.
  • Melhorias na interface do usuário do DevTools.
  • Novos marcadores para pontos de log e pontos de interrupção condicionais.
  • Como alterar temas no DevTools.

Consulte também:

Microsoft Edge | Novidades no DevTools 111

28 de março de 2023

Imagem em miniatura do vídeo

Abrange:

  • Depurar remotamente conteúdo da Web em dispositivos XBOX e HoloLens.
  • Nomes de arquivos e funções não minificados na ferramenta Desempenho .
  • Pode copiar a tabela de estatísticas do seletor CSS para o Excel.
  • Renderizando recursos de emulação na barra de ferramentas Modo de Dispositivo.
  • Barra lateral da ferramenta Better Elements .
  • Melhor acessibilidade da Visualização Rápida .
  • Recursos de cores de alta definição.
  • Personalize as colunas da ferramenta Rede .

Consulte também:

Microsoft Edge | Novidades no DevTools 110

16 de Fevereiro de 2023

Imagem em miniatura do vídeo

Abrange:

  • Gravações de snapshot de heap mais rápidas.
  • Personalização aprimorada do Modo de Foco (interface do usuário do DevTools).
  • Melhorias nos temas de acessibilidade e contraste.
  • Impressão bonita automática no local na ferramenta Fontes .
  • Simular prefers-color-scheme.

Consulte também:

Microsoft Edge | Novidades no DevTools 109

17 de Janeiro de 2023

Imagem em miniatura do vídeo

Abrange:

  • Compartilhe rastreamentos de memória e desempenho com mais dados.
  • Estatísticas do Seletor na ferramenta Desempenho .
  • Rastrear objetos coletados por lixo (GC'd) na ferramenta Memória .
  • Extensão do visualizador de instantâneo de heap.
  • Painel de Visualização Rápida redesenhado no Modo de Foco.
  • Novos comandos para os painéis Estilos .
  • Inspeção de elementos.

Consulte também:

Microsoft Edge | Novidades no DevTools 108

16 de Dezembro de 2022

Imagem em miniatura do vídeo

Abrange:

  • Navegação aprimorada na Paleta de Comandos.
  • Correções no modo de alto contraste.
  • Aviso de JavaScript desabilitado.
  • Confira as propriedades CSS inativas.
  • Nova documentação para criar suas próprias ferramentas.
  • WebDriver disponível no macOS no Apple M1.
  • Use Elementos Desvinculados para localizar vazamentos de DOM.

Consulte também:

Microsoft Edge | Novidades no DevTools 107

8 de Novembro de 2022

Imagem em miniatura do vídeo

Abrange:

  • Rótulos de texto na interface do usuário do DevTools do Modo de Foco.
  • Novo atalho para a Paleta de Comandos.
  • Instantâneos de heap grandes na ferramenta Memória.
  • Correções no modo de alto contraste.
  • Desative "pesquisar enquanto digita".
  • Automatize o WebView2 com o Playwright.
  • Personalize atalhos.

Consulte também:

Microsoft Edge | Saiba como usar a ferramenta Rede

6 de Outubro de 2022

Imagem em miniatura do vídeo

Aprenda a usar a ferramenta Rede no Microsoft Edge DevTools.

Abrange:

  • Por que a ferramenta Rede no DevTools é essencial para desenvolvedores da Web.
  • Como os sites obtêm as informações necessárias da Internet para serem exibidas no navegador da Web.
  • Quando usar a ferramenta Rede .
  • Um tour pela interface do usuário da ferramenta Rede .
  • Exibindo solicitações na ferramenta Rede .
  • Exibindo os detalhes de uma solicitação/resposta.
  • Personalizando a ferramenta Rede .
  • Classificar, filtrar e pesquisar solicitações.
  • Investigando problemas de desempenho.
  • Bloquear solicitações e exportar como arquivos HAR.
  • Editar e reenviar solicitações.

Consulte também:

Microsoft Edge | Novidades no DevTools 106

3 de outubro de 2022

Imagem em miniatura do vídeo

Abrange:

  • O experimento da Paleta de Comandos.
  • Problemas de Correção Rápida na extensão de VS Code do DevTools do Edge.
  • O DevTools usa menos espaço em disco.
  • Melhor acessibilidade no Modo de Foco (interface do usuário do DevTools) e correção de bug de alto contraste.
  • Temas preteridos do Chromium Light/Dark.
  • Novas interações acompanham na ferramenta Desempenho .
  • Usando trechos.

Consulte também:

Microsoft Edge | Novidades no DevTools 105

6 de Setembro de 2022

Imagem em miniatura do vídeo

Abrange:

  • Depuração de manipulação do protocolo PWA.
  • Melhorias no Modo de Foco.
  • Correções de bugs do Modo de Foco.
  • Maior confiabilidade das ferramentas de Rede e Problemas.
  • Edição dinâmica do código da função durante a depuração.
  • Usando pontos de log.

Consulte também:

Entender a interface do usuário do DevTools

1 de set de 2022

Imagem em miniatura do vídeo

Este vídeo um pouco mais antigo (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.
  • Em vez do painel de Visualização Rápida , o vídeo mostra a Gaveta na parte inferior do DevTools.

Abrange:

  • A estrutura da interface do usuário do DevTools, com a barra de ferramentas principal e o painel na parte superior e a barra de ferramentas e o painel Gaveta na parte inferior.
  • Como a interface do usuário do DevTools do Microsoft Edge é organizada.
  • O que as partes principais da interface do DevTools fazem.
  • Quais ferramentas estão disponíveis.
    • A ferramenta Inspecionar .
    • Modo de emulação do dispositivo .
    • Ferramentas na barra de ferramentas principal ou na Gaveta.
  • O botão Mais guias .
  • O botão Mais ferramentas para ver todas as 30+ ferramentas.
  • Ferramentas de fechamento.
  • Reordenar ferramentas na barra de ferramentas principal.
  • A Gaveta e sua barra de ferramentas.
  • Mover ferramentas entre a barra de ferramentas principal e a barra de ferramentas da Gaveta .
  • Como restaurar as configurações padrão.

Consulte também:

Microsoft Edge | Novidades no DevTools 104

5 de agosto de 2022

Imagem em miniatura do vídeo

Abrange:

  • Correções de bugs de renderização/acessibilidade.
  • As camadas compostas agora estão na ferramenta Exibição 3D , e a ferramenta Camadas foi removida.
  • Agrupar arquivos na ferramenta Fontes.
  • Descubra onde os nós são encaixados nos componentes da Web.
  • Onde encontrar mais informações.
  • Como alterar onde a Barra de Atividades é colocada.

Consulte também:

Microsoft Edge | Novidades no DevTools 103

5 de julho de 2022

Imagem em miniatura do vídeo

Abrange:

  • Ferramenta de boas-vindas reprojetada.
  • Novo seletor de cores.
  • Novo heap de memória snapshot tipos de nó.
  • Correção de bug no modo de alto contraste.
  • Abra qualquer página HTML na extensão do VS Code.

Consulte também:

Depurar a Web em 3D

21 de Junho de 2022

Imagem em miniatura do vídeo

A ferramenta Modo de Exibição 3D no Microsoft Edge DevTools fornece uma representação tridimensional da página da Web que você está inspecionando. Use a ferramenta Exibição 3D para depurar problemas comuns de desenvolvimento na Web, como:

  • Nós DOM profundamente aninhados.
  • Elementos fora do documento.
  • Barras de rolagem indesejadas.
  • Problemas de empilhamento de z-index.
  • Desempenho de camadas compostas.

Consulte também:

Use seu idioma preferido no Microsoft Edge DevTools

9 de Junho de 2022

Imagem em miniatura do vídeo

Como selecionar o idioma da interface do usuário mais confortável para codificação e depuração. O DevTools do Microsoft Edge dá suporte a +13 idiomas diferentes.

Consulte também:

Microsoft Edge | Novidades no DevTools 102

1 de Junho de 2022

Imagem em miniatura do vídeo

Abrange:

  • Visual Studio Code.
  • Exportação de instantâneo de heap.
  • Ciclos de nós internos.
  • Ícone de ajuda.
  • Problemas corrigidos.

Consulte também:

Estilizar totalmente a parte suspensa de um HTML <select> com o <selectmenu> elemento

31 de maio de 2022

Imagem em miniatura para o vídeo

Os elementos de <select> estilo têm sido desafiadores. O elemento experimental <selectmenu> (ou <selectlist>) promete superar as limitações restantes, permitindo que os desenvolvedores da web estilizem todas as partes do elemento.

Atualização de junho de 2024: esse elemento ainda é experimental. O <selectmenu> elemento foi renomeado para <selectlist> em 2023.

Consulte também:

Filtragem de problemas avançados no Edge, DevTools e VSCode

20 de maio de 2022

Imagem em miniatura do vídeo:

Todo produto da web tem problemas. A ferramenta Problemas do DevTools do Microsoft Edge analisa a página da Web atual e relata problemas agrupados por tipo, incluindo acessibilidade, compatibilidade, desempenho e muito mais.

A extensão DevTools do Microsoft Edge para o Visual Studio Code disponibiliza os problemas diretamente no código-fonte.

Os produtos lançados podem ter problemas. Com base em seus comentários, adicionamos maneiras úteis de filtrar problemas. Você pode desabilitar problemas provenientes de bibliotecas de terceiros e escolher sobre quais navegadores exibir os problemas.

Consulte também:

Criar uma animação vinculada à rolagem sem JavaScript

12 de maio de 2022

Imagem em miniatura do vídeo

Saiba mais sobre o recurso de animações vinculadas ao rolagem do CSS e como ele pode ser usado para criar um indicador de progresso da leitura em uma página da Web, sem usar JavaScript. Esse é um recurso da plataforma Web como um todo, não apenas do Microsoft Edge.

A partir de 21 de julho de 2023, esse recurso não será mais experimental e agora tem suporte no Microsoft Edge sem um sinalizador. A partir da descrição de 2022: As animações vinculadas ao rolagem CSS são um recurso experimental no Microsoft Edge; para experimentar esse recurso, acesse edge://flags e habilite a configuração de recursos da Plataforma Web Experimental .

Consulte também:

Personalização das Ferramentas de Desenvolvedor do Microsoft Edge e acesso rápido aos recursos

5 de maio de 2022

Imagem em miniatura do vídeo

Saiba como personalizar o DevTools para atender às suas necessidades. Abrange:

  • Encaixe ou desencaixe o DevTools.
  • Abra novas ferramentas.
  • Feche as ferramentas desnecessárias.
  • Mover ferramentas na Gaveta inferior (agora o painel Visualização Rápida ).
  • Personalize o tamanho do texto.
  • Personalize o tema.
  • Use os atalhos de teclado do Menu de Comando para personalizar rapidamente o DevTools.

Consulte também:

Realce texto na Web com a API de realce personalizado CSS

28 de abril de 2022

Imagem em miniatura do vídeo

Estilizar intervalos de texto na Web é muito útil, mas historicamente tem sido uma coisa complicada de fazer.

A API de realce personalizado CSS é o futuro do realce de intervalos de texto na Web. Essa API fornece aos desenvolvedores da Web recursos JavaScript e CSS que tornam mais fácil e eficiente estilizar qualquer intervalo de texto.

Consulte também:

Microsoft Edge | Novidades no DevTools 101

28 de abril de 2022

Imagem em miniatura do vídeo

Abrange:

  • usando o console.
  • Cache de mapas de origem.
  • Coluna de Texto de Status.
  • Mudança de temas.

Consulte também:

Microsoft Edge | Novidades no DevTools 100

19 de abril de 2022

Imagem em miniatura do vídeo

Abrange:

  • O repositório Ferramentas de Desenvolvedor do Microsoft Edge, para enviar comentários e ideias.
  • Adicionados idiomas tcheco e vietnamita para a interface do usuário do DevTools.
  • Na ferramenta Memória , filtre instantâneos de heap por tipo de nó.
  • A ferramenta Rede tem uma coluna Preenchido por , mostrando o trabalho de serviço ou cache.
  • Os links de um perfil de desempenho importado usam mapas de origem de Azure servidor de símbolos de Artefatos para mapear de volta para seu código-fonte original familiar.

Consulte também:

Microsoft Edge | Novidades no DevTools 99

21 de março de 2022

Imagem em miniatura do vídeo

Abrange:

  • Servidor de Símbolos de Artefatos do Azure e mapas de origem.
  • Painel de camadas aprimorado na ferramenta Exibição 3D .
  • Use mapas de origem para cancelar a minimização de perfis de desempenho.
  • Depuração de ASP.NET ao vivo no DevTools para Visual Studio.
  • Acessibilidade na ferramenta Console de Rede e na ferramenta Exibição 3D .

Consulte também:

Descrições automáticas de imagem no Microsoft Edge

17 março, 2022

Imagem em miniatura do vídeo

O Microsoft Edge fornece texto alt gerado automaticamente para imagens que não o incluem. O texto alt gerado automaticamente ajuda os usuários de tecnologia adaptativa, como leitores de tela, a descobrir o significado ou a intenção de imagens na Web.

Muitas pessoas cegas ou com baixa visão experimentam a Web principalmente por meio de um leitor de tela: uma tecnologia adaptativa que lê o conteúdo de cada página em voz alta. Os leitores de tela dependem de rótulos de imagem (texto alternativo ou "texto alternativo") fornecidos que lhes permitam descrever o conteúdo visual, como imagens e gráficos, para que o usuário possa entender o conteúdo completo da página. O texto Alt é fundamental para tornar a Web acessível, mas muitas vezes é esquecido. Mais da metade das imagens processadas pelos leitores de tela não têm texto alt.

Consulte também:

Microsoft Edge | Novidades no DevTools 98

23 de Fevereiro de 2022

Imagem em miniatura do vídeo

Abrange:

  • Emular o modo Cores Forçadas.
  • Os ícones de atividade no log de eventos da ferramenta Desempenho têm dicas de ferramentas.
  • Tamanhos superficiais na ferramenta Memória são representados como valores decimais.
  • Na ferramenta Rede , a caixa de pesquisa é redimensionada conforme necessário.
  • Na ferramenta Aplicativo , a interface do usuário está alinhada corretamente.
  • Atualizações para o mecanismo do navegador Chromium.

Consulte também:

Microsoft Edge | Novidades no DevTools 97

1 de Fevereiro de 2022

Imagem em miniatura do vídeo

Abrange:

  • A ferramenta Elementos Desvinculados está disponível por padrão.
  • A ferramenta Modo de Exibição 3D dá suporte à alteração de temas de cores no DevTools.
  • Melhorias no Modo de Foco (interface do usuário do DevTools).
  • A extensão DevTools para VS Code tem recursos adicionais.

Consulte também:

Depurar vazamentos de memória com a ferramenta Elementos Desvinculados do Microsoft Edge

9 de Dezembro de 2021

Imagem em miniatura para o vídeo

Atualização de março de 2025: A ferramenta Elementos Desvinculados foi removida. Para depurar vazamentos de memória DOM, use o tipo de criação de perfil Elementos desvinculados na ferramenta Memória .

Vazamentos de memória ocorrem quando o código JavaScript de um aplicativo retém mais e mais objetos na memória em vez de liberá-los para o navegador coletar o lixo. Criamos a ferramenta Elementos Desvinculados com os desenvolvedores do Microsoft Teams e ela já nos ajudou a encontrar e corrigir vazamentos de memória em muitos de nossos próprios sites e aplicativos.

Consulte também:

Microsoft Edge | Novidades no DevTools 96

9 de Dezembro de 2021

Imagem em miniatura do vídeo

Abrange:

  • Nova interface do usuário do DevTools: Modo de foco.
  • A ferramenta Console pode estar nos painéis superior e inferior do DevTools.
  • A ferramenta Fontes notifica quando os mapas de origem não podem ser carregados.
  • Clicar no ícone de triângulo de um menu suspenso abre o menu.
  • A abertura de arquivos de código-fonte no Visual Studio Code integra-se à ferramenta Fontes.

Consulte também:

Microsoft Edge | Novidades no DevTools 95

8 de Dezembro de 2021

Imagem em miniatura do vídeo

Abrange:

  • Ícone de pesquisa da Web para todas as mensagens de erro e aviso.
  • Acesso aprimorado para definir User-Agent Dicas de Cliente.
  • Os filtros do console exibem mensagens agrupadas.

Consulte também:

Microsoft Edge | A API do Conta-gotas

22 de Novembro de 2021

Imagem em miniatura do vídeo

A equipe do Microsoft Edge especificou e implementou a nova API do EyeDropper em colaboração com o projeto de software livre do Chromium. Forneça comentários em Problemas - WICG/eyedropper | github.com.

Muitos aplicativos criativos permitem que os usuários escolham cores de partes de uma janela do aplicativo ou até mesmo de toda a tela, geralmente usando uma metáfora conta-gotas. A API do EyeDropper permite que os autores usem um conta-gotas fornecido pelo navegador na construção de seletores de cores personalizados na Web.

Consulte também:

Microsoft Edge | Novidades no DevTools 94

12 de Novembro de 2021

Imagem em miniatura do vídeo

Abrange:

  • Pesquisar erros do Console na Web.
  • Os ícones de ponto de interrupção são exibidos ao usar temas do Visual Studio Code.
  • A extensão DevTools para Visual Studio Code inclui as ferramentas mais recentes, suporte a temas e links úteis. Conexão do Depurador JavaScript com workspaces remotos.

Atualização: o recurso Temas do Visual Studio Code foi removido e esses temas são revertidos para os temas padrão:

  • Luz+
  • Escuro+

Consulte também:

Microsoft Edge | Novidades no DevTools 93

11 de outubro de 2021

Imagem em miniatura do vídeo

Abrange:

  • Interface do usuário do DevTools.
  • Depure vazamentos de memória do nó DOM com a ferramenta Elementos Desanexados .
  • Alterar idioma de exibição.
  • Copie declarações CSS no painel Estilos da ferramenta Elementos para bibliotecas CSS-in-JS.
  • Personalização mais fácil de User-Agent Dicas de Cliente.
  • Os leitores de tela anunciam erros, avisos e problemas exibidos na barra de ferramentas e no Console.
  • Copiar como O PowerShell na ferramenta Rede inclui cookies.
  • O depurador do Visual Studio Code se integra à Extensão DevTools para VS Code.

Consulte também:

Microsoft Edge | Estado da plataforma

25 de Maio de 2021

Imagem em miniatura do vídeo

O Microsoft Edge traz uma plataforma e ferramentas atraentes e consistentes para desenvolvedores. À medida que nossos navegadores herdados perdem o suporte, o Edge em breve será o único navegador com suporte da Microsoft no Windows 10. Saiba mais sobre as últimas novidades na plataforma, nas ferramentas e nos aplicativos Web do Edge.

Abrange:

  • Rastros de Tinta Delegados.
  • Novos recursos da Web para desenvolvedores.
  • Executar no logon do sistema operacional.
  • Ferramentas do Microsoft Edge para VS Code.

Consulte também:

Acender | março de 2021 | Iniciando a história dos Aplicativos Web

2 de março de 2021

Imagem em miniatura do vídeo

Os PWA (Aplicativos Web Progressivos) têm suporte no Microsoft Edge e representam uma oportunidade de aprimorar a capacidade de descoberta e o envolvimento com seu aplicativo. Novos recursos da plataforma Web. Como esses aplicativos Web modernos se integram perfeitamente ao Microsoft Windows.

Abrange:

  • A capacidade de modernizar.
  • Esforços conjuntos para capacitar a plataforma Web.
  • Microsoft Edge e o mecanismo do navegador Chromium.
  • Microsoft Edge e recursos da Web (Project Fugu).
  • Fazendo PWAs brilharem no Windows.
  • O melhor alcance da categoria.
  • Instalar um site como um aplicativo.
  • Envolva-se com PWAs no Windows.

Consulte também:

Acender | Setembro de 2020 | O que há de mais recente em ferramentas de desenvolvedor

22 de Setembro de 2020

Imagem em miniatura do vídeo

As ferramentas de desenvolvedor do Microsoft Edge ajudam a facilitar o desenvolvimento, o teste e a automação da Web. Saiba como priorizamos a acessibilidade em nossas ferramentas e aplicativos e como ajudamos a capacitar outras pessoas a fazer o mesmo.

Abrange:

  • Extensão do DevTools para VS Code.
  • Teste e automação entre navegadores. Selenium, WebDriver, Puppeteer, Playwright e CI/CD por meio de contêineres do Docker.
  • Colaboração no mecanismo do navegador Chromium. Como contribuir.
  • Interface do usuário localizada nas ferramentas de desenvolvedor.
  • Acessibilidade em ferramentas de desenvolvedor.

Consulte também:

Consulte também

YouTube: