Najnowsze informacje o Narzędziach deweloperskich
Pierwsza wiadomość w tym poście jest nieco meta – to właśnie ta aktualizacja. Od czasu do czasu, ale przynajmniej raz w miesiącu, będę podsumowywać, co się dzieje w świecie DevTools w Chrome.
I to nie żart – opowiem o nowych funkcjach, które właśnie pojawiły się w Chrome Canary. Jeśli wolisz wersję stabilną, też nie ma problemu. Jeśli jednak lubisz podejmować ryzyko i chcesz być na bieżąco, te wpisy są dla Ciebie. Oprócz najnowszych funkcji i poprawek znajdziesz na końcu każdego posta sekcję Aktualności społeczności, w której wyróżniamy najlepsze treści przesłane przez naszych ulubionych użytkowników.
Bez zbędnych ceregieli przejdźmy do rzeczy.
Nowości w Narzędziach deweloperskich
Zrzuty ekranu przypominające film w sekcji Sieć i na osi czasu
Zaledwie tydzień temu wyjęliśmy z fazy eksperymentalnej ważną nową funkcję: możliwość robienia zrzutów ekranu strony zarówno w karcie Sieć, jak i w karcie Czas.
W panelu Sieć kliknij ikonę aparatu, aby włączyć rejestrowanie klatek, a potem odśwież stronę, aby rozpocząć rejestrowanie. Poza zrzutami ekranu wykonanymi za pomocą innych narzędzi, takich jak WebPageTest, obecnie wyświetlamy tylko ramki pochodzące z programu Paint.
Po dwukrotnym kliknięciu jednej z klatek zobaczysz powiększony widok (do nawigacji możesz wtedy używać strzałek w lewo i w prawo). Najeżdżając na klatki, zobaczysz w panelu i na osi czasu linie, które pokazują, kiedy dokładnie została ona zarejestrowana. Pozwoli Ci to na powiązanie jej z sekwencją wczytywania. Ułatwia to debugowanie typowych problemów z wczytywaniem, np. blokujących renderowanie czcionek internetowych.
W panelu osi czasu możesz włączyć robienie zrzutów ekranu, zaznaczając lub odznaczając pole wyboru „Zrzuty ekranu” na górnym pasku narzędzi. W tym przypadku działa to nieco inaczej niż w panelu Sieć: staramy się robić zrzuty ekranu tak często, jak to możliwe (niezależnie od faktycznych kolorów), aby móc wstawić je na osi czasu liniowej, która jest skorelowana z innymi wierszami na osi czasu. Zamiast dwukrotnego klikania, aby wyświetlić podgląd, wystarczy najechać kursorem na ramkę, aby ją powiększyć.
Te dwie funkcje różnią się nieco pod względem funkcjonalności i UX, dlatego zachęcamy do wypróbowania ich i przesłania opinii na temat ich działania za pomocą zgłoszeń na stronie crbug.com/new lub za pomocą tweeta do @ChromeDevTools.
Ograniczanie wykorzystania sieci w panelu Sieć
Ograniczanie wykorzystania sieci – funkcja, którą dodaliśmy podczas wprowadzania trybu urządzenia, znalazła się w drugim miejscu na pasku narzędzi panelu Sieć, dzięki czemu możesz skupić się na optymalizacji sieci w jednym miejscu.
Nowa strona główna to tylko odbicie lustrzane. Można z niej korzystać w trybie urządzenia, ponieważ symulowanie słabego połączenia jest bardzo ważne przy dostosowywaniu witryny do elastyczności.
Na koniec – czy zdarzyło Ci się kiedyś zastanawiać, dlaczego po długim dniu pracy nie masz dostępu do internetu, a później okazuje się, że zapomniałeś wyłączyć ograniczanie przepustowości sieci? Gdy włączone jest ograniczanie wykorzystania sieci, karta panelu Sieć wyświetla teraz ikonę ostrzeżenia.
Różne informacje
- Nie znosisz dziwnych kółek na osi czasu sieci? My też zrobiliśmy to samo. Są to momenty, w których została zarejestrowana klatka (w nowym pasku filmowym). Teraz wyświetlają się jako linie, gdy najedziesz na nie kursorem.
- Tryb urządzenia zachowuje orientację podczas przełączania się między urządzeniami.
Komunikaty dotyczące społeczności
Dyskretne narzędzia w Chrome dla programistów
Bret Little opublikował krótki kurs, który przybliża podstawowe funkcje DevTools, a także zawiera wiele przydatnych wskazówek i porad. Znajdziesz tam przydatne informacje, a więcej dokumentów na temat Narzędzi deweloperskich nigdy nie zaszkodzi.
IDE w Narzędziach deweloperskich…?!
Kenneth Auchenberg, web developer i entuzjasta Narzędzi deweloperskich, kilka miesięcy temu opracował samodzielną aplikację DevTools do testowania koncepcji. W tym tygodniu jego post na blogu znowu znalazł się w środowisku hakerów.
Przekształcenie DevTools w pełnowartościowy program IDE to ciekawy pomysł, o którym marzyło wielu członków naszego zespołu, ale jest to też projekt o ogromnych rozmiarach.
Co myślisz? Czy IDE w Narzędziach deweloperskich to mrzonka czy realna opcja? Jak powinien wyglądać? Podziel się nim w komentarzu.
Do zobaczenia wkrótce.
Paul Bakaus i zespół Narzędzi deweloperskich