Debugging is an essential for any developer. Any problems that may arise when creating your Skill can be found and fixed through ‘debugging’. Often than not, these problems (also called ‘bugs’) can be solved quickly through this method.
Image: Edureka
Debugging Visual Studio Code via Postman
‘Visual Studio Code’ is a code editor that is available to download for free. It is compatible with the ‘Alexa Skills Kit’ and can be used to debug with ‘Postman’, a free debugging software.
- Launch Visual Studio Code
The first thing that you will have to do is launch ‘Visual Studio Code’. You can do this by double clicking on the icon on your Desktop or by searching for it in the search bar.
- Select the section of your code for debugging
Select the ‘start point’ of your debugging. This is where the debugging will begin. You can do this by moving your cursor to the left-hand side of your code, beside the line number. You will see a small, red circle appear beneath. Click this to turn the marker on. To change the starting point, you will have to click it again to make the red circle de-select.
You now need to select the ‘end point’ of your debugging. This is where the system will stop running the debugger. Just like with the ‘start point’, select the ‘end point’ by clicking beside the desired row of your coding to activate the red marker.
- Enter the debugging command into the Terminal
At the bottom of ‘Visual Studio Code’, there will be a box with a few tabs. One of these tabs will read ‘Terminal’. Select it by clicking on it. It should open a blank box. You will then need to type the following code:
‘node --inspect-brk=28448 local-debugger.js --portNumber 3001 --skillEntryFile index.js --lambdaHandler [ENTER YOUR FILE HERE]Handler’
Please note that you will have to replace the ‘BOLD, CAPITAL TEXT’ with your own file name. For example: ‘LaunchRequestHandler’.
Press the ‘enter’ key on your keyboard.
The screen should now read: ‘Debugger listening’.
- Toggle ‘Debugging Mode’ on
Press the ‘F5’ key on your keyboard to toggle ‘Debugging Mode’ on. There should be orange outlines around your code on Visual Studio Code.
The ‘Debug Console’ (located beside the ‘Terminal’ tab) should now read: “Starting on server port 3001”.
- Start the debugger
There should now be a small toolbar located at the top of the screen. It will look like this:
Click the ‘II’ button to start the debugger.
- Step into your code
Press ‘F10’ on your keyboard to step into your code. The text will be highlighted.
- Open ‘Postman’
Double click on the ‘Postman’ icon on your desktop or type in the search bar ‘Postman’ and click it to open it.
- Use the ‘Alexa Tester’ on Visual Studio Code
In ‘Visual Studio Code’, go to the ‘Alexa Tool Kit’ and open the simulator. Type in the prompt that you want to debug and press ‘enter’ on your keyboard. Wait for the response to return.
On the right-hand side of the screen, there will be two boxes of code. You need to highlight and copy the text from the ‘JS’ code box. This should be the box on the far left of the two.
- Use Postman to debug the code
In ‘Postman’, click ‘+’ and set it to ‘Post’. The bar beside this should read: http://localhost: 3001.
Select ‘Body’ and ‘Raw’. Paste the code that you copied from Visual Studio Code there and click on ‘send’, making sure that you are on the ‘Index’ page of Visual Studio Code.
