Frage Chrome-Entwicklertools: Was unterstützt Snippets?


Ab Version 19 verfügt der Web Inspector von Chrome über eine experimentelle Funktion namens "Snippets-Unterstützung". Hier ist, wie man es aktiviert:

  1. Öffnen Sie chrome: flags, aktivieren Sie "Developer Tools experiments", starten Sie neu.

  2. Öffnen Sie den Web Inspector (Developer Tools), klicken Sie auf das Zahnradsymbol für Einstellungen in der unteren rechten Ecke, aktivieren Sie "Snippets-Unterstützung", starten Sie neu.

    enable snippets support

  3. Öffnen Sie das Skriptfenster, klicken Sie auf das Symbol "Navigatorbaum" auf der linken Seite und suchen Sie nach einem leeren Snippets-Tab.

    snippets tab

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


76
2018-05-06 13:01


Ursprung


Antworten:


Kurz gesagt, handelt es sich bei Snippets um eine mehrzeilige Konsole, einen iterativen JS-Entwicklungsworkflow und einen persistenten Speicher für gängige Debugging-Helfer.

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

Einige der Anwendungsfälle, mit denen Snippets arbeiten können, sind:

  • Bookmarklets - Alle Ihre Bookmarklets könnten als Snippets gespeichert werden, insbesondere diejenigen, die Sie bearbeiten möchten.
  • Dienstprogramme - Debugging-Helfer für die Interaktion mit der aktuellen Seite können gespeichert und debuggt werden. Eine von der Community erstellte Liste solcher Dienstprogramme ist verfügbar.
  • Debuggen - Snippets bieten eine mehrzeilige Konsole mit Syntax-Hervorhebung und Persistenz, wodurch es einfacher ist, Code zu debuggen, der mehr als ein Einzeiler ist.
  • Affe-Patching-Code - Code, den Sie zur Laufzeit patchen möchten, kann über Snippets erstellt werden, obwohl Sie Code auf der Registerkarte "Sources" oft live bearbeiten können.

snippets screenshot

Zuletzt habe ich persönlich ein paar allgemeine Snippets gesammelt, die du in dein Arsenal aufnehmen kannst: github.com/paulirish/devtools-addons/wiki/Snippets


Um Snippets schnell auszuführen, können Sie dies jetzt tun. Ctrl-Shift-P für die "Befehlspalette", dann Backspace, und verwenden Sie ein! Präfix, dann geben Sie den Snippetnamen ein, den Sie ausführen möchten.

enter image description here


83
2018-05-07 18:15



Ich fragte Paul Irish, ob er etwas darüber wüsste, er war sich auch nicht sicher, sagte aber, dass es noch nicht vollständig implementiert sei und wies mich auf den Bugtracker, ich fand den Kopf Fahrkarte und einen Blick auf den Code werfen, den die Diffs haben FIXME: To be implemented. Bemerkungen.


12
2018-05-08 13:53



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

Chrome DevTools Snippets — New


9
2017-11-12 12:34



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


5
2017-07-06 20:17



Ich kann dieses Experiment nicht selbst aktivieren (es gibt keine Developer Tools experiments in meinem chrome:flags, aber von Safari habe ich gefunden Dies Erläuterung:

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

Aus dem Blogpost scheint es in Safari fehlerhaft zu sein, also hat Chrome es vielleicht noch nicht implementiert.


3
2018-05-08 13:21



Sie können die Liste der nützlichen Schnipsel hier finden http://bgrins.github.io/devtools-snippets/

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


3
2017-08-19 09:49