How to test SMS and Phone Call applications with the Twilio Dev Phone

Niels Swimberghe - 6/15/2022 - Twilio

This blog post was written for Twilio and originally published at the Twilio blog.

Twilio empowers you to build applications using phone numbers, text messaging, and voice calling. You can test these phone network based applications using any phone and phone number, but how do you test these applications without a phone? Maybe you're wondering, why not use your phone, which I'll get to later, but first how?!

Twilio Dev Phone to the rescue #

What is the Twilio Dev Phone #

The Twilio Dev Phone is a tool built on top of Twilio products that will let you send and receive phone calls and text messages from the browser. The Dev Phone is an open-source project on GitHub so feel free to read the source code and contribute to it. You can learn more about the Twilio Dev Phone in the docs.

Why use Twilio Dev Phone #

As promised, here are some good scenarios when you'd want to use the Twilio Dev Phone instead of your own personal phone.

🌍 International apps

When you're building applications for an international audience, you'll have a local Twilio Phone Number for each country. However, in most cases, you probably don't and you don't want to incur those international charges to your personal phone plan. So instead, you can buy a Twilio Phone Number local to the desired country and then use the Twilio Dev Phone to make and receive phone calls and SMS!

You could even use this to test out Alpha Numeric Senders which may be available in other countries, but potentially not yours.

📶 Bad connection

Depending on where you live or work, you may have unreliable connectivity or no connectivity at all. Maybe your place of work is highly secured and communication is jammed, or you just lost your phone.You may not be able to use your phone in this scenario, but if you have an internet connection, you can use the Twilio Dev Phone!

🚤 Fast and convenient

When you're building applications on your computer, you have to find your phone, unlock it, enter a phone number with some clunky UI, and then finally make or receive that call or SMS.
This flow can be quite disrupting. Instead of doing all that, keep the Twilio Dev Phone in one of your browser tabs and test your applications to increase your inner dev loop!

There are more scenarios where Dev Phone can help. We'd love to hear what you are using it for!

How to test Twilio applications using the Twilio Dev Phone #

Provision Twilio SMS and Voice applications #

Before you can test a Twilio application with the Dev Phone, you’ll need to have one up and running.

If you already do, you can skip this section.

Alternatively, instead of deploying your own Twilio apps, you can text and call this phone number we provisioned for demo purposes: +19032962250. You'll only be able to reach the phone number from an upgraded Twilio account, as trial accounts can only communicate with Verified Caller IDs.

You can find a lot of samples on Twilio CodeExchange, but to deploy Twilio apps in an instant, you can filter them down to samples with "Quick Deploy", like the Voice Auto-response and the SMS Auto-response sample.

First, make sure you have a Twilio Account and a Twilio Phone Number. If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account! Follow these instructions to buy a Twilio Phone Number if you haven't already.

Next, open the Voice Auto-response sample in a new browser tab, select your Twilio Phone Number, and deploy the application. Now follow the same steps for the SMS Auto-response sample.

Congratulations, you now have two Twilio applications, one that will respond when you call or text your Twilio Phone Number! 🎉

Install the Twilio Dev Phone #

Before you can use the Twilio Dev Phone, you'll need to acquire another Twilio Phone Number, install Twilio CLI, and install the Twilio Dev Phone plugin.

You can't buy two separate phone numbers on a trial account, so if you're using a trial account, you'll need to upgrade your account.

Buy another Twilio Phone Number, which will be used by the Dev Phone to make and receive calls and text messages.

Next, follow these instructions to install the Twilio CLI on your machine.

Then log in to your account using the following command:

twilio login

Finally, install the Twilio Dev Phone plugin using this command:

twilio plugins:install @twilio-labs/plugin-dev-phone

Great, you're ready to use the Twilio Dev Phone. Start the Dev Phone with the following command:

twilio dev-phone

A new tab in your browser should open showing the Dev Phone and your terminal output should look something like this:

Hello 👋 I'm your dev-phone and my name is dev-phone-600487

✅ I'm using your profile API key.

💻 Creating a new conversation...
✅ I'm using the conversation CHxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx from service ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

💻 Creating a new sync list for call history...
✅ I'm using the sync service ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

💻 Deploying a Functions Service to handle incoming calls and SMS...
✅ I'm using the Serverless Service ZSxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

💻 Creating a new TwiML App to allow voice calls from your browser...
✅ I'm using the TwiML App APxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

🚀 Your local webserver is listening on port 3001
🌐 Opening http://localhost:3001/ your browser
▶️  Use ctrl-c to stop your dev-phone

As you can see, the Twilio Dev Phone is using a lot of Twilio services like Conversations, Sync, Functions , and TwiML apps so you can make and receive phone calls from the browser in real time.
All these services are created when you start the Twilio Dev Phone, and when you stop it (by pressing ctrl + c), the Twilio Dev Phone will delete them again for you.

Head over to the Dev Phone tab on your browser:

Form with a dropdown field to select your Twilio Phone Number.

Choose your Twilio Phone Number and click "Use this phone number".

You will see a warning if your phone number is already configured to respond to phone calls or text messages using a webhook, Function, Flow, TwiML app, or something else. The Twilio Dev Phone will overwrite these settings if proceed with that phone number.

You now have a virtual phone on your computer. 🎉

The Twilio Dev Phone application. The application has a dial pad and a Destination Phone Number field to enter the phone number to text or call. There"s a call button to start a phone call. A message field and send button to send SMS. And there"s a Call History panel which lists details on past and ongoing calls.

Send Outbound Calls and SMS using the Twilio Dev Phone #

Start testing by entering your application’s phone number in the Destination Number field.

Then, enter a message into the Message field and click Send. Your application will respond with its configured response to inbound SMS (e.g., "Hello World" in this screenshot.)

Finally, to test out the voice capabilities of your application, click the Call button. You should also hear the response you’ve configured (e.g., "Hello World".)

You just tested the incoming message and voice call functionality, however, don't forget that your Dev Phone can also receive inbound communications. Go ahead and give your Dev Phone Number a call or text it with your application. You can find this number in the top right corner for your convenience.

Next steps #

You've learned how to set up and use the Twilio Dev Phone to test your Twilio applications. The Twilio Dev Phone is an open-source project on GitHub, so if you're curious, go and read the code, also issues and pull requests are welcome!

Congratulations on making it till the end 🎉
We hope you find this tool helpful and we can't wait to see what you build!