W Chrome Canary pojawiło się wiele nowych funkcji. Czytaj dalej, aby dowiedzieć się, które skrypty innych firm powodują problemy z wydajnością na Twojej stronie za pomocą szczegółów zbiorczych w osi czasu, jak wybierać spójne kolory za pomocą nowej palety kolorów, jak symulować Wi-Fi na konferencji za pomocą profili sieci dostosowanej do potrzeb i jak korzystać z interfejsu DevTools w pełni za pomocą nowego menu głównego i lepszych etykiet narzędzi.
Lepsze przypisywanie odpowiedzialności za problemy z wydajnością: szczegółowe informacje na osi czasu
W dzisiejszych witrynach używamy coraz większej liczby sygnalizatorów, usług analitycznych, mediów społecznościowych, wczytywania czcionek i reklam pochodzących od firm zewnętrznych, czasami nawet zbyt wielu. Aby temu zapobiec i umożliwić Ci obserwowanie problemu, wprowadzamy na osi czasu szczegółowe informacje zbiorcze.
Na karcie Szczegóły zbiorcze możesz skupić się tylko na kosztownych funkcjach lub na całym drzewie wywołań, a potem podzielić wybrane dane według domeny, subdomeny lub poszczególnych adresów URL. Na przykład na powyższym osi czasu wczytywania strony możesz teraz łatwo przypisać spowolnienia do skryptów innych firm pochodzących z domen takich jak facebook.net lub twitter.com.
nowe, dedykowane menu główne,
Aby uporządkować główny pasek narzędzi, przeniesieliśmy ikony szuflady, ustawień i dokowania do nowego, dedykowanego menu głównego.
W szczególności dokowanie stało się znacznie prostsze. Zamiast długo naciskać ikonę „Poprzednie”, możesz użyć ikony każdej pozycji dokowania.
Oprócz dokowania dodaliśmy szybkie wyszukiwanie plików, skróty i pomoc (która prowadzi do naszej nowej strony głównej).
Poznaj Narzędzia deweloperskie dzięki ulepszonym etykietkom
Mamy w Narzędziach deweloperskich wiele przycisków i wiemy, że nie wszystkie z nich są samoobjaśniające. Ułatwiliśmy odkrywanie działań i ich skrótów, zastępując systemowe etykiety zadań niestandardowymi etykietami zgodnymi z poszczególnymi platformami.
Nowe etykiety pojawiają się znacznie szybciej i zawierają skróty klawiszowe (jeśli są dostępne).
Tworzenie niestandardowych profili ograniczania wykorzystania sieci
Jeśli domyślne opcje ograniczają możliwości Throttlera sieciowego, a Ty potrzebujesz opcji „WiFi na konferencje” lub z powodu nostalgii chcesz wrócić do starej szkoły i zasymulować linię 110 Baudów, mamy dla Ciebie dobrą wiadomość. Dodaliśmy nowy panel ustawień, który umożliwia wykonanie tych czynności.
Automatyczne, Material i niestandardowe palety kolorów
Niezależnie od tego, czy chcesz odtworzyć kolory magii, czy pracować z istniejącą paletą kolorów, ulepszone narzędzie Colorpicker pomoże Ci wybrać spójną paletę kolorów dla Twojej witryny.
Klikając ikonę przełącznika obok palety, możesz wybrać jedną z tych opcji:
- Kolory strony – ta paleta jest generowana automatycznie na podstawie kolorów znalezionych w Twoim pliku CSS. Jest to świetna opcja, jeśli rozszerzasz istniejącą stronę.
- Material Design – paleta Material Design zawiera piękne kolory, które są idealnym wyborem na początku nowego projektu. Obecnie znajdziesz wszystkie kolory podstawowe, ale wkrótce udostępnimy wszystkie odcienie.
- Niestandardowe – to Twój własny plac zabaw. Dodaj nowe kolory, wybierając jeden w selektorze, a następnie klikając ikonę „plus” obok palety. Aby zmienić kolejność, przeciągnij elementy, a aby wyświetlić więcej opcji, takich jak usuwanie, kliknij prawym przyciskiem myszy.
Daj nam znać, co o tym myślisz i jak możemy jeszcze lepiej wykorzystać kolory.
Najlepsze z reszty
- Żądania wysyłane za pomocą interfejsu fetch() API są teraz wyświetlane w panelu Sieć
- Automatyczne rozmieszczanie paneli sprawia, że po zmianie rozmiaru DevTools
panele dostosowują się do nowych ograniczeń miejsca. - Tryb Sprawdzanie elementu i urządzenia ma teraz nowe ikony.
- Atrybuty w panelu DOM są teraz wyświetlane w innych kolorach, nawet gdy węzeł jest wyróżniony. (Wcześniej były białe).
- Ukryte elementy (aktywowane przez naciśnięcie „h” w wybranym węźle DOM) są teraz oznaczone szarym kółkiem po lewej stronie, a punkty graniczne DOM – niebieskim kółkiem. (jest to analogiczne do pomarańczowych wskaźników, które już mamy w przypadku wymuszania stanu elementu, np. :hover).
Jak zawsze przekaż nam swoją opinię na Twitterze lub w komentarzach poniżej. Błędy możesz zgłaszać na stronie crbug.com/new.
Do zobaczenia w przyszłym miesiącu!
Paul Bakaus i zespół Narzędzi deweloperskich