Déboguer votre application Web Interactive Canvas avec les outils pour les développeurs Chrome
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Vous pouvez déboguer votre application Web Interactive Canvas à l'aide des outils pour les développeurs Chrome. Le débogueur Chrome est compatible avec les écrans connectés Google Home et Google Nest dotés de la version logicielle 30 ou ultérieure (le déploiement de cette mise à jour commence en octobre 2020) et de la version 1.50 ou ultérieure du micrologiciel Cast. Vous pouvez consulter les versions sous System settings / About device sur votre écran connecté.
Configurer votre environnement
Avant de pouvoir procéder au débogage, procédez comme suit pour configurer correctement votre environnement:
Activez votre action à des fins de test dans le simulateur de la console Actions.
Connectez votre ordinateur au même réseau local que l'appareil Google Home ou Google Nest que vous testez.
Assurez-vous que votre réseau ne bloque pas les paquets entre les appareils.
Connectez-vous avec le même compte Google dans la console Actions et sur l'appareil Google Home ou Google Nest.
Une fois que votre environnement est prêt, vous pouvez lancer votre action sur votre écran connecté de test.
Connecter l'application Web Canvas au débogueur
Pour connecter votre application Web Canvas au débogueur Chrome pour les outils pour les développeurs, procédez comme suit:
Dans le champ d'adresse du navigateur Chrome, saisissez chrome://inspect#devices pour lancer l'outil d'inspection Chrome. Une liste d'appareils devrait s'afficher sur la page, et l'URL HTML du canevas doit s'afficher sous le nom de votre appareil Google Home ou Google Nest de test. Notez qu'il peut s'écouler un certain temps avant que Chrome ne détecte tous les appareils de votre réseau.
Cliquez sur le lien inspect sous l'URL HTML pour lancer les outils pour les développeurs Chrome.
Les outils pour les développeurs Chrome s'affichent dans une fenêtre distincte. Vous pouvez cliquer sur le bouton d'enregistrement d'écran () pour afficher l'IUG Web affichée sur l'appareil. La capture d'écran suivante montre comment votre application Web s'affiche dans les outils pour les développeurs Chrome:
Notez que votre application Web Canvas est chargée dans un iFrame.
Conseils de débogage
Tenez compte des conseils supplémentaires suivants lors du débogage:
Actualisez la page des outils pour les développeurs Chrome afin d'actualiser votre conteneur d'application de traitement local avec le dernier code de votre URL de développement.
Vérifiez que votre application JavaScript se charge correctement. Pour ce faire, consultez la section "Console" de la page "Outils de développement".
Ajoutez des points d'arrêt manuels à votre code en utilisant debugger; dans le code de votre application Web.
Si votre appareil ne s'affiche pas dans chrome://inspect#devices pendant une période prolongée, actualisez la page d'inspection.
La mémoire de l'écran connecté étant limitée, votre application Web peut planter ou se bloquer si elle dépasse 200 Mo. Pour déboguer les problèmes de mémoire, suivez le tutoriel sur la résolution des problèmes de mémoire.
Pour les erreurs de traitement, examinez les requêtes envoyées par les serveurs Actions on Google au webhook à partir de vos journaux de webhook ou de vos journaux Stackdriver.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/25 (UTC).
[null,null,["Dernière mise à jour le 2025/07/25 (UTC)."],[[["\u003cp\u003eDebug your Interactive Canvas web app using Chrome DevTools on Google Home or Nest smart displays running supported software and firmware versions.\u003c/p\u003e\n"],["\u003cp\u003eSet up your environment by enabling your Action for testing, connecting devices to the same network, ensuring network connectivity, and using the same Google account.\u003c/p\u003e\n"],["\u003cp\u003eConnect to the debugger by launching Chrome Inspector, locating your device and Canvas HTML URL, and clicking "inspect" to open DevTools.\u003c/p\u003e\n"],["\u003cp\u003eUtilize debugging tips such as refreshing the DevTools page, checking for JavaScript errors, adding breakpoints, and monitoring performance and memory usage.\u003c/p\u003e\n"],["\u003cp\u003eThird-party smart display devices are not supported for debugging Canvas web apps.\u003c/p\u003e\n"]]],[],null,["# Debug your Interactive Canvas web app with Chrome DevTools\n\nYou can debug your Interactive Canvas web app using [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools). The Chrome debugger\nis supported on Google Home or Google Nest smart displays with a software\nversion of 30 or later (this update starts rolling out in October 2020)\nand a Cast firmware version of 1.50 or later. You can\ncheck the versions under `System settings / About device` on your smart display.\n| **Note:** Debugging Canvas web apps on third-party smart display devices is not supported.\n\nSet up your environment\n-----------------------\n\nBefore you can debug, do the following to set up your environment correctly:\n\n- Enable your Action for testing in the Actions console [simulator](/assistant/conversational/build/projects#test_projects_in_the_simulator).\n- Connect your machine to the same local area network as the Google Home or Google Nest device you are testing.\n- Ensure that your network doesn't block packets between devices.\n- Log in with the same Google account on the Actions console and on the Google Home or Google Nest device.\n\nOnce your environment is ready, you can launch your Action on your test\nsmart display.\n| **Note:** You cannot debug your Canvas web app until you've launched your development Action on your test smart display.\n\nConnect Canvas web app to debugger\n----------------------------------\n\nTo connect your Canvas web app to the Chrome DevTools debugger, follow these\nsteps:\n\n1. In your local development machine, install and launch the [Google Chrome browser](https://www.google.com/chrome/).\n2. In the address field of your Chrome browser, enter `chrome://inspect#devices` to launch the Chrome inspector. You should see a list of devices on the page, and the Canvas HTML URL should be listed under the name of your test Google Home or Google Nest device. Note that it might take some time for Chrome to discover all the devices on your network.\n3. Click the `inspect` link under the HTML URL to launch Chrome DevTools.\n\nChrome DevTools loads in its own window. You can click the screencast\n()\nbutton to see the web GUI rendered on the device. The following screenshot shows\nhow your web app appears in Chrome DevTools:\n\nNote that your Canvas web app is loaded in an iframe.\n\nDebugging tips\n--------------\n\nKeep the following additional tips in mind during debugging:\n\n- Refresh the page in Chrome DevTools to reload your local fulfillment app container with the latest code from your development URL.\n- Check that your JavaScript app loads without errors. To do this, check the console section of the DevTools page.\n- Add manual breakpoints to your code by using `debugger;` within your web app code.\n- If you don't see your device in the `chrome://inspect#devices` for an extended period of time, refresh the inspect page.\n- To debug any performance issues, follow the [Get Started with Analyzing Runtime Performance tutorial](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance).\n- Because the smart display memory is limited, your web app might crash or hang if it goes over 200MB. To debug any memory issues, follow the [Fix Memory Problems tutorial](https://developers.google.com/web/tools/chrome-devtools/memory-problems).\n- For any fulfillment errors, look at requests sent by Actions on Google servers to the webhook from your webhook logs or from Stackdriver logs."]]
) pour afficher l'IUG Web affichée sur l'appareil. La capture d'écran suivante montre comment votre application Web s'affiche dans les outils pour les développeurs Chrome: