Depurar suplementos usando ferramentas de desenvolvedor no Versão Prévia do Microsoft Edge

Este artigo mostra como depurar o código do lado do cliente (JavaScript ou TypeScript) do suplemento quando as seguintes condições forem atendidas.

  • Você não pode ou não deseja depurar usando ferramentas internas no IDE; ou você está encontrando um problema que só ocorre quando o suplemento é executado fora do IDE.
  • Seu computador está usando uma combinação de versões do Windows e do Office que usam o controle webview original do Edge, EdgeHTML.

Dica

Para obter informações sobre a depuração com o Edge Legacy dentro do Visual Studio Code, consulte Extensão de Depurador de Suplemento do Microsoft Office para Visual Studio Code.

Para determinar qual navegador ou webview você está usando, consulte Navegadores e controles de visão da Web usados pelos Suplementos do Office.

Dica

Em versões recentes do Office, uma maneira de identificar o controle webview que o Office está usando é por meio do menu de personalidade em qualquer suplemento em que ele está disponível. (O menu de personalidade não tem suporte no Outlook.) Abra o menu e selecione Informações de Segurança. Na caixa de diálogo Informações de Segurança no Windows, o Runtime relata microsoft Edge, Versão Prévia do Microsoft Edge ou Internet Explorer. O runtime não está incluído na caixa de diálogo em versões mais antigas do Office.

Observação

Para instalar uma versão do Office que usa a visão da Web herdada do Edge ou para forçar sua versão atual do Office a usar o Edge Legacy, consulte Alternar para o Edge Legacy Webview.

Depurar um suplemento de painel de tarefas usando o Microsoft Edge DevTools Preview

  1. Instale a Versão Prévia do Microsoft Edge DevTools. (A palavra "Versão prévia" está no nome por motivos históricos. Não há uma versão mais recente.)

    Observação

    Se o suplemento tiver um comando de suplemento que executa uma função, a função será executada em um processo de runtime oculto do navegador ao qual o Microsoft Edge DevTools não pode detectar ou anexar, portanto, a técnica descrita neste artigo não pode ser usada para depurar código na função.

  2. Carregar lateralmente e executar o suplemento.

  3. Execute o Microsoft Edge DevTools.

  4. Nas ferramentas, abra a guia Local. Seu suplemento será listado por nome. (Somente processos em execução no EdgeHTML aparecem na guia. A ferramenta não pode anexar a processos que estão em execução em outros navegadores ou visões da Web, incluindo Microsoft Edge (WebView2) e Internet Explorer (Trident).

    Edge DevTools mostrando um processo chamado herdado-edge-depuração.

  5. Selecione o nome do suplemento para abri-lo nas ferramentas.

  6. Abra a guia Depurador.

  7. Abra o arquivo que você deseja depurar com as etapas a seguir.

    1. Na barra de tarefas do depurador, selecione Mostrar localizar em arquivos. Isso abrirá uma janela de pesquisa.
    2. Insira uma linha de código do arquivo que você deseja depurar na caixa de pesquisa. Deve ser algo que não deve estar em nenhum outro arquivo.
    3. Selecione o botão atualizar.
    4. Nos resultados da pesquisa, selecione a linha para abrir o arquivo de código no painel acima dos resultados da pesquisa.

    Guia de depuração do Edge DevTools com 4 partes rotuladas como A por D.

  8. Para definir um ponto de interrupção, selecione a linha no arquivo de código. O ponto de interrupção é registrado no painel Pilha de chamadas (inferior direito). Também pode haver um ponto vermelho pela linha no arquivo de código, mas isso não aparece de forma confiável.

  9. Execute funções no suplemento conforme necessário para disparar o ponto de interrupção.

Dica

Para obter mais informações sobre como usar as ferramentas, consulte Ferramentas de Desenvolvedor do Microsoft Edge (EdgeHTML).

Depurar uma caixa de diálogo em um suplemento

Se o suplemento usar a API de Diálogo do Office, a caixa de diálogo será executada em um processo separado do painel de tarefas (se houver) e as ferramentas devem ser anexadas a esse processo. Siga estas etapas.

  1. Execute o suplemento e as ferramentas.

  2. Abra a caixa de diálogo e selecione o botão Atualizar nas ferramentas. O processo de caixa de diálogo é mostrado. Seu nome vem do <title> elemento no arquivo HTML que está aberto na caixa de diálogo.

  3. Selecione o processo para abri-lo e depurar, conforme descrito na seção Depurar um suplemento do painel de tarefas usando o Microsoft Edge DevTools Preview.

    Edge DevTools mostrando um processo chamado Minha Caixa de Diálogo.

Alternar para a webview do Edge Legacy

Há duas maneiras de alternar a visão web do Edge Legacy. Você pode executar um comando simples em um prompt de comando ou instalar uma versão do Office que usa o Edge Legacy por padrão. Recomendamos o primeiro método. Mas você deve usar o segundo nos cenários a seguir.

  • Seu projeto foi desenvolvido com o Visual Studio e o IIS. Não é baseado Node.js.
  • Você deseja ser absolutamente robusto em seus testes.
  • Se por algum motivo a ferramenta de linha de comando não funcionar.

Alternar pela linha de comando

Se o seu projeto for baseado em Node.js (ou seja, não desenvolvido com o Visual Studio e o IIS (servidor de informações da Internet)), você poderá forçar o Office no Windows a usar o controle Webview do EdgeHTML fornecido pelo Edge Legacy ou o controle de webview trident fornecido pela Internet Explorer executar suplementos, mesmo que você tenha uma combinação de versões do Windows e do Office que normalmente usariam uma visão da Web mais recente. Para obter mais informações sobre quais navegadores e visões da Web são usados por várias combinações de versões do Windows e do Office, consulte Navegadores e controles webview usados pelos Suplementos do Office.

Observação

A ferramenta usada para forçar a alteração no Webview só tem suporte no canal de assinatura Beta do Microsoft 365. Ingresse no programa Do Microsoft 365 Insider e selecione a opção Canal Beta para acessar builds do Office Beta. Consulte também Sobre o Office: qual versão do Office estou usando?.

Estritamente, é a opção webview dessa ferramenta (consulte Etapa 2) que requer o canal Beta. A ferramenta tem outros comutadores que não têm esse requisito.

  1. Se o projeto não foi criado com a ferramenta gerador Yeoman para Suplementos do Office , você precisará instalar a ferramenta office-addin-dev-settings. Execute o comando a seguir em um prompt de comando.

    npm install office-addin-dev-settings --save-dev
    

    Importante

    A ferramenta office-addin-dev-settings não tem suporte no Mac.

  2. Especifique a visão da Web que você deseja que o Office use com o comando a seguir em um prompt de comando na raiz do projeto. Substitua <path-to-manifest> pelo caminho relativo, que é apenas o nome do arquivo de manifesto se ele estiver na raiz do projeto. Substitua por <webview> ou edge-legacyie . Observe que as opções são nomeadas em homenagem aos navegadores nos quais as visões da Web se originaram. A ie opção significa "Trident" e a opção edge-legacy significa "EdgeHTML".

    npx office-addin-dev-settings webview <path-to-manifest> <webview>
    

    Apresentamos um exemplo a seguir.

    npx office-addin-dev-settings webview manifest.xml ie
    

    Você deve ver uma mensagem na linha de comando de que o tipo de webview agora está definido como IE (ou Edge Legacy).

  3. Quando terminar, defina o Office para retomar usando o webview padrão para sua combinação de versões do Windows e do Office com o comando a seguir.

    npx office-addin-dev-settings webview <path-to-manifest> default
    

Instalar uma versão do Office que usa o Edge Legacy

Use o procedimento a seguir para instalar uma versão do Office (baixada de uma assinatura do Microsoft 365) que usa o Versão Prévia do Microsoft Edge Webview (EdgeHTML) para executar suplementos ou uma versão que usa o Explorer da Internet (Trident).

  1. Em qualquer aplicativo do Office, abra a guia Arquivo na faixa de opções e selecione Conta ou Conta do Office. Selecione o botão Sobre nome do host (por exemplo, Sobre Word).

  2. Na caixa de diálogo aberta, localize o número completo de build xx.x.xxxxx.xxxxx e faça uma cópia dele em algum lugar.

  3. Baixar a Ferramenta de Implantação do Office.

  4. Execute o arquivo baixado para extrair a ferramenta. Você deve escolher onde instalar a ferramenta.

  5. Na pasta em que você instalou a ferramenta (onde o setup.exe arquivo está localizado), crie um arquivo de texto com o nome config.xml e adicione o conteúdo a seguir.

    <Configuration>
      <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
        <Product ID="O365ProPlusRetail">
          <Language ID="en-us" />
        </Product>
      </Add>
    </Configuration>
    
  6. Altere o Version valor.

    • Para instalar uma versão que usa EdgeHTML, altere-a para 16.0.11929.20946.
    • Para instalar uma versão que usa o Trident, altere-a para 16.0.10730.20348.
  7. Opcionalmente, altere o valor de OfficeClientEdition para "32" instalar o Office de 32 bits e altere o valor conforme necessário para instalar o Language ID Office em um idioma diferente.

  8. Abra um prompt de comando como administrador.

  9. Navegue até a pasta com os setup.exe arquivos e config.xml .

  10. Execute o seguinte comando:

    setup.exe /configure config.xml
    

    Esse comando instala o Office. Esse processo pode demorar alguns minutos.

  11. Desmarque o cache do Office.

Importante

Após a instalação, desative a atualização automática do Office para que o Office não seja atualizado para uma versão que não use a visão da Web com a qual você deseja trabalhar antes de concluir o uso. Isso pode acontecer em poucos minutos de instalação. Siga estas etapas.

  1. Inicie qualquer aplicativo do Office e abra um novo documento.
  2. Abra a guia Arquivo na faixa de opções e selecione Conta do Office ou Conta.
  3. Na coluna Informações do Produto, selecione Opções de Atualização e selecione Desabilitar Atualizações. Se essa opção não estiver disponível, o Office já está configurado para não ser atualizado automaticamente.

Quando terminar de usar a versão antiga do Office, reinstale sua versão mais recente editando o config.xml arquivo e alterando o para o Version número de build copiado anteriormente. Em seguida, repita o setup.exe /configure config.xml comando em um prompt de comando de administrador. Opcionalmente, habilite novamente as atualizações automáticas.