Miałem ten problem od zawsze i ostatecznie zdecydowałem, że nie powinniśmy edytować rzeczy w inspektorze sieci i zbudować coś dla niego ( https://github.com/viatropos/design.io ).
Lepsze rozwiązanie:
Przeglądarka automatycznie odzwierciedla zmiany CSS bez ponownego ładowania po naciśnięciu przycisku Zapisz w edytorze tekstu .
Głównym powodem, dla którego edytujemy css w inspektorze sieci (używam webkita, ale FireBug jest to samo), jest to, że musimy wprowadzić drobne poprawki, a ponowne załadowanie strony trwa zbyt długo.
Z takim podejściem wiążą się 2 główne problemy. Po pierwsze, możesz edytować pojedynczy element, który może nie mieć idselektora. Więc nawet gdybyś był w stanie skopiować / wkleić wygenerowany CSS z inspektora sieci, musiałby on wygenerować idzakres CSS. Coś jak:
#element-127 {
background: red;
}
To spowodowałoby bałagan w CSS.
Możesz to obejść, zmieniając tylko style istniejącego selektora ( .spaceselektor klasy na poniższym obrazku inspektora Webkit).
Wciąż jednak drugi problem. Interfejs do tego jest dość szorstki, trudno jest wprowadzić duże zmiany - na przykład, jeśli chcesz spróbować naprawdę szybko skopiować ten blok css do tego miejsca, czy cokolwiek innego.
Wolę po prostu trzymać się TextMate.
Idealnie byłoby po prostu napisać CSS w edytorze tekstu i pozwolić przeglądarce odzwierciedlić zmiany bez ponownego ładowania strony . W ten sposób będziesz pisać ostateczne css podczas wprowadzania drobnych zmian.
Następnym poziomem byłoby napisanie w dynamicznym języku CSS, takim jak Stylus, Less, SCSS itp., I zaktualizowanie przeglądarki za pomocą wygenerowanego CSS. W ten sposób możesz zacząć tworzyć miksy, takie jak box-shadow(), które odciągają zawiłości, których inspektor sieciowy zdecydowanie nie mógł zrobić.
Jest kilka rzeczy, które to robią, ale moim zdaniem nic tak naprawdę nie usprawnia.
Brak możliwości łatwego dostosowania sposobu ich działania jest głównym powodem, dla którego ich nie użyłem.
Stworzyłem https://github.com/viatropos/design.io specjalnie w celu rozwiązania tego problemu i sprawiłem, że tak:
- Przeglądarka odzwierciedla css / js / html / etc za każdym razem, gdy zapisujesz, bez ponownego ładowania strony
- Obsługuje dowolny szablon / język / framework (Stylus, Less, CoffeeScript, Jade, Haml itp.)
- Jest napisany w JavaScript i możesz szybko połączyć rozszerzenia w JavaScript.
W ten sposób, gdy musisz wprowadzić te małe zmiany w CSS, możesz powiedzieć, ustaw kolor tła, naciśnij Zapisz, zobacz nie, niezupełnie, dostosuj odcień o 10, zapisz, nie, dostosuj o 5, zapisz, wygląda dobrze.
Sposób, w jaki to działa, polega na obserwowaniu każdego zapisywania pliku (na poziomie systemu operacyjnego), przetwarzaniu pliku (w tym miejscu działają rozszerzenia) i wysyłaniu danych do przeglądarki za pośrednictwem gniazd sieciowych, które są następnie obsługiwane (po stronie klienta rozszerzenie).
Nie podłączać ani nic, ale walczyłem z tym problemem przez długi czas.
Mam nadzieję, że to pomoże.
