Partilhar via


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

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.

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

Clique numa miniatura da lista seguinte para watch o vídeo correspondente no YouTube.

Canal do Microsoft Edge no YouTube

Pode encontrar todos os vídeos sobre desenvolvimento com 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 da Consola de DevTools com Copilot no Edge

8 de fevereiro de 2024

Imagem em miniatura do vídeo

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.

Consulte também:

O visualizador JSON

17 de agosto de 2023

Imagem em miniatura do vídeo

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.

Consulte também:

Microsoft Edge | Novidades nas DevTools 113 e 114

24 de julho de 2023

Imagem em miniatura do vídeo

Capas:

  • A ferramenta Analisador de Falhas .
  • Estatísticas do seletor CSS agregado.
  • Avisos para propriedades CSS que acionam o esquema.
  • Melhorias na ferramenta de memória .
  • Melhorias de acessibilidade.
  • Melhor suporte para o 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

Capas:

  • Nomes JS não identificados para OOPIFs na ferramenta Desempenho .
  • Seletores CSS não simples na ferramenta de Descrição Geral do CSS .
  • Dobragem de código no visualizador JSON.
  • Melhorias na IU do DevTools.
  • Novos marcadores para pontos de registo 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

Capas:

  • Depurar remotamente conteúdo Web em dispositivos Xbox e HoloLens.
  • Nomes de funções e ficheiros não identificados na ferramenta Desempenho .
  • Pode copiar a tabela Estatísticas do Seletor CSS para o Excel.
  • Funcionalidades de composição de emulação na barra de ferramentas do Modo de Dispositivo.
  • Barra lateral da ferramenta Elementos Melhores.
  • Melhor acessibilidade da Vista Rápida .
  • Funcionalidades de cores de alta definição.
  • Personalizar 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

Capas:

  • A área dinâmica para dados snapshot gravações mais rápidas.
  • Personalização melhorada do Modo de Detalhe (IU de DevTools).
  • Melhorias nos temas de acessibilidade e contraste.
  • Impressão bonita automática no local na ferramenta Origens .
  • prefers-color-schemeSimular .

Consulte também:

Microsoft Edge | Novidades no DevTools 109

17 de janeiro de 2023

Imagem em miniatura do vídeo

Capas:

  • Rastreios melhorados para partilhar gravações de memória e desempenho.
  • Estatísticas do Seletor na ferramenta Desempenho .
  • Controle objetos recolhidos pela memória (GC'd) na ferramenta Memória .
  • Extensão de visualização de Instantâneo de Área Dinâmica para Dados.
  • Painel vista rápida redesenhada no Modo de Detalhe.
  • Novos comandos para os painéis Estilos .
  • Inspecionar elementos.

Consulte também:

Microsoft Edge | Novidades no DevTools 108

16 de dezembro de 2022

Imagem em miniatura do vídeo

Capas:

  • Navegação melhorada na Paleta de Comandos.
  • Correções do modo de alto contraste.
  • Aviso javaScript desativado.
  • Veja propriedades CSS inativas.
  • Nova documentação para criar as suas próprias ferramentas.
  • WebDriver disponível no macOS no Apple M1.
  • Utilize Elementos Desanexados para localizar fugas de DOM.

Consulte também:

Microsoft Edge | Novidades no DevTools 107

8 de novembro de 2022

Imagem em miniatura do vídeo

Capas:

  • Etiquetas de texto na IU de DevTools do Modo de Detalhe.
  • Novo atalho para a Paleta de Comandos.
  • Instantâneos de área dinâmica para dados grandes na ferramenta Memória .
  • Correções do modo de alto contraste.
  • Desative a opção "procurar à medida que escreve".
  • Automatize o WebView2 com o Playwright.
  • Personalizar atalhos.

Consulte também:

Microsoft Edge | Saiba como Utilizar a Ferramenta de Rede

6 de outubro de 2022

Imagem em miniatura do vídeo

Saiba como utilizar a Ferramenta de rede no Microsoft Edge DevTools.

Capas:

  • A razão pela qual a Ferramenta de rede no DevTools é essencial para os programadores Web.
  • Como os sites obtêm as informações de que precisam da Internet para serem apresentados no browser.
  • Quando utilizar a Ferramenta de rede .
  • Uma apresentação da IU da Ferramenta de rede .
  • Apresentar pedidos na ferramenta Rede .
  • Ver os detalhes de um pedido/resposta.
  • Personalizar a ferramenta rede .
  • Ordenar, filtrar e procurar pedidos.
  • Investigar problemas de desempenho.
  • Bloquear pedidos e exportar como ficheiros HAR.
  • Editar e reenviar pedidos.

Consulte também:

Microsoft Edge | Novidades no DevTools 106

3 de outubro de 2022

Imagem em miniatura do vídeo

Capas:

  • A experimentação da Paleta de Comandos.
  • Problemas de Correção Rápida na extensão do VS Code de DevTools do Edge.
  • As DevTools utilizam menos espaço em disco.
  • Melhor acessibilidade no Modo de Detalhe (IU de DevTools) e correção de erros de alto contraste.
  • Temas preteridos Chromium Claro/Escuro.
  • As novas interações são monitorizadas na ferramenta Desempenho .
  • Utilizar Fragmentos.

Consulte também:

Microsoft Edge | Novidades no DevTools 105

6 de setembro de 2022

Imagem em miniatura do vídeo

Capas:

  • Depuração do processamento do protocolo PWA.
  • Melhoramentos no Modo de Detalhe.
  • Correções de erros no Modo de Detalhe.
  • Fiabilidade melhorada das ferramentas de Rede e Problemas.
  • Editar código de função em direto durante a depuração.
  • Utilizar pontos de registo.

Consulte também:

Compreender a interface de utilizador de DevTools

1 de setembro de 2022

Imagem em miniatura do vídeo

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.
  • Como restaurar as predefinições.

Consulte também:

Microsoft Edge | Novidades no DevTools 104

5 de agosto de 2022

Imagem em miniatura do vídeo

Capas:

  • Correções de erros de composição/acessibilidade.
  • As camadas compostas estão agora na ferramenta Vista 3D e a ferramenta Camadas foi removida.
  • Agrupe ficheiros na ferramenta Origens .
  • Localize onde os nós são colocados em componentes Web.
  • Onde encontrar mais informações.
  • Como alterar o local onde a Barra de Atividade é colocada.

Consulte também:

Microsoft Edge | Novidades no DevTools 103

5 de julho de 2022

Imagem em miniatura do vídeo

Capas:

  • Ferramenta de Boas-vindas redesenhada.
  • Novo seletor de cores.
  • Novos tipos de snapshot de nó de área dinâmica para dados de memória.
  • Correção de erros 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 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:

  • Nós do DOM profundamente aninhados.
  • Elementos fora do documento.
  • Barras de deslocamento indesejadas.
  • Problemas de pilha de índice Z.
  • Desempenho das camadas compostas.

Consulte também:

Utilizar o seu idioma preferido no Microsoft Edge DevTools

9 de junho de 2022

Imagem em miniatura do vídeo

Como selecionar o idioma da IU mais confortável para si para codificar e depurar. O Microsoft Edge DevTools suporta mais de 13 idiomas diferentes.

Consulte também:

Microsoft Edge | Novidades no DevTools 102

1 de junho de 2022

Imagem em miniatura do vídeo

Capas:

  • Visual Studio Code.
  • Exportação de Instantâneos de Área Dinâmica para Dados.
  • Ciclos nós internos.
  • Ícone de Ajuda.
  • Problemas Corrigidos.

Consulte também:

Estilo completo da parte pendente de um HTML <select> com o novo <selectmenu> elemento

31 de maio de 2022

Imagem em miniatura do vídeo

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.

Consulte também:

Problemas avançados de filtragem no Edge DevTools e VSCode

20 de maio de 2022

Imagem em miniatura do vídeo

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.

Consulte também:

Criar uma animação ligada ao deslocamento sem JavaScript

12 de maio de 2022

Imagem em miniatura do vídeo

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 .

Consulte também:

Personalizar as Ferramentas de Programação do Microsoft Edge e o acesso rápido a funcionalidades

5 de maio de 2022

Imagem em miniatura para o vídeo

Saiba como personalizar DevTools de acordo com as suas necessidades. Capas:

  • Ancorar ou desancorar DevTools.
  • Abra novas ferramentas.
  • Feche as ferramentas de que não precisa.
  • Mova as ferramentas na Gaveta inferior (agora o painel Vista Rápida ).
  • Personalize o tamanho do texto.
  • Personalize o tema.
  • Utilize os atalhos de teclado do Menu de Comandos para personalizar rapidamente as DevTools.

Consulte também:

Realçar texto na Web com a API de Realce Personalizado do CSS

28 de abril de 2022

Imagem em miniatura do vídeo

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.

Consulte também:

Microsoft Edge | Novidades no DevTools 101

28 de abril de 2022

Imagem em miniatura do vídeo

Capas:

  • Utilizar a Consola.
  • Cache de Mapas de Origem.
  • Coluna de Texto de Estado.
  • Mudar de Temas.

Consulte também:

Microsoft Edge | Novidades no DevTools 100

19 de abril de 2022

Imagem em miniatura do vídeo

Capas:

  • 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.

Consulte também:

Microsoft Edge | Novidades no DevTools 99

21 de março de 2022

Imagem em miniatura do vídeo

Capas:

  • Servidor de Símbolos de Artefactos do Azure e esquemas de origem.
  • Painel Camadas Melhoradas na ferramenta Vista 3D .
  • Utilize os códigos de origem para desminificar perfis de desempenho.
  • Live ASP.NET depuração em DevTools para Visual Studio.
  • Acessibilidade na ferramenta Consola de Rede e na ferramenta Vista 3D .

Consulte também:

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

March 17, 2022

Imagem em miniatura do vídeo

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.

Consulte também:

Microsoft Edge | Novidades no DevTools 98

23 de fevereiro de 2022

Imagem em miniatura do vídeo

Capas:

  • Modo Emular Cores Forçadas.
  • Os ícones de atividade no registo de eventos da Ferramenta de desempenho têm descrições.
  • Os tamanhos rasos na ferramenta Memória são representados como valores decimais.
  • Na ferramenta Rede , a caixa Pesquisa redimensiona conforme necessário.
  • Na ferramenta Aplicação , a IU está alinhada corretamente.
  • Atualizações para o motor do browser Chromium.

Consulte também:

Microsoft Edge | Novidades no DevTools 97

1 de fevereiro de 2022

Imagem em miniatura do vídeo

Capas:

  • A ferramenta Elementos Desanexados está disponível por predefinição.
  • A ferramenta Vista 3D suporta a alteração de temas de cor nas DevTools.
  • Melhorias no Modo de Detalhe (IU de DevTools).
  • A extensão DevTools para VS Code tem funcionalidades adicionais.

Consulte também:

Depurar fugas de memória com a ferramenta Elementos Desanexados do Microsoft Edge

9 de dezembro de 2021

Imagem em miniatura do vídeo

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.

Consulte também:

Microsoft Edge | Novidades no DevTools 96

9 de dezembro de 2021

Imagem em miniatura do vídeo

Capas:

  • Nova IU de DevTools: Modo de Detalhe.
  • A ferramenta Consola pode estar nos painéis superior e inferior das DevTools.
  • A ferramenta Origens notifica-o quando os esquemas de origem não podem ser carregados.
  • Clicar no ícone de triângulo de uma lista pendente abre o menu.
  • Abrir ficheiros de origem no Visual Studio Code integra-se com a ferramenta Origens.

Consulte também:

Microsoft Edge | Novidades no DevTools 95

8 de dezembro de 2021

Imagem em miniatura do vídeo

Capas:

  • Ícone procurar na Web todas as mensagens de erro e aviso.
  • Acesso melhorado para definir sugestões de cliente User-Agent.
  • Os filtros da consola apresentam mensagens agrupadas.

Consulte também:

Microsoft Edge | The EyeDropper API

22 de novembro de 2021

Imagem em miniatura do vídeo

A equipa do Microsoft Edge especificou e implementou a nova API EyeDropper em colaboração com o Chromium projeto open source. Envie comentários em Problemas – WICG/selecionador de cores | github.com.

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.

Consulte também:

Microsoft Edge | Novidades no DevTools 94

12 de novembro de 2021

Imagem em miniatura do vídeo

Capas:

  • Procure erros da Consola 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:

  • Claro+
  • Escuro+

Consulte também:

Microsoft Edge | Novidades no DevTools 93

11 de outubro de 2021

Imagem em miniatura do vídeo

Capas:

  • IU do DevTools.
  • Depurar fugas de memória do nó DOM com a ferramenta Elementos Desanexados .
  • Alterar idioma de apresentação.
  • Copie as declarações CSS no painel Estilos da ferramenta Elementos para bibliotecas CSS-in-JS.
  • Personalização mais fácil do User-Agent Sugestões de Cliente.
  • Os leitores de ecrã anunciam erros, avisos e problemas apresentados na barra de ferramentas e na Consola.
  • Copiar como PowerShell na Ferramenta de rede inclui cookies.
  • O depurador Visual Studio Code integra-se com a 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 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.

Capas:

  • Trilhos de Tinta Digital Delegados.
  • Novas Capacidades Web para programadores.
  • Execute no início de sessão do SO.
  • Ferramentas do Microsoft Edge para VS Code.

Consulte também:

Ignite | Março de 2021 | A inflamar a história do Aplicativos Web

2 de março de 2021

Imagem em miniatura do vídeo

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).
  • Fazer com que os PWAs brilhem no Windows.
  • O melhor alcance da classe.
  • Instale um site como uma aplicação.
  • Envolva-se com PWAs no Windows.

Consulte também:

Ignite | Setembro de 2020 | As mais recentes ferramentas para programadores

22 de setembro de 2020

Imagem em miniatura do vídeo

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.
  • IU localizada em ferramentas de programador.
  • Acessibilidade em ferramentas de programador.

Consulte também:

Consulte também

YouTube: