How to debug Serverless framework using typescript with VSCode

I have a serverless framework project using typescript and I am trying to debug the project on VSCode, all my breakpoints are shown as "unbound breakpoints" and I am unable to debug the project all all.

here my launch.json file :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug locally",
            "program": "${workspaceRoot}/node_modules/.bin/sls",
            "args": [
                "invoke",
                "local",
                "-f",
                "helloWorld",
                "--data",
                "{}"
            ],
            "sourceMaps": true,
            "smartStep": true,
            "runtimeArgs": [
                "--lazy"
            ],
            "outFiles": [
                "${workspaceFolder}/.webpack/**/*.js"
            ],
            "protocol": "inspector",
            "runtimeExecutable": "node"
        }
    ]
}

I am doing sure what I am doing wrong here, any help would be greatly appreciated.