How to Debug Node Serverless Using JetBrains WebStorm
Tags: javascript, serverless, webstorm, debugging
Published: 2019-10-03 14:46:43

<!-- wp:paragraph -->
<p>One of the most useful tools in a developer's quiver is the debugger. The debugger allows a developer to not only step through code and track down bugs, but it is useful as a way to profile data structures. I find the ability to profile data structures to be extremely useful when working with scripting languages such as Python and Node. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Recently I was working on a Node serverless project and had no idea what fields existed on the serverless lambda objects (event, context,  callback). When I went looking how to debug serverless, I struggled to find a solution that detailed debugging serverless in JetBrains WebStorm. The following will get you started debugging node serverless using JetBrains WebStorm.</p>
<!-- /wp:paragraph -->

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6gn9ogj6bbyaka8edvpw.jpeg)

<!-- wp:paragraph -->
<p>There are a ton of tutorials on how to install node, serverless, WebStorm, so I've assumed you've already taken care of that. For the purpose of this tutorial, we will be using macOS Mojave. Some locations may vary depending on your OS.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Create a new node configuration: In the toolbar click <strong>Run</strong> --&gt; <strong>Edit Configurations...</strong></li></ol>
<!-- /wp:list -->

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/opfcizgwu6isl5tat04t.jpg)

<!-- wp:paragraph -->
<p>2. Create a new node configuration by click <strong>+</strong> and then <strong>Node.js </strong>from the dropdown</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4828} -->
<figure class="wp-block-image"><img src="https://tenmilesquare.com/wp-content/uploads/2019/10/new-config-1024x633.jpg" alt="" class="wp-image-4828"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Fill in the configuration details<ul><li>Name: Anything you want</li><li>Working directory: This will default to the root of your project. Be sure it points to the directory with your serverless.js file</li><li>JavaScript file: this should point to the serverless binary: Typically /usr/local/bin/sls<br> If you do not know where sls is installed you can find it by typing <code><em><strong>which sls</strong></em></code> in the terminal</li><li>Application parameters: 'offline'<ul><li>Be sure to add any additional parameters you might need such as '-s local'</li></ul></li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":4830} -->
<figure class="wp-block-image"><img src="https://tenmilesquare.com/wp-content/uploads/2019/10/FIllin-config-1024x651.jpg" alt="" class="wp-image-4830"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you launch the Configuration as debug, the WebStorm debugger will automatically be hooked into the node process.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This debug configuration may be obvious to a seasoned node developer, but if you're a language transplant like me, you may need help getting started with debugging serverless using WebStorm. This configuration will definitely help you get started understanding the framework and squashing those pesky scripting bugs.</p>
<!-- /wp:paragraph -->