Objective
This article will help you collect browser logs from Google Chrome or Microsoft Edge to troubleshoot issues in Twilio Flex. These logs are useful when identifying UI errors or network issues, and can be shared with support for faster issue resolution.
Product
Twilio Flex
Environment
legacy Twilio Console
User Account Permission/Role(s) Required
Agent, Supervisor, or Administrator access to Flex
Procedure
Step 1: Open Developer Tools
- On Mac: Press
Cmd + Shift + JorCmd + Shift + C - On Windows/Linux: Press
Ctrl + Shift + J - Or go to Chrome/Edge menu → More Tools → Developer Tools
Step 2: Open Developer Tools settings
- Click the gear icon in the top right corner of the Developer Tools window
Step 3: Enable the following options:
- Under Twilio Console:
- Log XMLHttpRequests
- Show timestamps
- Preserve log upon navigation
- Under Network:
- Preserve log
- Record network log
Step 4: Close the settings window
Step 5: Set the log level to show all logs
In the Console tab, select “All levels” from the filter dropdown at the top right
Step 6: Set the debug logs in Flex. Once you have logged in Twilio Flex, paste in the console the following code to enable the debug logs:
Twilio.Flex.Manager.getInstance().store.getState().flex.config.logLevel = 'debug';
Twilio.Flex.Manager.getInstance().updateConfig();Step 7: Reproduce the issue you are troubleshooting while keeping the Developer Tools open
Step 8: Save the Console logs
Right-click inside the Console
Click “Save As…” to download the logs as a text file
Step 9: Save the Network logs
Go to the Network tab
Click the download (HAR) icon to save the session log
Step 10: Share the logs
Include the saved files in a support ticket
Add the time the issue occurred and any related call/task/worker SID for reference
Additional Information
- You can also set the log level for all agents via the REST API or appConfig.js (for self-hosted Flex).
- Visit this link for more information on Flex UI configuration.