DEV Community

Cover image for Debug your GitHub Action with Visual Studio Code
Leonardo Montini
Leonardo Montini

Posted on

Debug your GitHub Action with Visual Studio Code

GitHub Actions are a powerful tool to automate your workflow. They can be used to run tests, deploy your code, publish a package, and much more.

The cool thing is, there's a GitHub Actions Marketplace where you can find a lot of actions created by... the community.

But what if you can't find the action you need? You can create your own and publish it there!

How to use this tutorial

Read more...

In this tutorial we're going to see in detail how to:

  • Create a GitHub Action in Typescript
  • Expand our Action to support custom inputs
  • Integrate with GitHub's API to add labels to Pull Requests
  • Unit testing our action
  • Debugging in Visual Studio Code
  • Publishing our action to the GitHub Marketplace
  • Using our action in another repository
  • Some final touches to make our project more robust

The articles will be split into separate bite-sized chapters as technically each one can be a little tutorial by itself.

If you're interested in the full text all at once, you can find it here: https://leonardomontini.dev/typescript-github-action/

One more great piece of advice is to create a new repository and follow along with the steps. This way you'll have a working action at the end of the post and you'll be able to play with it and experiment, rather than just reading a long tutorial and forgetting about 90% of it.

The full code of this tutorial is available on GitHub on this repo, so you can always refer to it if you get stuck.

The full tutorial (all chapters at once) is also available as a video, which you can find here:

Chatper 6: Debugging the action

Our favourite tool is flooding the code with console.log, but we all know there's a better way to debug code. Let's see how we can debug our action with Visual Studio Code.

Setup

To get started, we need one more package in our dev dependencies: ts-node. This will allow us to run our action directly from the source code, without having to build it first.



npm install -D ts-node


Enter fullscreen mode Exit fullscreen mode

With vscode, the launch configuration is stored in a file called launch.json. We can create it by clicking on the debug icon in the sidebar and then on the gear icon, or manually by creating a .vscode/launch.json file with this content:



{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node",
      "type": "node",
      "request": "launch",
      "args": ["./src/index.ts"],
      "runtimeArgs": ["-r", "ts-node/register"],
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

Debugging

You can now put a breakpoint in your code and click on the play button in the debug sidebar. This will start the debugger and run your action. You can also use the F5 key to start the debugger.

In this specific example, there isn't too much to debug, but if you're working on a more complex action, this can be a lifesaver.

Inputs

Ah, I almost forgot, what if your action has some inputs? How can you debug it?

You can store them directly in your launch configuration as environment variables with the following rules, the will get picked up by getInput:

  • prefix the name of the input with INPUT_
  • name the input in uppercase

In our example it would be something like this:



{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node",
      "type": "node",
      "request": "launch",
      "args": ["./src/index.ts"],
      "runtimeArgs": ["-r", "ts-node/register"],
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "env": {
        "INPUT_GH-TOKEN": "secret-token-123456",
        "INPUT_LABEL": "needs-review"
      }
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

If you now hit F5 to start the debugger, you'll see that the environment variables are available in your action and are properly read by getInput.

Debugging the Action

Closing

And that was it for today! if you have any question or suggestion, feel free to add a comment :)

See you in the next chapter!


Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:
YouTube

Feel free to follow me to get notified when new articles are out ;)

Top comments (0)