Déboguer le code JavaScript pour les applications pilotées par modèle

La logique personnalisée utilisant JavaScript dans les applications pilotées par modèle est contenue dans les ressources Web JavaScript. Les ressources Web JavaScript fournissent les bibliothèques qui définissent les fonctions que les développeurs enregistrent en tant que gestionnaires d’événements.

Dans une application pilotée par modèle affichée dans un navigateur Web, vous pouvez utiliser les outils de développement fournis par tous les navigateurs modernes. Avec ces outils, vous pouvez localiser les bibliothèques JavaScript chargées dans l’application pilotée par modèle, définir des points d’arrêt et déboguer votre code à l’aide de méthodes courantes.

Les applications pilotées par modèle affichées à l’aide d’applications mobiles sur Android ou l’application de bureau Windows nécessitent quelques étapes supplémentaires. Voir :

• Déboguer JavaScript dans les applications mobiles sur Android
• Déboguer JavaScript dans l’application de bureau Windows

Pour plus d′informations :

• mdn web docs : Quels sont les outils de développement de navigateur ?.

  • Sources Microsoft Edge
  • Sources Google Chrome
  • Débogueur JavaScript Mozilla Firefox
  • Onglet Débogueur Apple Safari

Identifier la ressource Web JavaScript à l’origine de l’erreur

Lorsqu’un gestionnaire d’événements provoque une erreur de script dans une application pilotée par modèle, la boîte de dialogue suivante s’affiche :

Si vous cliquez sur le lien Afficher les détails, vous pouvez trouver les détails parmi lesquels figurent : le nom de l’événement, le nom de la fonction, le nom de la ressource Web, le nom de la solution et le nom de l’éditeur.

Xrm.Navigation.openalertDialog is not a function
Session Id: 53febd7c-3388-4ea5-a195-d84cf5883c30
Correlation Id: d154420e-5999-4250-b140-081f04a8e264
Event Name: onsave
Function Name: Example.formOnSave
Web Resource Name: example_example-form-script
Solution Name: Active
Publisher Name: DefaultPublisherYourOrg
Time: Tue Jan 31 2023 13:36:34 GMT-0800 (Pacific Standard Time)

Dans ce cas, le nom de la fonction était incorrect, openalertDialog devrait être openAlertDialog

Déboguer JavaScript dans les applications mobiles sur Android

Lorsque vous utilisez des ressources Web JavaScript pour des scénarios mobiles, vous pouvez utiliser votre appareil Android pour déboguer votre code spécifique aux mobiles et vous assurer qu’il fonctionne comme prévu.

Pour déboguer JavaScript dans les applications mobiles, vous devez suivre les trois étapes ci-dessous :

1. Configurer votre appareil

• Reportez-vous à la documentation Android pour activer les options de développeur et le débogage USB sur votre appareil. Plus d’informations : Développeurs Android : Configurer les options de développement sur l’appareil

• Dans le navigateur Microsoft Edge ou Chrome, découvrez votre appareil Android. Plus d’informations : Développeurs Chrome : Débogage à distance des appareils Android

  • Sur Microsoft Edge : edge://inspect/#devices
  • Sur Chrome : chrome://inspect/#devices

2. Configurer l’application mobile

1. Dans l’application mobile, accédez à la liste de Power Apps et faites votre sélection avec le bouton Menu.

2. Veillez à ce que le bouton à bascule Activer le débogage à distance pour les applications pilotées par modèle soit activé.

   

3. Lorsque vous activez cette option, une boîte de dialogue de confirmation s’affiche. Cliquez sur Confirmer.

   

3. Déboguer depuis votre machine de développement

1. Connectez votre appareil Android à votre ordinateur.

2. Ouvrez n’importe quelle application pilotée par modèle depuis Power Apps ou l’application Field Service Mobile

3. Sur la page edge://inspect/#devices de votre navigateur, recherchez l’URL de votre organisation dans la section Cible à distance.

   

4. Cliquez sur Inspecter.

Plus d’informations : Microsoft Edge : Déboguer à distance les appareils Android

Déboguer JavaScript dans l’application de bureau Windows

Pour déboguer JavaScript sous Windows, vous devez d’abord installer les applications prérequises.

• Vous devez avoir WebView2 Runtime installé sur votre machine avec une version minimale de 111. Télécharger Webview2 Runtime
• Vous devez installer les outils à distance pour Microsoft Edge à partir du Microsoft Store : Outils à distance pour Microsoft Edge - les applications du Microsoft Store

1. Configurer votre appareil Windows

1. Activez le mode développeur.

   1. Ouvrez Paramètres Windows > Confidentialité et sécurité > Pour les développeurs.
   2. Activez le mode Développeur.

2. Activez le portail de l’appareil.

   1. Ouvrez Paramètres Windows > Confidentialité et sécurité > Pour les développeurs.
   2. Activez le portail de l’appareil.
   3. Cliquez sur Oui pour installer le package du mode Développeur Windows à l’invite.
   4. Une fois le portail de l’appareil activé, notez l’URL que vous utiliserez pour vous connecter à l’aide de localhost. Sur la plupart des appareils, il s’agit de https://localhost:50080
   5. Pour le débogage Power Apps / Field Service Mobile au niveau local, vous pouvez continuer avec l’option Limiter aux connexions en boucle uniquement activée et Authentification désactivée (sinon vous devez définir un mot de passe utilisateur)

   Voici une capture d’écran récapitulant les paramètres recommandés pour les développeurs :

   

2. Configurer l’application Windows

Configurez Power Apps ou l’application de bureau Windows Field Service pour le débogage à distance.

Utilisez l’option Exécuter la commande (le raccourci est Windows + R) et utilisez le lien profond suivant pour lancer l’application Windows avec des arguments spéciaux.

• Power Apps: ms-apps://?addWebView2AdditionalBrowserArgument=--enable-features=msEdgeDevToolsWdpRemoteDebugging
• Field Service Mobile : ms-apps-fs://?addWebView2AdditionalBrowserArgument=--enable-features=msEdgeDevToolsWdpRemoteDebugging

3. Déboguer à partir de Windows

1. Lancez Power Apps ou Field Service pour Windows.

2. Ouvrez un navigateur Microsoft Edge et accédez à edge://inspect.

3. Utilisez la section Se connecter à un appareil Windows distant et connectez-vous à http://localhost:50080. La connexion prend quelques secondes, mais vous devriez voir l’URL de l’organisation.

   

4. Cliquez sur inspecter et DevTools s’ouvre.

Articles associés

Ressources web JavaScript
Déboguer une application pilotée par modèle avec Moniteur
Résoudre les problèmes liés à l’application mobile Power Apps