Debugging your application is an existential step while building your app. You could also console.log every two lines but debugging an application will make your development process a lot easier.

In this quick guide I want to show you how you can debug your shopify application by editing to files:

First you need to create a launch.json file which should be placed inside of your .vscode directory which is at the root of your project directory. If you don't have a .vscode directory then create one.

go to your launch.json file and type in

{
    "version": "0.2.0", 
    "configurations": [
      {
        "command": "npm run dev:x",
        "name": "Run npm run dev",
        "request": "launch",
        "type": "node-terminal",
        "cwd": "${workspaceFolder}"
      },
      {
        "name": "Attach by Process ID",
        "processId": "${command:PickProcess}",
        "request": "attach",
        "skipFiles": ["<node_internals>/**"],
        "type": "pwa-node"
      }
    ]
  }

You should now be able to start your debugger in vs code by clicking the bug icon on the left and then run the debugger by clicking the green arrow next to "RUN AND DEBUG" at the top.

If that doesn't work in your shopify application that was built with Remix js then you might have to go to your remix.config.js and set the sourceMap to true. So just add this line of code

sourceMap: true,

And that's it. Now you should be able to debug your application!