Depurar suplementos usando ferramentas de desenvolvedor no Microsoft Edge

Este artigo mostra como depurar o código do lado do cliente (JavaScript ou TypeScript) do seu suplemento fora do IDE atual.

Depurar um suplemento de painel de tarefas usando as ferramentas de desenvolvedor do Microsoft Edge

Observação

Se o suplemento tiver um comando do suplemento que executa uma função, a função será executada em um processo de tempo de execução do navegador oculto do qual as ferramentas de desenvolvedor do Microsoft Edge não podem ser iniciadas, portanto, a técnica descrita neste artigo não pode ser usada para depurar o código na função.

  1. Faça o sideload e execute o suplemento.

    Observação

    Para fazer sideload de um suplemento no Outlook, consulte Fazer sideload de suplementos do Outlook para teste.

  2. Execute as ferramentas de desenvolvedor do Microsoft Edge por um destes métodos:

    • Verifique se o painel de tarefas do suplemento está em foco e pressione Ctrl+Shift+I.
    • Clique com o botão direito do mouse (ou selecione e segure) o painel de tarefas para abrir o menu de contexto e selecione Inspecionar ou abra o menu de personalidade e selecione Anexar Depurador. (O menu de personalidade não é suportado no Outlook.)

    Observação

    O novo cliente de área de trabalho do Outlook no Windows não oferece suporte ao menu de contexto ou ao atalho de teclado para acessar as ferramentas de desenvolvedor do Microsoft Edge. Em vez disso, você deve executar olk.exe --devtools a partir de um prompt de comando. Para obter mais informações, consulte a seção "Depurar seu suplemento" de Desenvolver suplementos do Outlook para o novo Outlook no Windows.

  3. Abra a guia Fontes .

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

    1. Na extremidade direita da barra de menus superior da ferramenta, selecione o botão ... e, em seguida, selecione Pesquisar.
    2. Insira uma linha de código do arquivo que você deseja depurar na caixa de pesquisa. Deve ser algo que provavelmente não 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 Fonte das ferramentas de desenvolvedor do Edge com 4 partes rotuladas de A a D.

  5. Para definir um ponto de interrupção, selecione o número de linha da linha no arquivo de código. Um ponto vermelho aparece na linha do arquivo de código. Na janela do depurador à direita, o ponto de interrupção é registrado na lista suspensa Pontos de interrupção .

  6. 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 Visão geral das Ferramentas de Desenvolvedor do Microsoft Edge.

Depurar uma caixa de diálogo em um suplemento

Se o suplemento usar a API de Caixa de Diálogo do Office, a caixa de diálogo será executada em um processo separado do painel de tarefas (se houver) e a ferramenta deverá ser iniciada a partir desse processo separado. Siga estas etapas.

  1. Execute o suplemento.

  2. Abra a caixa de diálogo e verifique se ela tem foco.

  3. Abra as Ferramentas de desenvolvedor do Microsoft Edge usando um destes métodos:

    • Pressione Ctrl+Shift+I ou F12.
    • Clique com o botão direito do mouse (ou selecione e segure) a caixa de diálogo para abrir o menu de contexto e selecione Inspecionar.
  4. Use a ferramenta da mesma forma que faria para o código em um painel de tarefas. Confira Depurar um suplemento de painel de tarefas usando as Ferramentas de Desenvolvedor do Microsoft Edge anteriormente neste artigo.

Abrir automaticamente as ferramentas de desenvolvedor do Microsoft Edge para depurar a inicialização

Para depurar a sequência de inicialização do suplemento, configure o ambiente para que as ferramentas de desenvolvedor do Microsoft WebView2 abram automaticamente quando o suplemento for iniciado.

  1. Feche o aplicativo do Office no qual você planeja depurar o suplemento.
  2. Defina a variável de WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS ambiente para incluir o valor --auto-open-devtools-for-tabs.
  3. Abra o aplicativo do Office.
  4. Execute o suplemento.
  5. As ferramentas de desenvolvedor do Microsoft Edge devem abrir automaticamente. Use a ferramenta da mesma forma que faria ao depurar um painel de tarefas, conforme especificado em Depurar um suplemento do painel de tarefas usando as ferramentas de desenvolvedor do Microsoft Edge.

Observação

Você pode ver outras instâncias da ferramenta de desenvolvedor do Microsoft Edge abrindo automaticamente, pois essa variável de ambiente afetará todas as instâncias do WebView2 em seu sistema.