Devtools.instructions

---
description: Browser DevTools and local development access credentials
applyTo: '*'
---

# DevTools & Local Development

## Browser Configuration

When opening URLs in DevTools (Chrome MCP tools):
- **Resize the browser** to at least **1900px width** before taking screenshots
- Use `mcp_chrome-devtoo_resize_page` with `width: 1900` and `height: 1200` after navigating

## Local Login

- **URL:** `http://localhost:8080/wp-admin/`
- **Username:** `admin`
- **Password:** `password`

When prompted to log in:
1. Fill the username field with `admin`
2. Fill the password field with `password`
3. Click "Log In"
4. Wait for redirect to complete

### WooCommerce Gateway Settings

- **URL:** `http://localhost:8080/wp-admin/admin.php?page=wc-settings&tab=checkout&section=glitch`
- Navigate: WooCommerce → Settings → Payments → Glitch

### Checkout Test Flow

1. Navigate to `http://localhost:8080/shop/`
2. Add a product to cart
3. Navigate to `http://localhost:8080/checkout/`
4. Verify Glitch payment option is present
5. Fill test customer details
6. Select Glitch payment method and proceed

## Docker

- **Compose file:** `docker-compose.yml`
- **Container names:** `glitch-wordpress`, `glitch-mysql`
- **WordPress port:** `8080` (mapped to container port `80`)
- **MySQL port:** `3306`

### Docker Commands