How can I run in DEBUG mode to step-through the code?

[raffertyuy]

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

The README.md shares how to run the code locally through ./start.ps1 or ./start.sh

But there are no instructions for running this in Debug (F5) through VS Code. There are 3 debug profiles in launch.json, all of which doesn't work.

Any log messages given by the failure

Run and Debug: Python: Flask

Run and Debug: Frontend: watch

cmd /C "set "NODE_OPTIONS=--require "c:/Program Files/Microsoft VS Code Insiders/resources/app/extensions/ms-vscode.js-debug/src/bootloader.js" --inspect-publish-uid=http" && set "VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"\\\\.\\pipe\\node-cdp.1868-1f014aa1-1.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\\Program Files\\nodejs\\node.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"C:\\Users\\rauy\\AppData\\Local\\Temp\\node-debug-callback-f32bce80076c0258"}" && "C:\Program Files\nodejs\npm.cmd" run-script watch "
Debugger attached.

> [email protected] watch
> tsc && vite build --watch

Debugger attached.
Waiting for the debugger to disconnect...
Debugger attached.
vite v4.1.1 building for production...

watching for file changes...

build started...
✓ 1250 modules transformed.
../backend/static/index.html                    0.49 kB
../backend/static/assets/github-fab00c2d.svg    0.96 kB
../backend/static/assets/index-6b2c2cfa.css     7.46 kB │ gzip:   2.20 kB
../backend/static/assets/index-c687fc31.js    625.76 kB │ gzip: 204.86 kB │ map: 5,057.29 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
built in 15427ms.

Run and Debug: Frontend: build

cmd /C "set "NODE_OPTIONS=--require "c:/Program Files/Microsoft VS Code Insiders/resources/app/extensions/ms-vscode.js-debug/src/bootloader.js" --inspect-publish-uid=http" && set "VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"\\\\.\\pipe\\node-cdp.1868-fd2aa030-6.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\\Program Files\\nodejs\\node.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"C:\\Users\\rauy\\AppData\\Local\\Temp\\node-debug-callback-66843ffc365f7857"}" && "C:\Program Files\nodejs\npm.cmd" run-script build "
Debugger attached.

> [email protected] build
> tsc && vite build

Debugger attached.
Waiting for the debugger to disconnect...
Debugger attached.
vite v4.1.1 building for production...
✓ 1250 modules transformed.
../backend/static/index.html                    0.49 kB
../backend/static/assets/github-fab00c2d.svg    0.96 kB
../backend/static/assets/index-6b2c2cfa.css     7.46 kB │ gzip:   2.20 kB
../backend/static/assets/index-c687fc31.js    625.76 kB │ gzip: 204.86 kB │ map: 5,057.29 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

Expected/desired behavior

Ability to run the app locally and step through the code with breakpoints. For both frontend and backend.

This request may involve fixing launch.json or simply updating the README.md

OS and Version?

Windows 11

Mention any other details that might be useful

App is running locally with no issues. All requirements (python, azure openai, etc.) are met.

[nataliapl]

@raffertyuy I'm executing start.ps1 and I have mime errors. Do you fix it?

[raffertyuy]

@raffertyuy I'm executing start.ps1 and I have mime errors. Do you fix it?

Hey sorry for the late response. I don't see these errors though, so not sure how I can help

[llowevad]

@raffertyuy , Any feedback on this yet? were you able to get it to work?

[mzhukovs]

I tweaked the following to get the debug working, it's not perfect (e.g. you may have to refresh the browser page that opens up once the npm cmd is actually done) but it's a good start and lets you hit breakpoints both in the backend python code as well as in the frontend typescript files:

Add this line to tsconfig.json: "sourceMap": true,

Add this line to settings.json: "python.defaultInterpreterPath": "${workspaceFolder}/app/backend/backend_env/Scripts/python.exe",

Set your launch.json to be:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "cwd": "${workspaceFolder}/app/backend",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload",
                "-p 5000"
            ],
            "console": "externalTerminal",
            "justMyCode": true,
            "envFile": "${input:dotEnvFilePath}",
        },
        {
            "name": "Frontend: watch",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/app/frontend",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "watch"
            ],
            "skipFiles": [
                "<node_internals>/**",
                "node_modules/**"
            ],
            "console": "externalTerminal",
        },
        {
            "name": "Frontend: build",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/app/frontend",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "build"
            ],
            "console": "integratedTerminal",
        },
        {
            "name": "Launch Edge",
            "type": "msedge",
            "request": "launch",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}/app/frontend/src",
            // uncomment next 2 props out to open browser with your regular profile
            // "userDataDir": false,
            // "runtimeArgs": [
            //     "--profile-directory=Default"
            // ]
        },
    ],
    "inputs": [
        {
            "id": "dotEnvFilePath",
            "type": "command",
            "command": "azure-dev.commands.getDotEnvFilePath"
        }
    ],
    "compounds": [
        {
            "name": "Debug",
            "configurations": [
                "Python: Flask",
                "Frontend: watch",
                "Launch Edge"
            ],
            //"preLaunchTask": "${defaultBuildTask}",
            "stopAll": true
        }
    ]
}

Obviously if you want to launch in a different browser (not MS Edge) then just update that part accordingly.

Then run the new "Debug" option to start debugging.

Should probably also add preLaunchTasks to pip install and npm install before launching, that would more or less then completely replace the start scripts.

Hope this helps @llowevad @raffertyuy @nataliapl

[quidba7]

Hi @mzhukovs @llowevad @raffertyuy. Thanks for this reply, very useful. In my case I had to install Azure developer CLI on visual studio in order to execute command azure-dev.commands.getDotEnvFilePath

Now I face a problem in visual studio that is not recognizing the packaged installed in backend_env

c:\Users\Baptiste\JavascriptProjects\azureOpenAI\app\backend\backend_env\Scripts\python.exe: No module named flask Press any key to continue . . .

This is my settings:

{ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "search.exclude": { "**/node_modules": true, "static": true }, "python.defaultInterpreterPath": "${workspaceFolder}/app/backend/backend_env/Scripts/python.exe", }

Any idea? Thanks

[raffertyuy]

Thanks @mzhukovs @llowevad and @quidba7 for helping! I honestly stopped trying as I moved to the newer https://github.com/microsoft/sample-app-aoai-chatGPT. Feel free to close this issue if you feel it's no longer relevant.

[quidba7]

Thanks @raffertyuy , Are you able to debug ok with the new repository ?

[pamelafox]

I am able to debug the Python code with the current launch.json (which runs a Quart module, not Flask - we ported a few months ago). I run it inside a Dev Container, so things like the azd extension are already installed for me.

I also typically also install all the requirements into the container, with python3 -m pip install -r requirements-dev.txt. That means I don't have to specify the name of the Python backend venv (though that's a good idea).

[quidba7]

Thanks a lot @pamelafox I actually used the launch.json file from this thread rather than the repository one. It works now! I guess it is only debug for the backend part, not front-end.

[sunnygambit1989]

@pamelafox Not able to debug(not using docker) Steps taken:

1. created env enviroment
2. activated it
3. the running python:quart Nothing is happening

[pamelafox]

@sunnygambit1989 Please download the latest version of azd, it contains the fix. There's a link in the terminal in your screenshot.

[sunnygambit1989]

Thanks @pamelafox let me check

[sunnygambit1989]

It worked @pamelafox thanks