Sometimes an Experience isn't displaying as you want it, or your expected behavior doesn't match what you get. 😕
In this lesson, you'll learn how to use your browser's Console to debug your Experiences and where to get additional help when you need it.
The Debugger tool helps you troubleshoot Experiences by running temporary commands in your browser console to identify issues and find solutions.
💡 These are temporary commands that run just within your browser, and will not impact your application permanently or for any other users.
Running the Debugger console tool will show you results that you can easily act upon. For example, if the user is in the Target Audience for that Experience, if the Experience is being Rate Limited, and more. You can easily resolve these and move on. 🙂
👉 How to use:
To use the Debugger tool, you'll need to open your browser's developer console first.
Follow these steps to access the console:
Right-click on your application page in the browser
Select "Inspect" from the context menu
Click on the "Console" tab in the developer tools panel
Run the following debugging commands in the console interface
The Debugger tool has two commands available, depending upon what stage of loading Chameleon has been completed:
chmln.Snippet.debug()- Tests if Chameleon has been installed correctly and checks that the Snippet is working properlychmln.debug()- Tests Chameleon Experience status and shows detailed information about your published Experiences
Step-by-Step Debugging Process
Step 1: Test Chameleon Installation
Start by running chmln.Snippet.debug() to verify that Chameleon has been installed correctly and that the Snippet is functioning properly.
Look for positive confirmation messages such as "Chameleon loaded, User profile loaded" to confirm successful installation.
Step 2: Test Experience Status
If Step 1 shows successful installation, go ahead and run chmln.debug() to test your Chameleon Experience status.
This command will show you:
Complete list of all Experiences published in your account
Expandable details - Click the arrow (>) next to any Experience to view specifics
Display state information - Shows current status of the Experience
Segment details - Displays which Segment is being used
Step information - Indicates which step the Experience is currently on
Step 3: Debug Specific Experiences
You can focus your debugging on a particular Experience by including its ID in your debug command.
Use this format: chmln.debug("60cb861eb6ef93001b8d731e") where you replace the ID with your specific Experience ID.
Go here to see a list of messages and how to interpret them to solve the issue.
🎓 To learn more about Troubleshooting Experiences read these articles:
We get that it's not always easy to solve issues on your own. We are here to help you get unstuck and move forward. 🙌 A good place to start is the Get Help page, where you can also Report an Issue or Request a Review, aside from having access to our helpful resources.
And remember, if you need us we are just an email away. 😉
👉 You've almost reached the end of the Chameleon 101 Course but just begun your Experience-delivery proficiency.