{"id":33314358,"url":"https://github.com/sidworks-dev/sw-plugin-devtools","last_synced_at":"2026-02-16T11:17:10.760Z","repository":{"id":324783353,"uuid":"1098479026","full_name":"sidworks-dev/sw-plugin-devtools","owner":"sidworks-dev","description":"Template inspector for Shopware 6. Instantly reveals the exact Twig source behind any storefront element and opens it in your IDE with one click.","archived":false,"fork":false,"pushed_at":"2026-02-15T00:27:45.000Z","size":16002,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-15T00:52:22.761Z","etag":null,"topics":["shopware6","shopware6-plugin"],"latest_commit_sha":null,"homepage":"https://www.sidworks.nl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sidworks-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-17T18:38:21.000Z","updated_at":"2026-02-15T00:27:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sidworks-dev/sw-plugin-devtools","commit_stats":null,"previous_names":["sidworks-dev/sw-plugin-devtools"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/sidworks-dev/sw-plugin-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidworks-dev%2Fsw-plugin-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidworks-dev%2Fsw-plugin-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidworks-dev%2Fsw-plugin-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidworks-dev%2Fsw-plugin-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sidworks-dev","download_url":"https://codeload.github.com/sidworks-dev/sw-plugin-devtools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidworks-dev%2Fsw-plugin-devtools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29506684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shopware6","shopware6-plugin"],"created_at":"2025-11-19T12:00:37.520Z","updated_at":"2026-02-16T11:17:10.748Z","avatar_url":"https://github.com/sidworks-dev.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Developer Experience"],"readme":"# Sidworks DevTools for Shopware 6\n\nNever hunt for a Twig file again. Sidworks DevTools reveals the exact template and block behind every Shopware 6 element and lets you jump straight into your IDE with a single click. It also includes a optimised storefront watcher.\n\n![Screenshot](./docs/sw-devtools.png)\n\n## Features\n\n### Shopware Plugin\n- **Smart Template Tracking**: Automatically tracks every Twig block with detailed metadata (template name, file path, line number, parent template)\n- **HTML Markers**: Injects lightweight HTML comments (`\u003c!-- SWDT:ID --\u003e`) to map elements to their source templates\n- **Intelligent Line Detection API**: Backend endpoint that searches template files to find the exact line of your selected element (not just the block start)\n- **Security First**: Only active in debug mode (`APP_ENV=dev`) with configurable on/off switch\n- **Zero Production Impact**: Completely disabled in production environments\n\n### [Chrome extension](https://github.com/sidworks-dev/sw-plugin-devtools-chrome-extension)\n- **DevTools Sidebar Integration**: Adds a \"Shopware\" panel in Chrome's Elements sidebar\n- **Instant Template Info**: Select any element to see its template, block name, file path, and inheritance chain\n- **Smart IDE Integration**: One-click to open templates at the exact line in PHPStorm or VSCode\n- **Intelligent Line Search**: Automatically finds the precise element line by searching for classes, IDs, and tags\n- **Multi-Editor Support**: Works with PHPStorm and VSCode\n\n### Optimized Storefront Watcher\n- **One command start**: `bin/console sidworks:watch-storefront`\n- **Theme picker by default**: Choose theme + domain directly in the terminal\n- **Fast feedback**: Live SCSS updates with readable JS/Twig/SCSS logs\n- **Simple toggles**: `--no-js`, `--no-twig`, `--no-scss`\n\n## Requirements\n\n- Shopware 6.6.x or 6.7.x\n- PHP 8.1 or higher\n- Chrome or Edge browser (for extension)\n- Node.js 20+ (required for storefront watcher)\n- [Bun](https://bun.sh) optional (set `SHOPWARE_STOREFRONT_WATCH_PM=bun` to use it)\n\n## Installation\n\n### Plugin Installation\n\n#### Via Composer (Recommended)\n\n```bash\ncomposer require sidworks/sw-plugin-devtools --dev\nbin/console plugin:refresh\nbin/console plugin:install --activate SidworksDevTools\nbin/console cache:clear\n```\n\n#### Manual Installation\n\n1. Clone or download this repository to `custom/plugins/SidworksDevTools`\n2. Run the following commands:\n\n```bash\nbin/console plugin:refresh\nbin/console plugin:install --activate SidworksDevTools\nbin/console cache:clear\n```\n\n### Chrome Extension Installation\n\n1. Download [Chrome extension](https://github.com/sidworks-dev/sw-plugin-devtools-chrome-extension)\n2. Open Chrome and navigate to `chrome://extensions/`\n3. Enable **Developer mode** (toggle in top right)\n4. Click **Load unpacked**\n5. Select the extension directory\n6. The extension icon will appear in your toolbar\n\n## Configuration\n\n### Plugin Configuration\n\n1. Ensure Shopware is running in debug mode: set `APP_ENV=dev` in your `.env` file\n2. (Optional) Navigate to **Settings** → **System** → **Plugins** in Shopware admin\n3. Find **Sidworks DevTools** and click **Configuration** to enable/disable\n\n### Extension Configuration\n\n1. Click the extension icon and select **Options**\n2. Set your **Project Path** (e.g., `/Users/yourname/Projects/shopware`)\n3. Choose your preferred **Editor** (PHPStorm or VSCode)\n4. Enable/disable **IDE Integration**\n\nThe project path should be the absolute path to your Shopware root directory.\n\n**Tip for Docker/DDEV users**: Add the `PROJECT_PATH` environment variable to your `docker-compose.yml` or `.ddev/config.yaml`:\n\n```yaml\nweb_environment:\n  - PROJECT_PATH=/Users/yourname/Development/your-shopware-project\n```\n\nThe plugin will automatically inject this path into the page, so you don't need to manually configure it in the extension options.\n\n## Usage\n\n### Storefront Watcher (`sidworks:watch-storefront`)\n\nRun from your project root:\n\n```bash\nbin/console sidworks:watch-storefront\n```\n\nWhat this gives you:\n- Interactive theme/domain selection by default\n- Fast defaults for day-to-day storefront work\n- Clear terminal output with `[SCSS]`, `[TWIG]`, and `[JS]` log tags\n\nCommon toggles:\n\n```bash\nbin/console sidworks:watch-storefront --no-js\nbin/console sidworks:watch-storefront --no-twig\nbin/console sidworks:watch-storefront --no-scss\n```\n\nTheme selection shortcuts:\n\n```bash\nbin/console sidworks:watch-storefront --theme-name=QsoTheme\nbin/console sidworks:watch-storefront --theme-id=018e94f67ba2719da036725041793f30 --domain-url=https://carclean.ddev.site/nl\nbin/console sidworks:watch-storefront --pick-theme\n```\n\n`--domain-url` requires `--theme-id` (or use `--pick-theme` for interactive theme + domain selection).\n\n### Template Inspector — Basic Workflow\n\n1. **Enable debug mode** in Shopware (`.env`: `APP_ENV=dev`)\n2. **Install both** the plugin and [Chrome extension](https://github.com/sidworks-dev/sw-plugin-devtools-chrome-extension)\n3. **Visit your storefront** in Chrome\n4. **Open DevTools** (F12 or right-click → Inspect)\n5. **Select any element** in the Elements panel\n6. **View template info** in the \"Shopware\" sidebar on the right\n7. **Click the IDE link** to jump directly to the template file at the exact line\n\n### What You'll See\n\nWhen you inspect an element, the sidebar shows:\n\n- **Template Type**: Page, Component, or Utility\n- **Block Name**: The Twig block that rendered this element\n- **Template Path**: Full Shopware namespace path (e.g., `@Storefront/storefront/page/product-detail/index.html.twig`)\n- **Parent Template**: The template this one extends (inheritance chain)\n- **File Path**: Relative filesystem path\n- **IDE Link**: Click to open in PHPStorm/VSCode at the exact element line\n- **Element Info**: Tag name, ID, and classes\n\n### Smart Line Detection\n\nThe extension doesn't just open templates at the block start—it searches for the exact line:\n\n1. **Exact ID match**: `id=\"product-detail-123\"` → finds exact match\n2. **Partial ID match**: `id=\"product-{{ product.id }}\"` → matches static prefix\n3. **Multi-class match**: `class=\"btn btn-primary\"` → tries all combinations\n4. **Parent context**: Uses parent element classes to disambiguate similar elements\n5. **Dynamic class prefix**: `class=\"card-{{ type }}\"` → matches `card-` prefix\n6. **Tag fallback**: Falls back to tag name (`\u003cdiv\u003e`, `\u003cimg\u003e`) if needed\n\n### Example Output\n\n```\n📄 Page Template: index.html.twig\n\n🚀 Open in PHPStorm\n  └─ Open file at line 42\n  └─ ✓ Found element at line 42 (matched: product-detail-content)\n\n📦 Block Name: page_product_detail\n\n📂 Full Path: @Storefront/storefront/page/product-detail/index.html.twig\n\n⬆️ Extends: @Storefront/storefront/base.html.twig\n\n💻 File Path: vendor/shopware/storefront/Resources/views/storefront/page/product-detail/index.html.twig\n\n🏷️ Element: DIV#product-123.product-detail-content\n🎨 Classes: product-detail-content container\n```\n\n## How It Works\n\n### Backend (Plugin)\n\n1. **TemplateDebugNodeVisitor**: Twig compiler visitor that wraps every block with tracking functions\n2. **TemplateDebugExtension**: Twig extension providing `swdt_track_block()`, `swdt_start_marker()`, and `swdt_end_marker()`\n3. **TemplateRegistry**: In-memory registry collecting all template metadata during page render\n4. **ResponseSubscriber**: Injects collected data into HTML response as JSON and wraps elements with `data-swdt` attributes\n5. **TemplateSearchController**: API endpoint (`/_action/sidworks-devtools/find-line`) that searches template files to find exact element lines\n\n### Frontend (Extension)\n\n1. **content.js**: Content script that detects DevTools data on page\n2. **background.js**: Service worker managing extension state\n3. **devtools-init.js**: Creates the \"Shopware\" sidebar panel\n4. **inspector.js**: Sidebar logic that reads element data and communicates with the page\n5. **Smart search**: Sends element classes/ID/tag to backend API to find exact line in template file\n\n## Security\n\n- **Debug Mode Only**: Plugin is completely disabled when `APP_ENV=prod`\n- **Configurable**: Can be disabled even in debug mode via plugin settings\n- **Input Validation**: API endpoint validates all inputs (class names, IDs, file paths)\n- **Path Traversal Protection**: Only allows reading `.twig` files within project directory\n- **No Production Data**: No overhead or data collection in production\n\n## Browser Compatibility\n\nThe [Chrome extension](https://github.com/sidworks-dev/sw-plugin-devtools-chrome-extension) works with:\n- Google Chrome (Manifest V3)\n- Microsoft Edge (Chromium-based)\n- Brave\n- Other Chromium-based browsers\n\n## License\n\nMIT License - See [LICENSE](LICENSE.md) file for details\n\n## Author\n\n**Sidworks**\nWebsite: [www.sidworks.nl](https://www.sidworks.nl)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues or pull requests.\n\n**Important**: This project consists of two components that work together:\n- **[Shopware Plugin](https://github.com/sidworks-dev/sw-plugin-devtools)**\n- **[Chrome extension](https://github.com/sidworks-dev/sw-plugin-devtools-chrome-extension)**\n\nWhen updating the plugin, ensure you also update the extension if the changes affect the data format or API. Similarly, when updating the extension, verify compatibility with the plugin. Both components should be kept in sync.\n\n## Support\n\nFor issues and questions:\n- Create an issue on GitHub\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidworks-dev%2Fsw-plugin-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidworks-dev%2Fsw-plugin-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidworks-dev%2Fsw-plugin-devtools/lists"}