2017-04-25 4 views
9

Ich schaue auf den Tab "Quellen" in den Chrome-Entwicklertools. Einige der Ordner sind orange und kursiv. Wie unterscheiden sich diese von den "normalen" Ordnern (blau dargestellt)? Warum zeigt Chrome Devtools diese Ordner orange und kursiv an?

enter image description here

+5

Sie müssen [source-mapped] (https://developers.google.com/web/tools/setup/setup-workflow) diese Ordner haben. Könnte auch automatisch passieren, wenn Ihr Bundler/Compiler Quellkarten speichert. – wOxxOm

+3

Um die Antwort von wOxxOm zu erweitern - das bedeutet, dass die Dateien nicht direkt vom Browser geladen/interpretiert werden - es gibt vielmehr ein Stylesheet, das von diesen Quellen "kompiliert" wurde, und über die Magie von Quellkarten die Quelldateien werden in den Entwicklungstools für Ihre Überprüfung zur Verfügung gestellt - wenn die Entwicklungstools jedoch geschlossen wurden, wurden sie nicht geladen. –

+0

Siehe [Einführung in JavaScript-Quellkarten] (https://www.html5rocks.com/de/tutorials/developertools/sourcemaps/) – Vadim

Antwort

2

Ordner Farbe

  • Blau - Regelmäßige Ordner enthält keine Quelle Karten Dateien
  • orange - Der Ordner enthält Dateien Quelle Karten mit beigefügt (.Weniger/.css oder .ts/.js)

Ressourcen Farbe

  • Yellow - JS
  • Violet - CSS & Fonts
  • Grün - Bilder
  • Grau - HTML
Verwandte Themen