debug extensions in vscode from src files

[BrettBedarf]

Hi,

I'm trying to figure out how to debug extensions in vscode. I'm running vendure in dev mode with the default config and compileUiExtensions to add the extension which is running fine on port 3000.

I tried attaching to the port 3000 server which almost worked. I could trigger a breakpoint with the debugger; statement but it goes to the generated admin-ui directory. Setting gutter breakpoints from within that generated directory works so I believe it's a path mapping issue but over my head. Is there a way to map to the original source files? It's not the end of the world, but the extension names are replaced with uuid so I have to figure out which directory and have to have compiled debugging file open side-by-side with source to make edits.

export const config: VendureConfig = {
  apiOptions: {
		  port: 3000,
		  adminApiPath: 'admin-api',
		  adminApiPlayground: {
			  settings: {
				  'request.credentials': 'include',
			  } as any,
		  }, // turn this off for production
		  adminApiDebug: true, // turn this off for production
		  shopApiPath: 'shop-api',
		  shopApiPlayground: {
			  settings: {
				  'request.credentials': 'include',
			  } as any,
		  }, // turn this off for production
		  shopApiDebug: true, // turn this off for production
	  },
  

  AdminUiPlugin.init({
			  route: 'admin',
			  port: 3002,
			  app: compileUiExtensions({
				  outputPath: path.join(__dirname, '../admin-ui'),
				  extensions: [ExamplePlugin.uiExtensions],
				  devMode: true,
			  }),
		  }),
   ...
}

[michaelbromley]

Hi @BrettBedarf,

I'm not too familiar with debugging in VS Code (I'm a WebStorm guy myself), but one tip I can share: if you set the id property on your UI extension object, it will use that string rather than a hash.