Depurar componentes de código

Este artigo explica como depurar componentes de código durante o desenvolvimento e após a implantação para Microsoft Dataverse. Use testes de unidade para validar a lógica do componente independentemente do runtime da estrutura de componentes Power Apps.

Este artigo mostra como depurar seus componentes de código usando o ambiente de teste e após implantá-los no Microsoft Dataverse:

• Depurar componentes de código
  • Depurar componentes de código com o cinto de teste do navegador
    • Testar componentes de código com dados fictícios
    • Limitações comuns ao usar o arreio de teste
  • Usar ferramentas de desenvolvedor do navegador para depurar componentes de código
    • Agrupar componentes de código com webpack
    • Usar ferramentas de desenvolvedor para depurar componentes de código
    • ES5 vs ES6
  • Depurar componentes de código após a implantação no Microsoft Dataverse
    • Usar o Fiddler para depurar componentes de código
    • Usar solicitação para depurar componentes de código

Depurar componentes de código com o cinto de teste do navegador

Enquanto você estiver implementando a lógica do componente de código, usar npm start ou npm start watch cria o componente de código e abre o ambiente de teste local em uma nova janela do navegador. Essa estrutura de teste faz parte da CLI do Microsoft Power Platform e, portanto, é a mesma, independentemente de você pretender usar seu componente de código em aplicativos baseados em modelo, aplicativos de tela ou portais. Mais informações: crie seu primeiro componente.

A imagem a seguir mostra como o Visual Studio Code fica quando você usa o npm start watch para o exemplo DataSetGrid:

Iniciar o arreio de teste no watch modo permite que você veja rapidamente as alterações em ação. As alterações feitas em qualquer um dos seguintes ativos de componente são refletidas automaticamente no arreio de teste sem precisar reiniciá-lo:

1. arquivo index.ts.
2. Módulos importados em index.ts (excluindo node_modules).
3. Todos os recursos listados no ControlManifest.Input.xml arquivo, por exemplo, css/DataSetGrid.css ou strings/DataSetGrid.1033.resx

Se você fizer alterações em qualquer um desses arquivos, verá uma Change detected mensagem e o navegador recarrega com o código atualizado.

A imagem a seguir mostra o arreio de teste quando ele é aberto em uma nova janela do navegador:

Como mostra a imagem acima, a janela do navegador é aberta para exibir quatro áreas. O componente de código é renderizado no painel esquerdo, enquanto o painel direito tem três seções que dependem do tipo de componente que está sendo depurado:

• As Entradas de Contexto são mostradas para todos os tipos de componente de código:

  • Form Factor: Permite especificar o fator de forma e testar o componente de código em cada fator de forma (web, tablet, telefone). O fator de forma é útil quando o componente de código muda seu layout conforme o local em que o componente é carregado. Você pode detectar o formato no código usando context.client.getFormFactor().
  • Largura e Altura do Contêiner do Componente: inicialmente, a largura e a altura estão vazias. Isso coloca o componente de código dentro de um contêiner div que não tem conjunto de estilos CSS de largura ou altura. Se você fornecer uma largura ou altura, o contêiner div terá suas dimensões restritas para que você possa ver como o componente de código se adapta ao espaço disponível. Você precisa testar cuidadosamente o comportamento dos componentes de código dentro de Power Apps uma vez implantado, pois o comportamento exato é diferente do do arreio de teste. Além disso, seu componente precisa fazer uma chamada para context.mode.trackContainerResize(true) se quiser receber context.mode.allocatedHeightcontext.mode.allocatedWidth no método updateView; no entanto, o harness de teste sempre fornece a altura e a largura, independentemente dessa chamada. Mais informações: trackContainerResize.

  Note

  Ao usar o ambiente de teste, allocatedWidth e allocatedHeight serão fornecidos como texto em vez de valores numéricos.

• As Entradas de Dados são uma interface do usuário interativa que exibe todas as propriedades e seus tipos ou gruposde tipos definidos no arquivo de manifesto . O conteúdo desta área depende das propriedades e dos conjuntos de dados definidos no ControlManifest.Input.xml e permite fornecer dados simulados para fins de teste.

• As saídas renderizam a saída sempre que o método getOutputs de um componente é chamado.

Testar componentes de código com dados fictícios

• Para componentes com elementos property em ControlManifest.Input.xml, a seção Entradas de Dados mostra uma caixa de entrada para cada valor.

  

• Para componentes de tipo de conjunto de dados , você pode carregar um arquivo CSV com dados de teste para cada elemento de conjunto de dados . Você cria ou exporta manualmente no formato .csv diretamente do seu ambiente. Depois de carregar um arquivo CSV, você pode vincular cada conjunto de propriedades definido em ControlManifest.Input.xml a uma coluna no arquivo CSV. A captura de tela a seguir mostra como essa associação é feita escolhendo a coluna para cada propriedade:

  

• Se você não tiver nenhuma propriedade definida no ControlManifest.Input.xml arquivo, todas as colunas serão carregadas automaticamente no cinto de teste. A captura de tela a seguir mostra como você pode atribuir o tipo de dados ao componente de código para cada coluna no CSV de origem:

  

Limitações comuns ao usar o arreio de teste

Embora o arreio de teste seja adequado para testar componentes de código simples, os seguintes cenários podem significar que o arreio de teste não pode ser usado para testar um componente de código mais complexo:

1. O array updatedProperties não é preenchido quando as propriedades são alteradas na seção Entradas de dados da estrutura de teste.
2. Usando os recursos listados na seção feature-usage do ControlManifest.Input.xml. Por exemplo, chamar os métodos context.WebApi.* lança uma exceção dentro da infraestrutura de teste.
3. O uso das APIs de paginação, classificação e filtragem em conjuntos de dados gera uma exceção de dentro do cinto de teste.
4. Uso de associações de tipo de dados complexas que fornecem mais metadados, como opções e pesquisas. Para colunas de opções, a estrutura de teste oferece três opções simples com metadados mínimos.
5. Especificidades dos aplicativos baseados em modelo, como segurança em nível de campo, comportamento de somente leitura, API de seleção de conjunto de dados e integração com a barra de comandos dos aplicativos baseados em modelo.
6. Outras APIs de contexto, como métodos de Navegação e utilitários.

Para testar esses cenários, primeiro você precisa implantar seu componente de código e testá-lo usando a técnica descrita em Depurar componentes de código após a implantação no Microsoft Dataverse

Usar ferramentas de desenvolvedor do navegador para depurar componentes de código

Os navegadores modernos têm um conjunto interno de ferramentas de desenvolvedor que permitem inspecionar o HTML, o CSS e o JavaScript carregados na página atual. Você pode acessar essas ferramentas de desenvolvedor usando o atalho Ctrl++ShiftIde teclado. Usar a tecla F12 também é um atalho de teclado comum para abrir as ferramentas do desenvolvedor; no entanto, esse atalho não funciona no Power Apps Studio, porque já é usado pelo atalho de teclado Download App.

Empacotar componentes de código-fonte com webpack

Quando você escreve componentes de código usando TypeScript, seu código provavelmente parece diferente do JavaScript emitido na saída do componente de código agrupado. Quando você executa npm start ou npm start watch, o módulo pcf-scripts (adicionado ao packages.json ao executar pac pcf init) usa o Webpack para compilar vários arquivos TypeScript em um único bundle.js dentro da pasta out. Esta pasta também contém quaisquer outros recursos (por exemplo, html/css) referenciados pelo seu ControlManifest.Input.xml, incluindo o próprio manifesto, mas nomeado simplesmente como ControlManifest.xml.

Quando você usa recursos modernos da linguagem TypeScript, como import/export ou async/await, que não são compatíveis com a versão de JavaScript de destino (por exemplo, ES5), o processo de build transpila o TypeScript para JavaScript sem usar esses recursos de linguagem. Os mapas de origem gerados como parte da compilação de desenvolvimento fornecem as informações para as ferramentas do desenvolvedor, para que os locais dos pontos de interrupção no seu TypeScript possam ser mapeados para as linhas correspondentes de JavaScript. Da mesma forma, quando ocorre uma exceção ou você percorre o código, você pode ver a linha TypeScript original em vez do JavaScript transpilado subjacente.

Outro recurso de agrupamento é que, quando você usa npm install para incluir um módulo externo, o processo de build adiciona o módulo necessário ao componente de bundle.js código usando o conteúdo do diretório associado node_modules . Por esse motivo, quaisquer módulos externos usados devem ser empacotados de forma que possam ser incluídos no pacote. Mais informações: práticas recomendadas: importações de módulo.

Usar ferramentas de desenvolvedor para depurar componentes de código

Esta seção descreve como depurar seu componente de código dentro das ferramentas de desenvolvedor do Microsoft Edge:

1. Carregue o componente de código em uma sessão do navegador usando:

   1. O arreio de teste usando npm start watch.
   2. Uma versão de desenvolvimento local do seu componente de código carregada em um aplicativo baseado em modelo, aplicativo de tela ou sessão do navegador do portal. Você não precisa implantar uma versão de desenvolvimento do seu componente de código no servidor do Dataverse. Em vez disso, você pode usar o Auto Responders do Fiddler, conforme descrito em Depurar componentes de código após a implantação no Microsoft Dataverse.

2. Selecione Ctrl + + ShiftI para abrir as ferramentas de desenvolvedor.

3. Selecione a guia Fontes dentro do painel ferramentas do desenvolvedor.

4. Use Ctrl + P para mostrar o palete de comando Abrir Arquivo . Você também pode selecionar Abrir arquivo no menu de reticências.

5. Insira o nome do controle (que é o nome do controle usado no pac pcf init).

6. Selecione, na lista de correspondências, o arquivo semelhante a: webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./DataSetGrid/index.ts

   

7. Localize a updateView função e coloque um ponto de interrupção na primeira linha.

8. Faça uma alteração nas propriedades associadas ao componente de código. No ambiente de teste, é possível alterar propriedades usando o painel de propriedades ou, no Power Apps, fazer uma alteração em uma propriedade vinculada ou em um conjunto de dados. Alterar propriedades aciona uma chamada para updateView.

9. Agora você verá seu ponto de interrupção atingido e poderá inspecionar o código.

   

10. Você também pode inspecionar os elementos HTML e o CSS criados pelo componente usando a guia Elements. Se houver um conjunto específico de interações que queira inspecionar (elemento contêiner raiz), você poderá definir um ponto de interrupção no elemento DOM HTML usando o menu de contexto (enquanto o elemento raiz estiver selecionado) >Interromper em>modificações na subárvore

    

ES5 vs ES6

Atualmente, por padrão, os componentes de código são configurados para transpilar para o JavaScript ES5 para que os navegadores mais antigos sejam compatíveis. Você poderá alterar o destino para O ES6 se não precisar dar suporte a navegadores mais antigos definindo-o target em seus projetos tsconfig.json como ES6:

{
  "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
  "compilerOptions": {
    "target": "ES6",
    "typeRoots": ["node_modules/@types"]
  }
}

Depurar componentes de código após a implantação no Microsoft Dataverse

Para testar totalmente a lógica no contexto de um aplicativo baseado em modelo, aplicativo de tela ou portal, você pode primeiro implantar e configurar seu componente de código no Microsoft Dataverse e, em seguida, usar o recurso AutoResponder do Fiddler ou o requestly. Em ambos os casos, você carregará um build de desenvolvimento do componente de código (criado localmente) no navegador sem precisar implantar continuamente as alterações à medida que depura o código. Depurar dessa forma permite que você depure em um ambiente downstream que não seja de desenvolvimento sem precisar antes implantar uma versão de desenvolvimento.

Primeiro, verifique se o componente está implantado e configurado no Microsoft Dataverse. Idealmente, você deve publicar no Microsoft Dataverse apenas versões de produção dos componentes de código. Para componentes de código maiores, publicar um build de desenvolvimento pode resultar no erro O tamanho do recurso da Web é muito grande. Como vamos redirecionar o bundle.js do componente de código para uma versão compilada localmente, você pode atualizar o arquivo .pcfproj para sempre compilar no modo de produção ao usar pac pcf push, definindo a propriedade PcfBuildMode como production.

<PropertyGroup>
  <Name>ReactStandardControl</Name>
  <ProjectGuid>0df84c56-2f55-4a80-ac9f-85b7a14bf378</ProjectGuid>
  <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
  <PcfBuildMode>production</PcfBuildMode>
</PropertyGroup>

Usar o Fiddler para depurar componentes de código

Para depurar o componente de código usando o Fiddler:

1. Baixar e instalar o Fiddler Classic

2. Abra o Fiddler e, na barra de menus, vá para Ferramentas e selecione Opções.

3. Selecione a guia HTTPS na caixa de diálogo e marque as caixas de seleção Capturar HTTPS CONNECTS e Descriptografar tráfego HTTPS para que o tráfego HTTPS seja capturado e descriptografado.

   

4. Selecione OK para fechar a caixa de diálogo.

   Note

   • Se for a primeira vez que você estiver habilitando essa configuração, o Fiddler solicitará que você instale um certificado. Instale o certificado e reinicie o Fiddler para que as novas configurações entrem em vigor.
   • Se você tiver executado o Fiddler no passado e receber um NET::ERR_CERT_AUTHORITY_INVALID erro, na guia HTTPS , selecione o botão Ações e escolha Redefinir Todos os Certificados. Isso também exibirá várias solicitações para instalar os novos certificados.

5. No painel direito, selecione a guia AutoResponder .

6. Verifique se as regras de habilitação e a passagem de solicitações não compatíveis são verificadas.

7. Selecione Adicionar Regra e insira primeiro:

   REGEX:(.*?)((?'folder'css|html)(%252f|\/))?YOUR_NAMESPACE\.YOUR_CONTROL_NAME[\.\/](?'fname'[^?]*\.*)(.*?)$
   

   onde:

   • YOUR_NAMESPACE - o namespace que você forneceu para pac pcf init , conforme contido no control.namespace atributo do ControlManifest.Input.xml
   • YOUR_CONTROL_NAME - o nome do componente que você forneceu ao pac pcf init e definiu no atributo control.constructor de ControlManifest.Input.xml

   Essa regra tem como objetivo fazer a correspondência das solicitações para o componente de código bundle.js e os recursos relacionados (css/html) de forma que funcione tanto para aplicativos baseados em modelo quanto para aplicativos de tela, tanto no Power Apps Studio quanto no Player.

   Um exemplo dessa regra se parece com o seguinte:

   

   Se você quiser uma abordagem mais simples para regras do AutoResponder, consulte Desenvolvimento de recursos Web de script usando o Auto Responder do Fiddler.

8. Insira uma string como esta para o caminho com o qual responder:

   C:\COMPONENT_ROOT_FOLDER\out\controls\YOUR_CONTROL_NAME\${folder}\${fname}
   

   Por exemplo, se a pasta raiz do componente de código for C:\src\PowerApps-Samples\component-framework\DataSetGrid e o nome do componente for DataSetGrid, o caminho será:

   C:\src\PowerApps-Samples\component-framework\DataSetGrid\out\controls\DataSetGrid\${folder}\${fname}
   

9. Clique em Salvar.

10. Abra a guia Filtros e verifique Usar Filtros. Na seção Cabeçalhos de Resposta , verifique Definir cabeçalho de resposta e forneça o seguinte:

    Cabeçalho: Access-Control-Allow-Origin

    Valor: *

    

    Importante

    Esta etapa só é necessária ao depurar componentes de código depois que eles são implantados em aplicativos de canvas, porque os recursos são armazenados no armazenamento de blobs em vez de sob o domínio powerapp.com. Dessa forma, todas as solicitações a esses recursos exigirão acesso entre domínios quando carregadas pelo navegador. Habilite essa Access-Control-Allow-Origin regra de filtro somente quando você estiver depurando, pois ela modificará cabeçalhos de outros sites visitados.

11. Agora que você tem as regras do AutoResponder em execução, precisará primeiro limpar o cache no navegador e recarregar a página que contém o componente de código. Isso pode ser feito facilmente abrindo as ferramentas do desenvolvedor (Ctrl + Shift + I), clicando com o botão direito em Refresh>Esvaziar cache e recarregar forçadamente.

    

12. Depois que o componente de código for carregado do computador local, você poderá fazer alterações no código (enquanto npm start watch estiver em execução) e atualizar o navegador para carregar as versões recém-criadas. O Respondente Automático do Fiddler adicionará automaticamente um cabeçalho de controle de cache para que ele não seja armazenado em cache pelo navegador, portanto, uma atualização simples recarregará os recursos sem precisar limpar o cache todas as vezes.

Use o Requestly para depurar componentes de código

Para depurar seu componente de código usando Requestly:

1. Habilite Serviços de Informações da Internet (IIS) em seu computador.

   1. Abra Painel de Controle e selecione Programas e Recursos> ativar ou desativarrecursos Windows.
   2. Habilitar Serviços de Informações da Internet.
   3. Expanda o Serviços de Informações da Internet e verifique se os componentes do servidor Web listados na próxima seção estão habilitados.
   4. Selecione OK.

2. Instalação do ISS

   1. Abra o IIS em seu computador.
   2. No painel direito Conexões, expanda a árvore e clique com o botão direito do mouse em Sites.
   3. Adicionar site.
   4. Definir o nome do site .
   5. Defina o caminho físico para sua pasta de componente personalizada, por exemplo, C:\COMPONENT_ROOT_FOLDER\out\controls\YOUR_CONTROL_NAME\
   6. Definir Porta (qualquer número, por exemplo, 7777).
   7. Selecione OK. A pasta selecionada agora está hospedada em http://localhost:<SELECTED_PORT>

   

3. Baixe e instale Requestly

4. Siga as etapas de configuração inicial da ferramenta.

5. Regras abertas (navegue até https://app.requestly.io/rules).

6. Adicione a regra "Substituir Host":

   1. Defina o nome da regra.
   2. Definir o campo "Substituir" com https://[ORG_URL]/[APPLICATION_ID]/webresources/[YOUR_NAMESPACE].[YOUR_CONTROL_NAME]/
   3. Defina "With" com http://localhost:<SELECTED_PORT>
   4. Definir "Se a solicitação" com "URL" "Contém" [YOUR_NAMESPACE].[YOUR_CONTROL_NAME]
   5. Salve a regra e habilite-a.

   

7. Agora você precisa limpar o cache no navegador e recarregar a página que contém o componente de código. Você pode limpar o cache no navegador e recarregar a página ao abrir as ferramentas do desenvolvedor (Ctrl + Shift + I), clicar com o botão direito em Atualizar> e selecionar Esvaziar cache e recarregar totalmente.

   

8. Depois que o componente de código for carregado do computador local, você poderá fazer alterações no código (enquanto npm start watch estiver em execução) e atualizar o navegador para carregar as versões recém-criadas. O Requestly adiciona automaticamente um cabeçalho Cache-Control para que o navegador não armazene os recursos em cache, de modo que uma simples atualização recarregue os recursos sem precisar limpar o cache todas as vezes.

Artigos relacionados

Referência da API da estrutura de componentes do Power Apps
visão geral da estrutura de componentes Power Apps
ALM (Gerenciamento do Ciclo de Vida do Aplicativo)
Criar seu primeiro componente