☰

Der universelle Komponenten-Analysator 🔬 (v21.0 - Stabil)

Stabilitäts-Update: Behebt Fehler bei Mehrfachauswahl, Link-Klicks und Positionierung.

目前為 2025-06-09 提交的版本，檢視 最新版本。

作者
Moritz Baumeister
評價
0 0 0
版本
21.0
建立日期
2025-06-08
更新日期
2025-06-09
尺寸
19.4 KB
授權條款
MIT
腳本執行於
所有網站

🤔 Was ist das Problem?

Als Entwickler, Datenanalyst oder KI-Enthusiast stehst du oft vor einer Herausforderung: Du musst die genaue technische Blaupause eines Webseiten-Elements verstehen, um es nachzubauen, zu analysieren oder einem LLM zu beschreiben. Das manuelle Inspizieren von komplexen HTML-Strukturen und CSS-Regeln in den Entwickler-Tools ist mühsam, fehleranfällig und extrem zeitaufwendig – besonders wenn du mehrere Elemente vergleichen willst.

✨ Die Lösung: Ein chirurgisches Analyse-Werkzeug für JEDE Webseite

Dieses UserScript ist ein professioneller Komponenten-Analysator, der auf jeder Webseite funktioniert. Es verwandelt deinen Browser in ein interaktives Labor, mit dem du jedes beliebige Element mit einem Klick "sezieren" und eine extrem detaillierte, hochkomprimierte und maschinenlesbare Text-Ausgabe erzeugen kannst. Das Format ist perfekt darauf zugeschnitten, von Large Language Models (LLMs) verstanden zu werden.

🚀 Die Features im Überblick

Dieses Tool geht weit über einfaches "Scraping" hinaus und bietet einzigartige Funktionen für den anspruchsvollen Power-User:

  • 🌐 Universelle Kompatibilität: Dank @match *://*/* läuft dieses Skript auf JEDER Webseite im Internet, von alten Foren bis zu modernen Web-Apps. Es ist nicht auf eine bestimmte Seite beschränkt.

  • 🎯 Präziser Element-Picker: Ein Klick auf den frei beweglichen Pipetten-Button am Bildschirmrand aktiviert den Auswahlmodus. Dein Cursor wird zum Skalpell, mit dem du pixelgenau das gewünschte Element anvisieren kannst.

  • 📋 Detaillierte Element-Blaupause: Mit einem Klick erhältst du einen kompletten technischen Steckbrief des Elements, der direkt in deine Zwischenablage kopiert wird. Dieser "Blueprint" enthält:

    • Struktur & Styles: Eine einzigartige Baum-Ansicht aller Kind-Elemente, inklusive der relevanten, vom Standard abweichenden CSS-Stile. Du siehst sofort, welches CSS für das Layout verantwortlich ist.
    • Rohes HTML: Der exakte, komprimierte HTML-Code des ausgewählten Elements, bereinigt von unnötigen Leerzeichen.

  • ➕ Leistungsstarke Multi-Auswahl: Halte die STRG-Taste gedrückt, während du klickst, um mehrere Elemente zu deiner Auswahl hinzuzufügen. Ideal für den Vergleich von Komponenten oder das Sammeln von Trainingsdaten.

  • ✂️ Direkt in die Zwischenablage: Kein manuelles Kopieren und Einfügen. Ein Klick genügt, und die vollständige Analyse liegt bereit, um sie in deinem Editor, einem Dokument oder einem KI-Chat einzufügen.

  • 🕹️ Ergonomisches Interface:

    • Der Button ist per Drag & Drop frei beweglich und merkt sich seine Position.
    • Drücke die ESC-Taste, um den Auswahlmodus jederzeit sofort zu beenden.

💡 So benutzt du das Tool

  1. Aktivieren: Klicke auf den runden Pipetten-Button an der Seite, um den Auswahlmodus zu starten.
  2. Auswählen:
    • Einzel-Auswahl: Klicke auf ein beliebiges Element. Die detaillierte Blaupause wird sofort in deine Zwischenablage kopiert.
    • Mehrfach-Auswahl: Halte die STRG-Taste gedrückt und klicke nacheinander auf mehrere Elemente. Ein abschließender Klick (ohne STRG) auf das letzte Element kopiert die Blaupausen aller ausgewählten Elemente.
  3. Beenden: Drücke die ESC-Taste, um den Auswahlmodus jederzeit abzubrechen.
  4. Analysieren: Füge den Inhalt aus deiner Zwischenablage in dein bevorzugtes Werkzeug ein.

Dieses Tool ist ein unverzichtbarer Begleiter für jeden, der das Web nicht nur ansehen, sondern wirklich verstehen will.

Viel Spaß beim Analysieren! 🎉

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址