Chrome Developer Tools: Was ist Snippets-Unterstützung?

76

Ab Version 19 verfügt der Web Inspector von Chrome über eine experimentelle Funktion namens "Snippets-Unterstützung". So aktivieren Sie es:

  1. Öffnen Sie chrome: flags, aktivieren Sie "Developer Tools-Experimente" und starten Sie neu.

  2. Öffnen Sie den Web Inspector (Entwicklertools), klicken Sie auf das Einstellungszahnradsymbol in der unteren rechten Ecke, aktivieren Sie "Snippets-Unterstützung" und starten Sie neu.

    Aktivieren Sie die Unterstützung von Snippets

  3. Öffnen Sie das Skriptbedienfeld, klicken Sie links auf das Symbol "Navigatorbaum" und suchen Sie eine leere Registerkarte "Snippets".

    Registerkarte "Snippets"

Meine Frage ist: Wofür kann ich das verwenden? Wie kann ich dies mit Ausschnitten füllen?

javascript google-chrome-devtools web-inspector Jo Liss
quelle
4
Es gibt jetzt sehr vollständige Dokumente zu Snippets: developer.google.com/chrome-developer-tools/docs/… Enjoy
Paul Irish
@PaulIrish Die Seite des Links enthält keinen Snippets-Teil mehr.
Amigo

Antworten:

85

Kurz gesagt, Snippets sind eine mehrzeilige Konsole, ein iterativer JS-Entwicklungsworkflow und ein dauerhafter Speicher für allgemeine Debugging-Helfer.

developer.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Einige der Anwendungsfälle, bei denen Snippets helfen können, sind:

  • Lesezeichen - Alle Ihre Lesezeichen können als Snippets gespeichert werden, insbesondere diejenigen, die Sie möglicherweise bearbeiten möchten.
  • Dienstprogramme - Debugging-Helfer für die Interaktion mit der aktuellen Seite können gespeichert und debuggt werden. Eine von der Community kuratierte Liste solcher Dienstprogramme ist verfügbar.
  • Debuggen - Snippets bieten eine mehrzeilige Konsole mit Syntaxhervorhebung und Beständigkeit, die das Debuggen von Code erleichtert, der mehr als einzeilig ist.
  • Monkey-Patching-Code - Code, den Sie zur Laufzeit patchen möchten, kann über Snippets erstellt werden, obwohl Sie den Code häufig nur live auf der Registerkarte Sources bearbeiten können.

Schnipsel Screenshot

Zuletzt habe ich persönlich einige allgemeine Ausschnitte gesammelt, die Sie möglicherweise in Ihr Arsenal aufnehmen: github.com/paulirish/devtools-addons/wiki/Snippets

Um Snippets schnell auszuführen, können Sie dies jetzt tun. Strg-Umschalt-P für die "Befehlspalette", dann Rücktaste und ein! Präfix, geben Sie dann den Snippet-Namen ein, den Sie ausführen möchten.

Geben Sie hier die Bildbeschreibung ein

Paul Irish
quelle
3
Was wäre der schnellste Weg, um ein Snippet auszuführen? Ich könnte Strg + Umschalt + I (DevTools öffnen), Strg + P (Fuzzy-Suche), mit der Eingabe des Snippet-Namens, ENTER (Open Snippet), Strg + ENTER (Snippet ausführen) beginnen. Ich hoffe, ich vermisse etwas und es gibt einen schnelleren Weg. Eine "Snippets-Symbolleiste" im Browser wäre schön.
Šime Vidas
@ ŠimeVidas das ist der schnellste Weg, den ich kenne. Welches Snippet verwenden Sie so oft, dass Sie es auf der Kurzwahl haben möchten?
Paul Irish
Ich brauche diesen, um YouTube zu sehen : javascript:(function(){location.href=location.href.replace('youtube.com/watch','youtube.com/watch_popup')}()). (Ich bin ohne Flash und YouTube lädt nur HTML5-Videos auf seiner "watch_popup" -Seite für mich. Siehe hier: twitter.com/simevidas/status/368054720327204864 ). Auch jsgif zum Anzeigen von animierten GIFs. Ich war begeistert von diesen beiden, also halte ich meine Lesezeichen-Symbolleiste dauerhaft geöffnet.
Šime Vidas
6
Ich frage mich, ob Paul Irish jemals eine Frage beantwortet hat und NICHT als die richtige Antwort markiert wurde ...
Steve
2
@PaulIrish oder Strg-P, damit das Feld leer ist und Sie das nicht löschen müssen >. Danke für den Tipp!
Šime Vidas
12

Ich Paul Irish fragte , ob er etwas davon wußte, er ist nicht sicher , entweder war aber sagt , es ist noch nicht vollständig umgesetzt ist und wies mich auf dem Bug - Tracker, fand ich den Kopf Ticket und Blick auf einen Teil des Codes der Differentiale haben eine Menge FIXME: To be implemented.Bemerkungen.

JaredMcAteer
quelle
7
Es ist fast fertig. Es ermöglicht effektiv eine mehrzeilige Konsole, jedoch mit speicherbaren / benennbaren Eingaben.
Paul Irish
Ich dachte mir das auch, ich freue mich sehr über diese Funktion.
JaredMcAteer
Bessere Antwort von vidar ein paar Antworten unten
android.nick
Die Benutzeroberfläche ist derzeit grob. Unter Windows können Sie Snippets nur mit Strg + S speichern (stellen Sie nur sicher, dass der Fokus auf dem rechten Fenster liegt). Es scheint jedoch keine Verknüpfung zum Ausführen des Snippets zu geben.
Stefan
Chrome speichert Ihre Snippets in localstorage, sodass Sie sie meiner Meinung nach nicht einfach extern bearbeiten können. Am besten bearbeiten Sie extern und kopieren in devtools.
JaredMcAteer
9

Klicken Sie mit der rechten Maustaste, um eine neue zu erstellen.

Chrome DevTools Snippets - Neu

NVI
quelle
5

Die Unterstützung von Chrome Developer Tools-Snippets ermöglicht das Erstellen / Bearbeiten / Speichern und Ausführen von Javascript-Code-Snippets.

vsevik
quelle
3
Diese Funktion funktioniert jetzt mit den neuesten Chrome-Versionen, aber die Benutzeroberfläche ist noch nicht sehr gut. Snippets können über das Navigator-Kontextmenü bearbeitet werden.
Vsevik
3

Ich kann dieses Experiment nicht selbst aktivieren (es gibt keine Developer Tools experimentsin meiner chrome:flags, aber bei Safari habe ich diese Erklärung gefunden:

Kurz gesagt, es ist "ein kleines Dienstprogramm, mit dem Sie HTML- und CSS-Blöcke eingeben und im laufenden Betrieb rendern können".

Aus dem Blog-Beitrag geht hervor, dass es in Safari fehlerhaft ist. Vielleicht hat Chrome es noch nicht implementiert.

Vidar S. Ramdal
quelle
Die Unterstützung von Chrome Developer Tools-Snippets ist eine völlig andere Funktion.
Vsevik
3

Die Liste der nützlichen Schnipsel finden Sie hier http://bgrins.github.io/devtools-snippets/

Eines der nützlichen Snippets ist 'jquerify.js'. Mit diesem Snippet können Sie jQuery in jede Seite einfügen, wenn es noch nicht enthalten ist.

NavaRajan
quelle