Socket Inspector Development

Development environment for Socket Inspector, a Chrome DevTools extension that enables debugging of WebSocket connections on host pages.

Monorepo Structure

This is a pnpm workspace monorepo with the following packages:

**packages/extension** - Chrome DevTools extension (main application)

**packages/test-app-ui** - Host page for testing the extension

**packages/test-app-server** - WebSocket server consumed by test-app-ui

**packages/playwright-tests** - End-to-end tests

When working with this codebase:

1. **Code Quality Commands**

- Run `pnpm format` to format code

- Run `pnpm lint:fix` to lint and auto-fix issues

- Run `pnpm typecheck` to validate TypeScript types

2. **Testing**

- Run `pnpm test:unit` for unit tests

- For e2e tests: first run `pnpm prepare:e2e` to build mock extension, then `pnpm e2e`

- Run `pnpm prepare:release` to execute the full validation suite

3. **Package Management**

- Use `pnpm` for all package operations (install, add, remove)

- Workspace dependencies are managed at the root level

This is a Chrome extension project - changes must be compatible with Chrome Extension APIs

WebSocket debugging requires understanding of both DevTools protocol and WebSocket API

The test-app-ui and test-app-server packages exist solely for testing the extension

E2e tests require the extension to be built before running

**Adding a new feature to the extension:**

1. Make changes in `packages/extension`

2. Run `pnpm typecheck` and `pnpm lint:fix`

3. Build with `pnpm prepare:e2e`

4. Test manually using test-app-ui or via `pnpm e2e`

**Fixing a bug:**

1. Add a failing unit test in the relevant package

2. Implement the fix

3. Run `pnpm test:unit` to verify

4. Run full validation with `pnpm prepare:release`

**Before committing:**

Always run `pnpm prepare:release` to ensure all checks pass (format, lint, typecheck, tests).