How do you actually use the VS Code snapshot debugger extension

[carlos-granados]

I have downloaded and installed the VS Code Snapshot Debugger Extension. I am new to VS Code. How do you actually use the extension? How do you configure it? How do you set up snapshots and logpoints? How do you see the recorded values from snapshots? All this information is missing in these docs: https://github.com/GoogleCloudPlatform/snapshot-debugger/tree/main/snapshot_dbg_extension it says that you can do all these actions but does not explain how to do them. Some examples would be nice

[mctavish]

That's entirely fair. The documentation that you're referring to was written with the assumption of familiarity with vscode debugger extensions, which isn't a fair assumption.

We'll update the documentation with some screenshots or (hopefully) animations showing the critical actions that you've called out.

Just to avoid leaving you hanging here though:

1. To configure the extension, you'll want to open one of your application's source files. Your application should already be running. Switch to the Run & Debug tab (ctrl+shift+D). Click on "create a launch.json file" and choose "Snapshot Debugger" from the dropdown. The launch.json file will tell vscode how to debug your application and can be configured further. For example, you may want to set your databaseUrl that you set up during the initialization of the snapshot debugger.
2. To start debugging your application, you can click the Run button with "Snapshot Debugger" next to it or just hit F5. You should see the progress for attaching to your application in the bottom right corner, and if successful, you will be prompted for which application you would like to debug.
3. To set up snapshots and logpoints, click in the gutter next to the line numbers in the file you'd like to debug. By default, it will create a breakpoint where a snapshot will be taken with no conditions. You will be prompted to enter any expressions that you want evaluated at snapshot time. Just leave it blank if you don't want any. To set conditional snapshots or logpoints, right-click in the gutter to bring up a menu and choose the option that you want.
4. Once a snapshot has been taken, you can view it using a combination of the call stack and the variables panel on the left in the run & debug view.

I hope that helps, and let me know if you have any questions or if you run into any issues.

[carlos-granados]

So, I tried to follow these instructions and when trying to "Run" the configuration I get this message:

Cannot connect to Firebase.

• Are you logged into gcloud?
• Have you set up the Snapshot Debugger on this project?
• Do you have Firebase Database Admin permissions or higher?
• Is the correct database URL specified in your launch.json?

As far as I can tell:

• I am logged into gcloud
• Snapshot debugger is running in this project and a debuggee has been added to the Firebase database
• I do have Firebase Database Admin permissions
• The database URL is specified in launch.json

This is my launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "snapshotdbg",
            "name": "Snapshot Debugger",
            "request": "attach",
            "databaseUrl": "https://xxxxxxxx-cdbg.firebaseio.com/"
        }
    ]
}

I can connect and see the debuggee using the snapshot-dbg-cli tool

What else do I need to check/configure?

[carlos-granados]

This is the error that I am seeing in the VS Code console:

2023-05-09 09:47:21.427 [error] Error: Failed to initialize FirebaseApp, attempted URLs: https://xxxxxxxx-cdbg.firebaseio.com/
	at Y6.connectToFirebase (/Users/barel/.vscode/extensions/googlecloudplatform.snapshotdbg-0.1.0/out/main.js:86:148016)
	at async /Users/barel/.vscode/extensions/googlecloudplatform.snapshotdbg-0.1.0/out/main.js:86:148773

Looking at the debug console I can see this other message:

failed to connect to database https://xxxxxxxx-cdbg.firebaseio.com/: Timed out after 2000 ms.

[mctavish]

If you're able to use snapshot-dbg-cli on the same machine that's running vscode, then the best suggestion I have is to run snapshot-dbg-cli init again. If everything's already correctly set up (which it should be) then it will just print out your project and database information. You can then use that to confirm that the database url matches what you've put in the launch.json file.

[carlos-granados]

I ran snapshot-dbg-cli init again and confirmed that the URL is the same that I am using in the launch.json file but it is still not working, throwing the same error. Any other suggestion on anything else I might try?

[mctavish]

We can check the extension logs to see if there's something more helpful outputted when the connection fails.

Modify your launch.json to include "debugOutput": true. Then go to Help > Toggle Developer Tools and switch to the Console tab. When you try to launch the Snapshot Debugger, you should see more detailed logs show up in that console.

[carlos-granados]

I already did that. That's the second output that I listed in my message before.

failed to connect to database https://xxxxxxxx-cdbg.firebaseio.com/: Timed out after 2000 ms.

So it seems that the connection to Firebase is timing out

[mctavish]

Ah, got it. That'll be a timeout from when the initial connection is made and the extension is attempting to read the schema version. The timeout is fixed at the moment; I can push out a quick change to the extension to make that configurable. It's possible that with your location & network that 2000 ms is just not long enough for that initial connection & read to get through.

[mctavish]

Try https://github.com/GoogleCloudPlatform/snapshot-debugger/releases/tag/extension-v0.2.0

Adding something like "connectionTimeoutMs": 30000 to your launch.json should confirm whether the timeout is too short.

[carlos-granados]

That worked! 🎉 Just setting it to 3000 seems to work as well, so it seems that the default timeout just needs to be a bit longer. I am leaving it set to 5000 for now. I'll continue testing and will let you know if I find any more issues. Thanks!

[carlos-granados]

I was having the issue that I was not able to set breakpoints in my code. I found out the the problem is that the extension is only configured to handle JS, Python and Java code and I was trying to test it with PHP Code. I have been able to modify the extension configuration and built it so that it also works in PHP files. Would you like me to create a PR with these changes?

[carlos-granados]

On a different issue, right now when a snapshot is hit, it is unable to open the right file. This happens because the PHP extension is reporting the files for the call stack with the full path in the server, which is different from the path in the local machine where VS Code is running. It would be great to be able to have a config setting similar to the one that Xdebug uses, where you can add this to your configuration:

"pathMappings": {
                "/var/www/i6-in2plane": "${workspaceRoot}",
            }

And this takes care of resolving the right file when a breakpoint is hit

[mctavish]

You're right; the extension explicitly states which languages it supports for debugging. Happy to hear that you have a dev version of the extension up and running. We'll want to get the PHP agent code merged in and available to the public before we push a change that adds PHP support to this extension, but I'll be happy if you send a PR and we'll get it in once it's unblocked.

As for the workspace root, that's a good suggestion. I'll cut a new issue for that and we can track discussion/implementation there.

[carlos-granados]

#140