Mit den Chrome-Entwicklertools Fehler in Ihrer Interactive Canvas-Webanwendung beheben
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Sie können Fehler in Ihrer Interactive Canvas-Webanwendung mit den Chrome-Entwicklertools beheben. Der Chrome-Debugger wird auf Smart Displays von Google Home oder Google Nest mit einer Softwareversion 30 oder höher (dieses Update wird ab Oktober 2020 eingeführt) und einer Cast-Firmwareversion 1.50 oder höher unterstützt. Du kannst die Versionen auf deinem Smart Display unter System settings / About device prüfen.
Umgebung einrichten
Bevor Sie mit dem Debuggen beginnen können, müssen Sie die Umgebung wie folgt einrichten:
Aktiviere deine Aktion für Tests im Simulator der Actions Console.
Verbinden Sie Ihren Computer mit demselben lokalen Netzwerk wie das Google Home- oder Google Nest-Gerät, das Sie testen.
Achten Sie darauf, dass Ihr Netzwerk keine Pakete zwischen Geräten blockiert.
Melden Sie sich mit demselben Google-Konto in der Actions Console und auf dem Google Home- oder Google Nest-Gerät an.
Sobald deine Umgebung bereit ist, kannst du deine Aktion auf dem Test-Smart-Display starten.
Canvas-Webanwendung mit Debugger verbinden
So verbinden Sie Ihre Canvas-Webanwendung mit dem Chrome-Entwicklertools-Debugger:
Installieren und starten Sie den Google Chrome-Browser auf Ihrem lokalen Entwicklungscomputer.
Geben Sie chrome://inspect#devices in das Adressfeld Ihres Chrome-Browsers ein, um das Chrome Inspector zu starten. Auf der Seite sollte eine Liste der Geräte angezeigt werden. Die Canvas-HTML-URL sollte unter dem Namen des Google Home- oder Google Nest-Testgeräts aufgeführt sein. Es kann einige Zeit dauern, bis Chrome alle Geräte in Ihrem Netzwerk erkannt hat.
Klicken Sie unter der HTML-URL auf den Link inspect, um die Chrome-Entwicklertools zu starten.
Die Chrome-Entwicklertools werden in einem eigenen Fenster geladen. Sie können auf die Screencast-Schaltfläche () klicken, um die auf dem Gerät gerenderte Web-GUI zu sehen. Der folgende Screenshot zeigt, wie Ihre Webanwendung in den Chrome-Entwicklertools angezeigt wird:
Ihre Canvas-Web-App wird in einem iFrame geladen.
Tipps zur Fehlerbehebung
Beachten Sie bei der Fehlerbehebung die folgenden zusätzlichen Tipps:
Aktualisieren Sie die Seite in den Chrome-Entwicklertools, um den lokalen Container der Auftragsausführung mit dem neuesten Code von Ihrer Entwicklungs-URL neu zu laden.
Prüfen Sie, ob Ihre JavaScript-Anwendung fehlerfrei geladen wird. Dazu rufen Sie auf der Seite „Entwicklertools“ den Abschnitt „Console“ auf.
Fügen Sie Ihrem Code mithilfe von debugger; im Code Ihrer Webanwendung manuelle Haltepunkte hinzu.
Wenn Ihr Gerät längere Zeit nicht im chrome://inspect#devices angezeigt wird, aktualisieren Sie die Prüfseite.
Da der Arbeitsspeicher des Smart Displays begrenzt ist, kann Ihre Webanwendung abstürzen oder hängen bleiben, wenn sie größer als 200 MB ist. Um Arbeitsspeicherprobleme zu beheben, folgen Sie der Anleitung zum Beheben von Arbeitsspeicherproblemen.
Prüfen Sie bei Auftragsausführungsfehlern die Anfragen, die von Actions on Google-Servern aus Ihren Webhook-Logs oder von Stackdriver-Logs an den Webhook gesendet wurden.
[null,null,["Zuletzt aktualisiert: 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."]]
) klicken, um die auf dem Gerät gerenderte Web-GUI zu sehen. Der folgende Screenshot zeigt, wie Ihre Webanwendung in den Chrome-Entwicklertools angezeigt wird: