Enable Debugging with Twilio Client

The Twilio Client SDK allows users to enable reporting of additional debug-level logging details in your browser console. These debug logs can be helpful for diagnosing issues with your Twilio Client application or connection. This guide will walk you through enabling and viewing the debug-level logging in your Twilio Client application.

Enable Debugging in the Twilio Client JavaScript Quickstart

When using the Client Quickstart, you can enable debugging by addling a line to the file Quickstart.js. Find the the Twilio.Device function starting in line 17, and then add a new line debug: true,.

Your code should look something like this:

...
device = new Twilio.Device(data.token, {
debug: true,
// Set Opus as our preferred codec. Opus generally performs better, requiring less bandwidth and
// providing better audio quality in restrained network conditions. Opus will be default in 2.0.
codecPreferences: ['opus', 'pcmu'],
// Use fake DTMF tones client-side. Real tones are still sent to the other end of the call,
// but the client-side DTMF tones are fake. This prevents the local mic capturing the DTMF tone
// a second time and sending the tone twice. This will be default in 2.0.
fakeLocalDTMF: true,
});
...

Save your changes, and then load into your Client application again. You should now have additional debug logging messages in the browser console.

Enable Debugging with Twilio.js

For your custom Twilio application, Twilio Client debugging works much the same way. 

Twilio.js 1.5+

In Client 1.5.x and later, Twilio.Device allows for direct construction, letting users run multiple instances on the same page. When you pass a token to Twilio.Device, Device.setup() is automatically run. This means you won't need to call it out separately, and you can just add the debug: true, option here. This is the method used in the latest version of the Client Quickstart application; take a look at the sample code above for an example.

Twilio.js 1.3.x - 1.4.x

In older WebRTC versions of Client, debugging needs to be called out as an option in Twilio.Device.setup().

Twilio.Device.setup(token, { debug: true });

For more details, please see Twilio Client JS SDK: Twilio.Device (Twilio Docs).

View Debug Logs

Once enabled, you'll be able to see additional logging information about your client session in the browser console.

client_debug_400px.png

The browser console can be viewed via the following methods:

Browser OS Commands
Chrome Mac OS Command + Option + J
Chrome Windows Control + Shift + J
Firefox Mac OS Command + Shift + J
Firefox Windows Control + Shift + J
Edge Windows Press F12, then Control + 2
Safari Mac OS Command + Option + C
Note: The Develop menu must first be enabled.

The Console logs the Twilio Access Token used for your session, as well as any errors. If you need to reach out to our Support team, please include any details from your debugging logs, as these will be helpful for diagnosing your issues.

Have more questions? Submit a request
Powered by Zendesk