Nowości w Narzędziach deweloperskich (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Znajdź pisankę

Z okazji tegorocznego prima aprilis zespół DevTools ukrył ukryty żart w miejscu w tych narzędziach.

Aby ją znaleźć, poszukaj kolorowego emotikona 💫.

Aktualizacje panelu Elementy

Ta wersja zawiera kilka aktualizacji panelu Elementy.

Emuluj zaznaczoną stronę w sekcji Elementy > Style

Na karcie Elementy > Style znajduje się teraz opcja check_box Emuluj zaznaczoną stronę pod przyciskiem Przełącz stan elementów (:hov). Wcześniej ta opcja była dostępna tylko w panelu Renderowanie.

Po przełączeniu zaznaczenia ze strony na Narzędzia deweloperskie niektóre elementy nakładek zostaną automatycznie ukryte, jeśli zostaną aktywowane po zaznaczeniu. Mogą to być na przykład listy, menu lub selektory daty. Opcja Emuluj zaznaczoną stronę umożliwia debugowanie takiego elementu tak, jakby był on zaznaczony.

Emulacja zaznaczonej strony na karcie Style (Przed i po).

Problem z Chromium: 1468393.

Selektor kolorów, zegar pod kątem i edytor wygładzania w wartościach zastępczych var()

Aby uprościć edytowanie CSS, na karcie Elementy > Style można teraz korzystać z opcji Selektor kolorów, zegar kątowy i edytor wygładzania w wartościach zastępczych var().

Selektor kolorów przed i po renderowaniu narzędzi Selektor kolorów, Zegar kątowy i Edytor wygładzania w wartościach zastępczych var().

Problem z Chromium: 1520417.

Narzędzie do określania długości CSS zostało wycofane

Narzędzie do tworzenia długości CSS zostało wycofane ze względu na opinie, że spowalnia ono przepływ pracy i nie zapewnia dużej wartości.

Nie możesz już przeciągnąć, aby dostosować wartość, ani wybrać typu jednostki z menu. Teraz kliknij dwukrotnie wartość i wpisz nową.

Aby ponownie włączyć narzędzie do długości, wybierz ustawienia Ustawienia > Eksperymenty > pole_check_box Wycofaj narzędzie do tworzenia CSS <length> na karcie Style.

Jeśli nadal chcesz korzystać z tego narzędzia, nasz zespół ds. narzędzi deweloperskich chciałby poznać Twoją opinię i dowiedzieć się, jak to narzędzie może Ci pomóc w przepływie pracy. Jeśli chcesz, możesz przesłać opinię na stronie crbug/1522657.

Eksperyment z wycofywaniem jest wyłączony.

Wyskakujące okienko dla wybranego wyniku wyszukiwania w sekcji Skuteczność > Ścieżka główna

Aby ułatwić wyszukiwanie, wykres płomieniowy na ścieżce Skuteczność > Główny wyświetla teraz wyskakujące okienko nad odpowiednim wydarzeniem podczas przeglądania wyników wyszukiwania.

Miejsce przed i po pokazaniu wyskakującego okienka nad wybranym wynikiem wyszukiwania.

Problem z Chromium: 1523279.

Aktualizacje panelu sieci

Ta wersja zawiera kilka aktualizacji panelu Sieć.

Przycisk czyszczenia i filtr wyszukiwania na karcie Sieć > EventStream

Na karcie Sieć > EventStream uzyskasz dostęp do tych informacji:

  • przycisk Zablokuj Wyczyść, który usuwa zdarzenia przechwycone w tabeli;
  • Filtr wyszukiwania, który rozumie wyrażenia regularne.

Przed i po dodaniu przycisku Wyczyść i filtra wyszukiwania.

Zespół Narzędzi deweloperskich chce podziękować Charlesowi Vazakowi za udostępnienie tej funkcji.

Dodatkowo karta EventStream rejestruje teraz też zdarzenia, które serwery wysyłają za pomocą pobierania lub XHR, a nie tylko EventSource API. Wypróbuj tę funkcję na tej stronie demonstracyjnej.

Problem z Chromium: 1488863, 40659493.

Etykietka z przyczynami wykluczenia plików cookie innych firm w sekcji Sieć > Pliki cookie

Na karcie Sieć > Pliki cookie obok plików cookie, które w przeciwnym razie powinny zostać zablokowane przez wycofanie plików cookie innych firm, wyświetlają się teraz etykietki z przyczynami wykluczenia.

Etykietka z informacją o przyczynie wykluczenia pliku cookie innej firmy przed wyświetleniem i po nim.

Pliki cookie innych firm mogą być dozwolone z tych powodów:

Problem z Chromium: 41491846.

Włącz i wyłącz wszystkie punkty przerwania w źródłach

W sekcji Źródła > Punkty przerwania ponownie pojawiają się opcje Włącz i Wyłącz wszystkie punkty przerwania. Wcześniej te opcje były pomijane podczas zmiany w punktach przerwania.

Aby włączyć lub wyłączyć wszystkie punkty przerwania, kliknij je prawym przyciskiem myszy w sekcji Źródła > Punkty przerwania i wybierz odpowiednią opcję.

Przed i po przywróceniu opcji włączania i wyłączania.

Problem z Chromium: 1522037.

Wyświetl wczytane skrypty w Narzędziach deweloperskich dla Node.js

Narzędzia deweloperskie dla Node.js pokazują teraz wczytane skrypty w drzewie nawigacyjnym w sekcji Źródła > Skrypty.

Dodanie karty Skrypty przed i po dodaniu drzewa z załadowanymi skryptami.

Problem z Chromium: 1518364.

Lighthouse 11.5.0

Panel Lighthouse korzysta teraz z Lighthouse 11.5.0. Zobacz pełną listę zmian.

Jedną z ważniejszych zmian jest nowy audyt, który szacuje główne przyczyny przesunięć układu. Ten audyt zastępuje kontrolę elementów układu przesunięcia, w której wyświetlane są tylko te elementy, na które wpływają przesunięcia układu.

Nowy audyt, który szacuje główne przyczyny przesunięcia układu.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

W tej wersji wprowadziliśmy te ulepszenia ułatwień dostępu:

  • Czytniki ekranu informują teraz:
    • tekst linku Więcej informacji obok typów selektorów w panelu Dyktafon,
    • Gdy żadne eksperymenty nie pasują do filtra w ustawieniach Ustawienia > Eksperymenty.
    • Potwierdzenie czynności przy usuwaniu, potwierdzaniu lub przywracaniu skrótu w ustawieniach Ustawienia > Skróty.
  • Tabela w sekcji Ustawienia > Ustawienia > Lokalizacje prawidłowo renderuje się teraz jako tabela narzędzi ułatwień dostępu.

Problemy z Chromium: 1516957, 324282443, 324467508, 324930007.

Inne ważne informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Czcionki w Narzędziach deweloperskich są aktualizowane tak, aby pasowały do Chrome (1523538).
  • Wydajność: naprawiono wyświetlanie zrzutu ekranu po najechaniu kursorem na oś czasu (1519469).
  • Źródła: wysokość wiersza w Edytorze zwiększa się, aby poprawić czytelność kodu (1523640).
  • Sieć > Odpowiedzi: usunięto różne problemy z wyświetlaniem różnych formatów i kodowania (1523128, 1509336, 1523128, 41481944, 1509336).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59