Vídeos sobre desenvolvimento para a Web com o Microsoft Edge
Artigo
Descubra e saiba mais sobre as novas tecnologias e produtos de desenvolvimento Web do Microsoft Edge, incluindo DevTools, APIs e funcionalidades da plataforma Web, Aplicativos Web Progressiva e WebView2.
Esta página contém ligações para vídeos curtos, cada um focado apenas numa funcionalidade e incluindo uma demonstração.
Explicar os erros da Consola de DevTools com Copilot no Edge
8 de fevereiro de 2024
As ferramentas Consola e Origens no Microsoft Edge DevTools integram-se agora com o Copilot no Microsoft Edge para o ajudar a compreender os erros e o código fonte. Utilize esta funcionalidade para obter ajuda com a depuração do código.
O visualizador JSON formatará e realça automaticamente os ficheiros e respostas JSON nos separadores do browser. Quando o servidor Web responde a pedidos HTTP com dados codificados como JSON, estes dados nem sempre são fáceis de ler e, por vezes, são devolvidos como uma linha de texto. O visualizador JSON altera os dados devolvidos para facilitar a leitura. A sintaxe JSON está realçada com cores diferentes, as propriedades do objeto são apresentadas nas suas próprias linhas e com avanço e os objetos podem ser fechados ou expandidos.
Este vídeo ligeiramente mais antigo (setembro de 2022) mostra a IU legada para DevTools:
Em vez da Barra de Atividade, o vídeo mostra a barra de ferramentas main.
Em vez do painel Vista Rápida , o vídeo mostra a Gaveta na parte inferior das DevTools.
Capas:
A estrutura de IU das DevTools, com a barra de ferramentas e o painel main na parte superior, e a barra de ferramentas e painel Gaveta na parte inferior.
Como a IU do Microsoft Edge DevTools está organizada.
O que fazem as partes main da interface DevTools.
Que ferramentas estão disponíveis.
A ferramenta Inspecionar .
Modo de Emulação do Dispositivo .
Ferramentas na barra de ferramentas main ou na Gaveta.
O botão Mais separadores .
O botão Mais ferramentas para ver todas as mais de 30 ferramentas.
Ferramentas de fecho.
Ferramentas de reordenação na barra de ferramentas main.
A Gaveta e a barra de ferramentas.
Mover ferramentas entre a barra de ferramentas main e a barra de ferramentas Gaveta.
A ferramenta 3D View no Microsoft Edge DevTools fornece uma representação tridimensional da página Web que está a inspecionar. Utilize a ferramenta Vista 3D para depurar problemas comuns de desenvolvimento Web, tais como:
Estilo completo da parte pendente de um HTML <select> com o novo <selectmenu> elemento
31 de maio de 2022
Os elementos de estilo <select> têm sido desafiantes. O elemento experimental <selectmenu> (ou <selectlist>) promete ultrapassar as limitações restantes ao permitir que os programadores Web estilizem todas as partes do elemento.
Atualização de junho de 2024: este novo elemento ainda é experimental. O <selectmenu> nome do elemento foi mudado para <selectlist> em 2023.
Problemas avançados de filtragem no Edge DevTools e VSCode
20 de maio de 2022
Todos os produtos Web têm problemas. A ferramenta Problemas de DevTools do Microsoft Edge analisa a página Web atual e reporta problemas agrupados por tipo, incluindo acessibilidade, compatibilidade, desempenho e muito mais.
A extensão DevTools do Microsoft Edge para Visual Studio Code disponibiliza problemas diretamente no código fonte.
Os produtos lançados podem ter problemas. Com base nos seus comentários, adicionámos formas úteis de filtrar problemas. Pode desativar os problemas provenientes de bibliotecas de terceiros e escolher os browsers para ver os problemas.
Criar uma animação ligada ao deslocamento sem JavaScript
12 de maio de 2022
Saiba mais sobre a funcionalidade animações ligadas a deslocamento CSS e como pode ser utilizada para criar um indicador de progresso da leitura numa página Web, sem utilizar JavaScript. Esta é uma funcionalidade da plataforma Web como um todo e não apenas do Microsoft Edge.
A partir de 21 de julho de 2023, esta funcionalidade já não é experimental e é agora suportada no Microsoft Edge sem um sinalizador. Descrição de 2022: as animações ligadas ao deslocamento CSS são uma funcionalidade experimental no Microsoft Edge; para experimentar esta funcionalidade, aceda a edge://flags e, em seguida, ative a definição funcionalidades de Plataforma Web Experimental .
Realçar texto na Web com a API de Realce Personalizado do CSS
28 de abril de 2022
Os intervalos de estilos de texto na Web são muito úteis, mas historicamente têm sido algo complicado de fazer.
A API de Realce Personalizado do CSS é o futuro da realce de intervalos de texto na Web. Esta API fornece aos programadores Web funcionalidades JavaScript e CSS que tornam mais fácil e eficiente o estilo de qualquer intervalo de texto.
O repositório Ferramentas para Programadores do Microsoft Edge, para submeter comentários e ideias.
Foram adicionados idiomas checo e vietnamita para a IU de DevTools.
Na ferramenta Memória , filtre instantâneos de área dinâmica para dados por tipo de nó.
A ferramenta Rede tem uma coluna Fulfilled By , que mostra a função de trabalho de serviço ou a cache.
As ligações de um perfil de desempenho importado utilizam mapas de origem do servidor de símbolos dos Artefactos do Azure para mapear novamente para o seu código fonte original familiar.
Descrições automáticas de imagens no Microsoft Edge
March 17, 2022
O Microsoft Edge fornece texto alternativo gerado automaticamente para imagens que não o incluem. O texto alternativo gerado automaticamente ajuda os utilizadores de tecnologia de apoio, como leitores de ecrã, a descobrir o significado ou a intenção de uma imagem na Web.
Muitas pessoas invisuais ou com dificuldades de visão experimentam a Web principalmente através de um leitor de ecrã: uma tecnologia de apoio que lê o conteúdo de cada página em voz alta. Os leitores de ecrã dependem de ter etiquetas de imagem (texto alternativo ou "texto alternativo") fornecidas que lhes permitem descrever conteúdos visuais , como imagens e gráficos, para que o utilizador possa compreender o conteúdo completo da página. O texto alternativo é fundamental para tornar a Web acessível, mas é muitas vezes ignorada. Mais de metade das imagens processadas por leitores de ecrã não têm texto alternativo.
Depurar fugas de memória com a ferramenta Elementos Desanexados do Microsoft Edge
9 de dezembro de 2021
Para depurar fugas de memória DOM, utilize:
A ferramenta Elementos Desanexados . Os nós desanexados têm uma ligação para o código JavaScript associado.
O tipo de criação de perfis de elementos desanexados na ferramenta Memória .
A ferramenta Elementos Destacados ajuda-o a investigar e a resolve fugas de memória DOM.
As fugas de memória ocorrem quando o código JavaScript de uma aplicação retém cada vez mais objetos na memória em vez de os libertar para o browser recolher lixo. Criámos a ferramenta Elementos Destacados com os programadores do Microsoft Teams e já nos ajudou a encontrar e corrigir fugas de memória em muitos dos nossos próprios sites e aplicações.
Muitas aplicações criativas permitem que os utilizadores escolham cores de partes de uma janela de aplicação ou mesmo de todo o ecrã, normalmente utilizando uma metáfora selecionadora. A API EyeDropper permite que os autores utilizem um selecionador de cores fornecido pelo browser na construção de selecionadores de cores personalizados na Web.
Os ícones de ponto de interrupção são apresentados ao utilizar temas Visual Studio Code.
A extensão DevTools para Visual Studio Code inclui as ferramentas mais recentes, suporte de temas e ligações úteis. Ligação do JavaScript Debugger a áreas de trabalho remotas.
Atualização: a partir do Microsoft Edge 131, a funcionalidade temas de Visual Studio Code é removida e esses temas reverter aos temas predefinidos:
O Microsoft Edge oferece uma plataforma e ferramentas apelativas e consistentes para os programadores. À medida que os nossos browsers legados saem do suporte, o Edge em breve será o único browser suportado pela Microsoft no Windows 10. Saiba mais sobre as mais recentes na plataforma, ferramentas e aplicações Web do Edge.
Ignite | Março de 2021 | A inflamar a história do Aplicativos Web
2 de março de 2021
As Aplicativos Web progressivas (PWA) são suportadas no Microsoft Edge e representam uma oportunidade para melhorar a deteção e o envolvimento com a sua aplicação. Novas capacidades da plataforma Web. Como estas aplicações Web modernas se integram perfeitamente com o Microsoft Windows.
Capas:
A capacidade de modernização.
Esforços conjuntos para capacitar a plataforma Web.
Microsoft Edge e o motor do browser Chromium.
Capacidades do Microsoft Edge e web (Project Fugu).
Ignite | Setembro de 2020 | As mais recentes ferramentas para programadores
22 de setembro de 2020
As ferramentas de programador do Microsoft Edge ajudam a facilitar o desenvolvimento, o teste e a automatização da Web. Saiba como priorizamos a acessibilidade nas nossas ferramentas e aplicações e como ajudamos as outras pessoas a fazer o mesmo.
Capas:
Extensão DevTools para VS Code.
Teste e automatização entre browsers. Selenium, WebDriver, Puppeteer, Playwright e CI/CD através de contentores do Docker.
Colaboração no motor do browser Chromium. Como contribuir.
Este módulo aborda vários conceitos sobre o tópico de acessibilidade e como adicioná-lo aos seus aplicativos Web durante o desenvolvimento para a Web. Você aprenderá a importância de usar tags HTML corretamente para descrever informações e várias melhorias que pode fazer em seus sites.