1.- Prerequisites

2.- Getting started

3.- Understanding a brief documentation of the Carrier and a file with functions and object atributes of the source code of the Carrier

4.- Running the demo app and the chat app of the nodejs Carrier before debugging and testing

5.- Debugging and testing the demo app and the chat app with Visual Studio Code and Chrome developer tools

a) Brief documentation about Chrome developer tools

b) Debugging the demo app and the chat-app

1.- Prerequisites

First, we need to install the following software in order to debug and test the example dapps of the Elastos Carrier and to understand better this technology:

Visual studio CODE. This free software will help us to edit, test, develop and run the source code. Here is the [I nstallation guide ]

Git. Git allows us to download and upload source code from repositories. Here is the [Link] to download and install it on your computer.

to download and install it on your computer. Elastos.NET.Carrier.Native.SDK. Follow the instructions of this [ Link ] to download and install it. Also there are video tutorials where you can learn step by step to install and understand better this SDK [Here] .

to download and install it. Also there are video tutorials where you can learn step by step to install and understand better this SDK . Elastos.NET.Carrier.Nodejs.SDK. After you install the last SDK, this [ Link ] will help us to download, debug and test the example dapps based on the Elastos Carrier.

will help us to download, debug and test the example dapps based on the Elastos Carrier. Chrome developer tools. To debug and to test the source code we could do it with Visual Studio Code but it’s much better to debug and test it with Chrome developer tools. So what we need is to install Chrome [Here] if you already don’t have it.

2.- Getting started

When everything is installed what we need to do is to open Visual Studio CODE and create a workplace file. This workplace file will help us to start with the Elastos repositories.

3.- Understanding a brief documentation of the Carrier and a file with functions and object attributes of the source code of the Carrier

[Here] we have a brief introduction explaining the Carrier.

Next, what we can do is to learn an important file of the Carrier. This README documentation [File] is a very important part of the Elastos carrier to understand, if we want to debug/test/develop nodejs dapps with the Carrier on Elastos

In the last file, we saw that contains functions and attributes of objects of the Carrier such as invite a friend, add/remove/list friends, send messages if our friend accepted us, send streams to our friend, …

4.- Running the demo app and the chat app of the nodejs Carrier before debugging and testing

Down below we could watch a video running the demo app and the chat-app so we can have an idea of the functionality of the two apps and see how they can connect and send messages each other using the Elastos Carrier as a bridge of connectivity:

The following instructions are the same process as in the video but in text format:

To know how to run the two apps, what we will do first is to open a terminal in Visual Studio Code or you can open just a terminal without Visual Studio Code and follow this instructions from the README. [This File] help us to run the demo app from the source code.

2. Afterwards, we can run the chat-app from another terminal with Visual Studio Code or without Visual Studio Code. We can run the chat-app from the source code following this instructions on the [README file]

(Optional) When we run the chat-app we realize that it is a native app using node and nwjs instead of a terminal app as the demo app. If we are interested in developing native apps we can go to [This Website] for more documentation:

3. When the demo app is executed we introduce the following command in the demo app to know our address:

Command:$ address

4. Then, we copy our address of the resulting terminal output and we go to the chat-app and type this address to add as a friend with a message down below in the video we saw in order that the demo app receive our invitation.

5. When we send our invitation to the demo app, we can see the following message in demo app terminal faccept [chat-app ID] that we send. So we accept the friend typing this in the terminal

Command:$ faccept [chat-app ID]

6. In order to send a message from the demo app to the chat-app we can type

Command:$ msg [chat-app ID] HelloChatApp!

7. Finally we can send a hello to the demo app from the chat-app and we will receive the response in the demo app terminal.

5.- Debugging and testing the demo app and the chat app with Visual Studio Code and Chrome developer tools

a) Brief documentation about Chrome developer tools

If it is the first time that you heard about the Chrome developer tools and you want to know more about it you can go to this [Website] to learn more:

Also I recommend to watch this video about debugging with Chrome developer tools with node.js

b) Debugging the demo app and the chat-app

Here you can watch a debugging walkthrough video:

There are two ways to debug the demo app. If it is your first time you debug the demo app one suggestion is to write in the terminal the following instruction in the folder of the demo app as we saw in the last video

node — inspect-brk demo.js

This command will stop in the first line of code of demo.js file so we can learn better the code.

The other way is to write

node — inspect demo.js

This other way would stop on the breakpoint that you create on Chrome developer Tools for the file demo.js of the demo app.

Then, we open our Chrome browser and we write on top of it the following sentence as we can see in the video.

Chrome:inspect

Then, we click on Open dedicated DevTools for Node bottom and we can start to debug the demo app.

To debug the chat app as it is a native app, instead of using node — inspect-brk as in the demo app first we have to executed the app with npm i and npm start. When the chat app is running we click on the right bottom of the mouse on the app and click to inspect as we can see in the previous video. Then another Chrome developer tools window opens and we click to Sources. Also we need to create breakpoints in the file index.js of the chat-app in order to debug this app.

In the video we can see that in the javascript of the demo app is called demo.js and the javascript of the chat-app is called index.js where there are many breakpoints that can help us to debug an test the app.

Well, Thanks for reading and watching and if you share any question, issue, idea or suggestion it will be appreciated.

So, happy coding and happy debugging 😀