Remote Debugging Node on a Raspberry Pi

raspberry-logoI have been working on a project called Wackcoon (more on that later) that uses Node and runs on a Raspberry pi.  Like all development projects, I needed to debug not only my work but sometimes errors being thrown from node modules that I am using. Wrapping up my code in Try/Catch blocks and sending the error to console.log() got old really fast.  Since I could not test locally since I am running Linux on the raspberry pi,  I wanted to use Visual Studio Code to remote debug my project on the raspberry pi device itself.

The raspberry pi is on my network at home so on the pi I rand a ifconfig command to get the ip address of the device.

Then I went to Visual Studio Code and clicked on the debug icon (little bug in figure below)  I also made sure that Attach was selected in the debug dropdown on top.

debug1

Next I modified my launch.json file.  This is created the first time you run debug ( the green arrow ) .  In the launch.json file there are two sections.  One configuration is for launch ( debugging locally) and the other is for attaching to a already running process.  I put in the IP address that I got in the last step.

debug2

Now on the raspberry pi, I open a terminal and run the app using the –debug-brk option.  I can also just use the –debug option but the first one will have the application pause and wait for me on the first line of my code.

debug3

Now when I start my debug in Visual Studio Code (green arrow) you can see that it is sitting in break mode at line one.

debug4

I can set breakpoints, step in, step over, Step out, add watches, etc.. since this is being streamed from the pi, I cannot modify it on the fly like you can when you debug locally but still pretty cool.

Hope this helps

Daniel

 

 

Node.js intellisense

node-jsWorking in my node projects and presentations I pop back and forth between both Sublime Text 3 and VS Code but I find myself increasingly just using VS Code.  One of the reasons is that I am able to get great intellisense using the node and express typescript definition files.

As you can see by the screenshots below, even when I am just creating a simple server using the node http module, with VS Code, I get that great “.” intellesense.

vscodeintellsublimeintell

This is invaluable for any developer but especially for developers new to the stack that might not have all of the methods available stored in their head.

Getting node and express intellisense in VS Code

In order to get specific package intellisense in vs code you will need to install a couple of things.  There are a number of ways to do this but I am just going to use the command line (powershell or Terminal in OSX).  The first thing you need to do is to install TSD globally.

npm install -g tsd

When installing this will tell you that TSD is deprecated in favor of Typeings(https://github.com/typings/typings)  but I use TSD anyway.  Both will work similar with this a bit of a syntax difference when installing the tsd’s.

Once tsd is installed globally.  Make sure you are in the project folder that you need the intellisense in and run the following commands.


tsd query node --action install
tsd query express --action install

This will install the type definition files for both node and express. If you need tsd files for other things you can see what is available either at the github repository (where tsd pulls these files) https://github.com/DefinitelyTyped/DefinitelyTyped or the website http://definitelytyped.org/

 

I have tried to find a way to do this with sublime.

I checked http://definitelytyped.org/directory/tools.html and found under IDE tools sublime-typescript  https://github.com/raph-amiard/sublime-typescript but it said it was not maintained anymore and sent me here :  https://github.com/raph-amiard/sublime-typescript which itself is no longer maintained, which directed me here :  https://github.com/Phaiax/ArcticTypescript which is a fork of the last one and seems to be maintained but when I install it, I don’t see it giving me the intellisense I am looking for.

So at this point, I cant seem to get this in Sublime. If someone knows a way to implement this through a plugin, please let me know.

Using Curl in Powershell

So you are a windows user, but really like what you have been able to do using curl on your Mac.  On windows you use PowerShell, what if you want to use cURL?

First of all, what is cURL?  To pull directly from their website :

curl is an open source command line tool and library for transferring data with URL syntax, supporting DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMB, SMTP, SMTPS, Telnet and TFTP. curl supports SSL certificates, HTTP POST, HTTP PUT, FTP uploading, HTTP form based upload, proxies, HTTP/2, cookies, user+password authentication (Basic, Plain, Digest, CRAM-MD5, NTLM, Negotiate and Kerberos), file transfer resume, proxy tunneling and more.

More simply stated, cURL is a tool that is used at the command line for transferring data.

So now what if you want to use it in PowerShell?  If you are using version 5.x of  PowerShell you may think that you already have it.  You can check your version of PowerShell by calling the command : $PSVersionTable.PSVersion
Ps1

 

Using cURL in PowerShell

You can type in a cURL command like one that downloads a file from a GitHub repository.

curl http://raw.githubusercontent.com/Azure/azure-quickstart-templates/master/mongodb-on-ubuntu/azuredeploy.json > azuredeploy3.json

and  it will seem like it works but what it is actually doing is just using cURL as an alias. In the above instance, what will happen is that you will just get the headers instead of the file itself.  Alias’ in PowerShell allow you to create shortcuts for longer commands so you don’t have to type them out all of the time. If you type in the command Get-Alias, it will give you a list of all the Alias’ that are used in PowerShell. As you can see, the curl command just calls the Invoke-WebRequest command.  They are similar but not the same which is why the above request does not work for us.

ps2

To get this to work in PowerShell you would need to change the syntax slightly.

ps3

( file name cut off in image “https://raw.githubusercontent.com/Azure/azure-quickstart-templates/master/mongodb-on-ubuntu/azuredeploy.json”)

You then open the file from PowerShell either using Code or Sublime.

ps4
Utilizing the switches that Invoke-WebRequest uses instead of cURL does the trick.  But if you want to stay consistent and use the same commands on your MAC as you do on your PC, you will need to remove the alias and install cURL on the PC in order to achieve this.

The first thing you need to do is remove the alias.

Removing the cURL alias

If you don’t already have a profile, run the following command to create one.

New-Item $profile -force -itemtype file

Next, open up the profile file. (This will open the file up in notepad)

notepad $profile

add the following line to the profile file.

remove-item alias:curl

save the notepad file and close it.
Then either run the following command to reload the profile OR close and reopen Powershell to refresh.

remove-item alias:curl

(thanks to megamorf for these steps)

Now if you run the Get-Alias command again, you will see that the curl alias is gone.

Installing cURL on your PC

There are a number of ways you can do this.  One way is to use the cURL for Windows created by the Confused By Code author : http://www.confusedbycode.com/curl/ this is a step by step installer that installs curl, adds it to your path, installs the certs etc.. but in keeping with my new mindset of doing everything from the command line that I can, I decided to install it using Chocolately. https://chocolatey.org/

Chocolatey is a Linux style command line packet manager for windows.  I will be using it in the future so it makes sense to use it for this.   To install it do the following

Open up PowerShell in Admin Mode and run the following command.

iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

Once you have installed Chocolatey, you can then use it to install curl. (Open and close PowerShell first)

choco install curl

Now you have curl installed but if you try to run the curl command from above, you will receive some OpenSSL errors. To fix this you have two choices, One use the -R switch to ignore the certs (not recommended) OR install the certs.

To install the certs, navigate to C:\ProgramData\chocolatey\lib\curl\tools ( do it in windows explorer or powershell, doesn’t matter to me)

Double click mk-ca-bundle.vbs, or if you have Perl, mk-ca-bundle.pl. The script will download a new SSL bundle from Mozilla. It will be called ca-bundle.crt. once it is downloaded rename the file to curl-bundle.crt and leave it in the same directory.

Open and close PowerShell and then run the following command.

curl https://raw.githubusercontent.com/Azure/azure-quickstart-templates/master/mongodb-on-ubuntu/azuredeploy.json > azuredeploy6.json

(By the way, this is an ARM template that I am using to install MongoDB in Azure on Ubuntu if you are curious. See my Mean On Azure Series if you want to learn more. http://sogeek.us/meanonazure)

That’s all.. I hope you found that useful.

Daniel – The Sociable Geek