composer-web

The Composer Web Extension is a powerful tool designed for Cursor that simplifies the process of capturing live browser content and logging it directly into Composer. This facilitates more effective debugging, streamlined documentation, and easy sharing of web content with contextual information.

Key Features

• 📸 Smart Capture: Connect and capture everything with a single shortcut.
• 📊 Real-time Monitoring: Monitor console logs and network requests as they happen.
• 🔍 Log Filtering: Customize log filtering to focus on what matters.
• 🎯 Multi-tab Support: Easily select from any open tab in your debugging browser.
• 📱 iOS Simulator Integration (Beta): Capture screenshots from iOS simulators, enhancing your debugging capabilities.
• ⚡ Advanced Options: Access additional commands tailored to specific capture needs.
• 🎛️ Keybinding Management: Customize keybindings effortlessly through the settings panel.

How It Works

1. Connect to a Tab:

   • Use Cmd/Ctrl + ; or select the connect button in the status bar to choose your target tab. Monitoring of console logs and network requests will commence immediately.

2. Monitor Activity:

   • The status bar indicates which tab is active. All logs and network requests are collected in real time, remaining available until cleared or a disconnection occurs.

3. Capture State:

   • Press the connection shortcut again or the capture button to log everything, including a full-page screenshot and all console and network logs. This information is sent directly to Composer for easy access.

4. iOS Simulator Integration (Beta):

   • Active in the Settings Panel, this feature enables connections to running iOS simulators for capturing screenshots from mobile applications and sending them to Composer.

Getting Started

To utilize the extension effectively, launch Chrome with remote debugging enabled:

# macOS
open -n -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-debug-profile

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile

After launching, press Cmd/Ctrl + ; to connect and start capturing!

Usage Tips

• Status Bar Indicators: Understand connection status through visual cues in the status bar, with indicators showing whether connected to a tab or an iOS simulator.
• Best Practices: Wait for pages to load completely before capturing, clear logs between sessions, and use a fresh Chrome profile to avoid conflicts.

Community Contributions

Contributions are welcomed! Users can report bugs, suggest features, or contribute code by following guidelines available in the repository. For bug reports or feature requests, refer to the project’s Issues section.

The Composer Web Extension provides a seamless development experience by integrating real-time monitoring and logging with easy capture functionalities, streamlining the debugging process.