Depurar suplementos usando ferramentas de desenvolvedor no Microsoft Edge (baseado em Chromium)

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 do Edge (baseado em Chromium), WebView2.

Dica

Para obter informações sobre a depuração com o Edge WebView2 (baseado em Chromium) no Visual Studio Code, consulte Depurar suplementos no Windows usando Visual Studio Code e Microsoft Edge WebView2 (baseado em Chromium).

Para determinar qual visão da Web 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.

Depurar um suplemento de painel de tarefas usando ferramentas de desenvolvedor do Microsoft Edge (baseada em Chromium)

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 do qual as ferramentas de desenvolvedor do Microsoft Edge (baseadas em Chromium) não podem ser lançadas, portanto, a técnica descrita neste artigo não pode ser usada para depurar o código na função.

1. Carregar lateralmente e executar o suplemento.

   Observação

   Para carregar um suplemento no Outlook, confira Suplementos do Sideload Outlook para teste.

2. Execute as ferramentas de desenvolvedor do Microsoft Edge (baseada em Chromium) por um destes métodos:

   • Certifique-se de que o painel de tarefas do suplemento tenha foco e pressione Ctrl+Shift+I.
   • Clique com o botão direito do mouse no 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 tem suporte no Outlook.)

   Observação

   O novo cliente da área de trabalho do Outlook on Window (versão prévia) não dá 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, confira a seção "Depurar seu suplemento" de Desenvolver suplementos do Outlook para o novo Outlook no Windows (versão prévia).

3. Abra a guia Fontes .

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

   1. Na extrema direita da barra de menus superior da ferramenta, selecione o botão ... e selecione Pesquisar.
   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.

   

5. Para definir um ponto de interrupção, selecione o número de linha da linha no arquivo de código. Um ponto vermelho é exibido pela linha no arquivo de código. Na janela de 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 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 desse processo separado. Siga estas etapas.

1. Execute o suplemento.

2. Abra a caixa de diálogo e certifique-se de que ela tenha foco.

3. Abra as ferramentas de desenvolvedor do Microsoft Edge (baseada em Chromium) por um destes métodos:

   • Pressione Ctrl+Shift+I ou F12.
   • Clique com o botão direito do mouse na caixa de diálogo para abrir o menu de contexto e selecione Inspecionar.

4. Use a ferramenta da mesma maneira que você faria para o código em um painel de tarefas. Consulte Depurar um suplemento de painel de tarefas usando ferramentas de desenvolvedor do Microsoft Edge (baseada em Chromium) anteriormente neste artigo.