W Chrome Canary pojawiło się wiele nowych funkcji. Czytaj dalej, aby dowiedzieć się, które skrypty innych firm powodują problemy z wydajnością w Twojej witrynie dzięki szczegółom zbiorczym w osi czasu, jak wybierać spójne kolory za pomocą nowej palety kolorów, jak symulować Wi-Fi na konferencji za pomocą profilów sieci z możliwością dostosowania oraz jak korzystać z interfejsu DevTools w bardziej efektywny sposób dzięki nowemu menu głównemu i lepszym etykietkom narzędzi.
Lepsze przypisywanie odpowiedzialności za problemy z wydajnością: zbiorcze szczegóły na osi czasu
W przypadku współczesnych witryn korzystamy z usług typu beacon, analityki, mediów społecznościowych, usług wczytywania czcionek i reklam oferowanych przez inne firmy, czasem kilka za dużo. Aby tak się nie stało i aby umożliwić Ci wgląd w problem, wprowadzamy zagregowane szczegóły na osi czasu.
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, specjalne menu główne
Aby uporządkować główny pasek narzędzi, przenieśliś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ć poprzednią ikonę, 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).
Odkrywanie Narzędzi deweloperskich dzięki ulepszonym etykietkom
Mamy w Narzędziach deweloperskich wiele przycisków i wiemy, że nie wszystkie są samoobjaśniające. Ułatwiliśmy odkrywanie działań i ich skrótów, zastępując systemowe teksty narzędzia do wyświetlania informacji niestandardowymi tekstami narzędzia do wyświetlania informacji zgodnymi z poszczególnymi platformami.
Nowe etykietki wyświetlają się znacznie szybciej i zawierają skróty klawiszowe (jeśli takie są).
Tworzenie niestandardowych profili ograniczania wykorzystania sieci
Jeśli domyślne opcje ograniczają możliwości Throttlera sieciowego w Twoich zastosowaniach i 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, ulepszona funkcja Koloryzator 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 arkuszu CSS. Jest to więc doskonała opcja w przypadku rozszerzania istniejącej witryny.
- 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.
Powiedz nam, 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 paneli DevTools
te dostosowują się do nowych ograniczeń miejsca. - Tryb Sprawdzanie elementu i urządzenia ma teraz nowe ikony.
- Atrybuty w panelu DOM mają teraz różne kolory nawet wtedy, gdy węzeł jest wyróżniony. (są tam, gdzie wcześniej wszystkie 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, powiedz nam, co myślisz, na Twitterze lub w komentarzach poniżej, a błędy zgłoś na crbug.com/new.
Do zobaczenia w przyszłym miesiącu!
Paul Bakaus i zespół Narzędzi deweloperskich