To był miesiąc z licznymi funkcjami w Chrome Canary. Czytaj dalej, aby dowiedzieć się, które skrypty innych firm powodują problemy z wydajnością w Twojej witrynie dzięki zbiorczym informacjom na osi czasu, jak wybierać spójne kolory przy użyciu nowej palety kolorów, jak symulować konferencję Wi-Fi za pomocą niestandardowych profili sieciowych oraz jak lepiej wykorzystać interfejs Narzędzi deweloperskich za pomocą nowego menu głównego i lepszych etykiet.
Lepsze problemy z wydajnością winy: zagregowane szczegóły na osi czasu
W dzisiejszych witrynach korzystamy z coraz większej liczby obrazów typu beacon, usług analitycznych, społecznościowych, wczytywania czcionek i usług reklamowych firm zewnętrznych, czasem czasem zbyt wielu. Aby uniknąć takich sytuacji i dać Ci lepszy wgląd w problem, do osi czasu wprowadzamy zagregowane szczegóły.
Na karcie Szczegóły zagregowane możesz skupić się tylko na kosztownych funkcjach lub na całym drzewie wywołań, a następnie podzielić wybrane dane według domeny, subdomeny lub różnych adresów URL. Na przykład na powyższej osi czasu wczytywania strony można teraz łatwo przypisać spowolnienia do skryptów innych firm pochodzących z domen takich jak facebook.net czy twitter.com.
Nowe, dedykowane menu główne
Aby zwiększyć wygodę głównego paska narzędzi, przenieśliśmy panel, ustawienia i ikony dokowania do nowego, dedykowanego menu głównego.
Znacznie prostszy jest w szczególności dokowanie. Zamiast naciskać poprzednią ikonę, każda pozycja dokowania ma własną ikonę.
Oprócz zadokowania dodaliśmy też funkcję szybkiego dostępu do wyszukiwania plików, skróty i pomoc (co prowadzi do naszej nowej strony głównej).
Odkryj Narzędzia deweloperskie dzięki ulepszonym etykietkom
W Narzędziach deweloperskich mamy mnóstwo przycisków i zdajemy sobie sprawę, że nie wszystkie z nich się wyjaśniają. Uprościliśmy wykrywanie działań i ich skrótów, zastępując natywne etykietki systemowe niestandardowymi etykietkami związanymi z platformą.
Nowe etykietki pojawiają się znacznie szybciej i zawierają skróty klawiszowe (jeśli występują).
Tworzenie niestandardowych profili ograniczania wykorzystania sieci
Jeśli domyślne opcje Throttlera sieci są zbyt restrykcyjne i potrzebujesz opcji „Konferencyjna sieć Wi-Fi” lub ze względu na nostalgię chcesz przejść na starą wersję i emulować wiersz „110 Baud”, mamy dla Ciebie dobrą wiadomość. Dodaliśmy nowy panel Ustawienia, który umożliwia wykonanie tych czynności.
Automatyczny, materiał i niestandardowe palety kolorów
Niezależnie od tego, czy chcesz odtworzyć magiczne kolory lub wykorzystać dotychczasową paletę kolorów, ulepszony selektor kolorów pomoże Ci wybrać spójną paletę kolorów dla Twojej witryny.
Klikając małą 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 kodzie CSS, dzięki czemu doskonale sprawdza się przy rozbudowywaniu istniejącej witryny.
- Material Design – paleta Material Design zapewnia piękne kolory od razu po uruchomieniu i stanowi idealny wybór na początku nowego projektu. Na razie znajdziesz tu wszystkie kolory podstawowe, ale wkrótce dodamy do nich wszystkie odcienie.
- Niestandardowy – to Twój własny plac zabaw. Dodaj nowe kolory, wybierając jeden w selektorze i klikając ikonę plusa obok palety. Możesz zmienić kolejność elementów, przeciągając je i klikając prawym przyciskiem myszy, aby wyświetlić więcej opcji, np. usunąć.
Podziel się z nami swoją opinią i powiedz nam, jak możemy jeszcze bardziej rozszerzyć ten trend.
Najlepsze z pozostałych
- Żądania wykonane za pomocą interfejsu fetch() API są teraz wyświetlane w panelu Network
- Automatyczny układ paneli sprawia, że gdy zmieniasz rozmiar paneli w Narzędziach deweloperskich,
panele dostosowują się do nowych ograniczeń miejsca. - Opcja Zbadaj tryb elementów i urządzenia ma zestaw nowych ikon.
- Atrybuty w panelu DOM mają teraz inne kolory nawet po podświetleniu węzła. (Tam, gdzie wszystkie wcześniej są białe).
- Ukryte elementy (aktywowane przez naciśnięcie „h” w wybranym węźle DOM) pokazują teraz szary wskaźnik okręgu po lewej stronie, a punkty przerwania DOM – tak samo z niebieskim okręgiem. (Działa to analogicznie do pomarańczowych wskaźników, które już dziś służą do wymuszania stanu elementu takiego jak :hover).
Podziel się z nami swoją opinią na Twitterze lub w komentarzach poniżej oraz prześlij błędy na stronie crbug.com/new.
Do przyszłego miesiąca.
Paul Bakaus i zespół Narzędzi deweloperskich