2017-04-25 16 views
9

Patrzę na kartę "Źródła" w narzędziach dla programistów Chrome. Niektóre foldery są pomarańczowe i kursywą. Czym różnią się od "zwykłych" folderów (pokazanych na niebiesko)?Dlaczego Chrome devtools pokazuje te foldery w kolorze pomarańczowym i kursywą?

enter image description here

+5

Musisz mieć [mapowane źródła] (https://developers.google.com/web/tools/setup/setup-workflow) te foldery. Może się również zdarzyć automatycznie, jeśli twój paker/kompilator zachowa mapy źródłowe. – wOxxOm

+3

Aby rozwinąć odpowiedź wOxxOm - oznacza to, że pliki nie są w rzeczywistości ładowane/interpretowane bezpośrednio przez przeglądarkę - istnieje raczej arkusz stylów, który został "skompilowany" przez te źródła, a dzięki magii plików pochwalnych pliki źródłowe są udostępniane do sprawdzenia w narzędziach programistycznych - jeśli jednak narzędzia programistyczne zostałyby zamknięte, nie zostałyby załadowane. –

+0

Zobacz [Wprowadzenie do map źródłowych JavaScript] (https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) – Vadim

Odpowiedz

2

kolor Folder

  • Niebieski - Zwykły folder nie zawiera jakiekolwiek źródło odwzorowuje pliki
  • Pomarańczowe - Folder zawiera pliki źródłowe zawierające mapy dołączone (.less/.css lub .ts/.js)

kolor zasobów

  • Żółte - JS
  • Violet - CSS & Fonts
  • Zielona - Obrazy
  • Szary - HTML