Vídeos sobre desenvolvimento para a Web com o Microsoft Edge
Descubra e saiba mais sobre novas tecnologias e produtos de desenvolvimento Web do Microsoft Edge, incluindo DevTools, APIs e recursos da plataforma Web, Aplicativos Web Progressivo 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 Microsoft Edge no YouTube e eles também estão listados abaixo.
Clique em uma miniatura da lista a seguir para watch o vídeo correspondente no YouTube.
DevTools - Novidades em DevTools 105
Publicado em 6 de setembro de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 105.
DevTools – Entender a interface do usuário de DevTools
Publicado em 1º de setembro de 2022.
Entenda como a interface do usuário do Microsoft Edge DevTools é organizada. Se você estiver confuso sobre quais ferramentas estão disponíveis e o que as partes main da interface DevTools fazem, este vídeo ajudará a ficar mais confortável.
Neste vídeo, passamos por cima da estrutura da interface do usuário, com sua main barra de ferramentas e painel e sua área de gaveta. Também abordamos como localizar, abrir e fechar ferramentas, restaurar as configurações padrão e examinar a lista de ferramentas disponíveis.
DevTools - Novidades em DevTools 104
Publicado em 5 de agosto de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 104.
DevTools - Novidades em DevTools 103
Publicado em 5 de julho de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 103.
DevTools – Depurar a Web em 3D
Publicado em 21 de junho de 2022.
A ferramenta 3D View no Microsoft Edge DevTools fornece uma representação tridimensional da página da Web que você está inspecionando. Use a ferramenta 3D View para depurar problemas comuns de desenvolvimento da Web, como:
- Nós DOM profundamente aninhados.
- Elementos fora do documento.
- Barras de rolagem indesejadas.
- Problemas de empilhamento de índice Z.
- Desempenho de camadas compostas.
Para saber mais sobre a ferramenta Modo de Exibição 3D, marcar navegar por camadas de página da Web, z-index e DOM usando a ferramenta 3D View ou Depurar a Web em 3D com a ferramenta 3D View.
DevTools - Use seu idioma preferencial em DevTools
Publicado em 9 de junho de 2022.
O Microsoft Edge DevTools dá suporte a 13 idiomas diferentes. Neste vídeo, a equipe mostra como escolher o idioma mais confortável para você para codificação e depuração.
Para saber mais sobre como alterar as configurações do idioma DevTools, marcar alterar configurações de linguagem DevTools.
Para relatar quaisquer erros de tradução, marcar entre em contato com a equipe do Microsoft Edge DevTools.
DevTools - Novidades em DevTools 102
Publicado em 1 de junho de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 102.
Plataforma Web – estilo completo a parte suspensa de um <select> com o novo <selectmenu> elemento
Publicado em 31 de maio de 2022.
Elementos de estilo <select> têm sido desafiadores. O elemento experimental <selectmenu> promete superar as limitações restantes, permitindo que os desenvolvedores Web estilizem todas as partes do elemento.
Para saber mais sobre elementos de estilo <select> e o novo <selectmenu> elemento, consulte a postagem do blog Elementos de estilo <select> de verdade.
DevTools – Filtragem de problemas avançados no Edge DevTools e no VSCode
Publicado em 20 de maio de 2022.
Cada produto Web tem problemas. A ferramenta Problemas do Microsoft Edge DevTools analisa a página da Web atual e relata problemas agrupados por tipo, incluindo acessibilidade, compatibilidade, desempenho e muito mais.
Se você tiver Visual Studio Code, a extensão Microsoft Edge DevTools para Visual Studio Code disponibilizará problemas diretamente no código-fonte.
Os produtos lançados também podem ter muitos problemas. Com base em seus comentários, adicionamos maneiras úteis de filtrar problemas. Você pode desabilitar problemas provenientes de bibliotecas de terceiros, por exemplo, e escolher sobre quais navegadores exibir problemas.
Para saber mais sobre a ferramenta Problemas, consulte Localizar e corrigir problemas usando a ferramenta Problemas.
Para saber mais sobre a extensão DevTools do Microsoft Edge para Visual Studio Code, consulte a extensão DevTools do Microsoft Edge para Visual Studio Code.
Plataforma Web – Criar uma animação vinculada a rolagem sem JavaScript
Publicado em 12 de maio de 2022.
Saiba mais sobre o próximo recurso de animações vinculadas à rolagem do CSS e como ele pode ser usado para criar um indicador de progresso de leitura em uma página da Web, sem usar JavaScript.
Animações vinculadas a rolagem do 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 .
Para reproduzir com o aplicativo de demonstração mostrado no vídeo, confira a demonstração do leitor renderizado e seu código-fonte.
Para saber mais sobre o recurso de animações vinculadas à rolagem do CSS, consulte @scroll-linha do tempo no MDN.
DevTools – Personalizando ferramentas de desenvolvedor do Microsoft Edge e acesso rápido a recursos
Publicado em 5 de maio de 2022.
Saiba como personalizar o DevTools para atender às suas necessidades.
Este vídeo aborda como encaixar ou desencaixar DevTools, abrir novas ferramentas e fechar as que você não precisa. Ele descreve como mover ferramentas na gaveta inferior e personalizar o tamanho e o tema do texto. O vídeo também explica como você pode usar os atalhos de teclado menu de comando para personalizar rapidamente DevTools.
DevTools - Novidades em DevTools 101
Publicado em 28 de abril de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 101.
Plataforma Web – Realçar texto na Web com a API de Destaque Personalizado do CSS
Publicado em 28 de abril de 2022.
Intervalos de estilo de texto na Web são muito úteis, mas historicamente tem sido uma coisa complicada de se fazer.
A nova API de Destaque Personalizado do CSS é o futuro de realçar intervalos de texto na Web. Ele fornece aos desenvolvedores Web recursos JavaScript e CSS que tornam mais fácil e eficiente o estilo de qualquer intervalo de texto.
Para obter mais informações, confira API de destaque personalizado do CSS: o futuro de realçar intervalos de texto na Web.
DevTools - Novidades em DevTools 100
Publicado em 19 de abril de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 100.
DevTools - Novidades em DevTools 99
Publicado em 21 de março de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 99.
DevTools - Novidades em DevTools 98
Publicado em 23 de fevereiro de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 98.
DevTools - Novidades em DevTools 97
Publicado em 1 de fevereiro de 2022.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 97.
DevTools - Novidades em DevTools 96
Publicado em 9 de dezembro de 2021.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 96.
DevTools – Depurar vazamentos de memória com a ferramenta Elementos Desanexados do Microsoft Edge
Publicado em 9 de dezembro de 2021.
Estamos entusiasmados em anunciar a nova ferramenta Elementos Desanexados no Microsoft Edge DevTools que ajuda você a investigar e resolve vazamentos de memória DOM.
Os vazamentos de memória ocorrem quando o código JavaScript de um aplicativo retém cada vez mais objetos na memória, em vez de liberá-los para o navegador coletar lixo. Criamos essa ferramenta 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.
Para obter mais informações, consulte Depurar vazamentos de memória DOM com a ferramenta Elementos Desapegados e ler a postagem correspondente Depurar vazamentos de memória com a ferramenta Elementos Desanexados do Microsoft Edge.
DevTools - Novidades em DevTools 95
Publicado em 8 de dezembro de 2021.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 95.
Plataforma Web – A API do EyeDropper
Publicado em 22 de novembro de 2021.
A equipe do Microsoft Edge especificou e implementou a nova API do EyeDropper em colaboração com o Chromium projeto de código aberto. Forneça comentários sobre problemas – WICG/eyedropper | github.com.
Muitos aplicativos criativos permitem que os usuários escolham cores de partes de uma janela de aplicativo ou até mesmo de toda a tela, normalmente usando uma metáfora de eyedropper. A API do EyeDropper permite que os autores usem um eyedropper fornecido pelo navegador na construção de seletores de cores personalizados na Web.
Para obter mais informações, confira Escolher cores de qualquer pixel na tela com a API do EyeDropper | web.dev e a API do EyeDropper – APIs Web | MDN developer.mozilla.org.
DevTools - Novidades em DevTools 94
Publicado em 12 de novembro de 2021.
Saiba mais sobre nossos últimos anúncios da equipe do Microsoft Edge DevTools no What's New no DevTools 94.