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

Jecelyn Yeen

Nowe narzędzia do tworzenia długości CSS

Narzędzia deweloperskie dodaliśmy prostszy i bardziej elastyczny sposób aktualizowania długości w CSS.

W panelu Style wyszukaj dowolną właściwość CSS o długości (np. height lub padding).

Najedź kursorem na typ jednostki. Zwróć uwagę, że jest on podkreślony. Kliknij ją, aby wybrać typ jednostki z menu.

Po najechaniu na wartość jednostki wskaźnik myszy zmieni się w kursor poziomy. Przeciągnij w poziomie, aby zwiększyć lub zmniejszyć wartość. Aby zmienić wartość o 10, podczas przeciągania przytrzymaj klawisz Shift.

Wartość jednostki można nadal edytować pod postacią tekstu – wystarczy ją kliknąć i rozpocząć edycję.

Problemy z Chromium: 1126178, 1172993

Ukryj problemy na karcie Problemy

Na karcie Problemy możesz teraz ukryć określone problemy, aby skupić się tylko na tych, które są dla Ciebie ważne.

Na karcie Problemy najedź kursorem na problem, który chcesz ukryć. Kliknij Więcej opcji   Więcej   > Ukryj takie problemy.

Ukryj menu problemów

Wszystkie ukryte problemy zostaną dodane w panelu Ukryte problemy. Rozwiń panel. Możesz odkryć wszystkie ukryte problemy lub tylko wybrany.

Okienko ukrytych problemów

Problem z Chromium: 1175722

Poprawiono wyświetlanie właściwości

Narzędzia deweloperskie poprawiają wyświetlanie właściwości o:

  • W panelu Konsola, Źródła i Właściwości zawsze należy pogrubiać i sortować własne właściwości.
  • Właściwości wyświetlane w panelu Właściwości zostaną wyrównane.

Poniższy fragment kodu tworzy na przykład obiekt URL link z 2 własnymi właściwościami: user i access oraz aktualizuje wartość dziedziczonej właściwości search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Spróbuj zalogować link w konsoli. Własne właściwości są teraz pogrubione i sortowane jako pierwsze. Ułatwią one rozpoznawanie właściwości niestandardowych, zwłaszcza w przypadku interfejsów API internetowych (np. URL) z wieloma dziedziczonymi właściwościami.

Własne właściwości są pogrubione i posortowane jako pierwsze

Po wprowadzeniu tych zmian właściwości w panelu Właściwości są teraz spłaszczone, co ułatwia debugowanie właściwości DOM, zwłaszcza w przypadku komponentów internetowych.

Właściwości spłaszczenia

Problemy z Chromium: 1076820, 1119900

Lighthouse 8.4 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 8.4. Lighthouse wykryje teraz, czy element największego wyrenderowania treści (LCP) był obrazem wczytywanym w trybie leniwym, i zaleci usunięcie z niego atrybutu loading.

Więcej informacji o zmianach znajdziesz w artykule Co nowego w Lighthouse w wersji 8.4.

Leniwe wczytywanie kontroli LCP w raporcie Lighthouse

Problem z Chromium: 772558

Sortowanie fragmentów w panelu Źródła

Fragmenty w panelu Fragmenty w panelu Źródła są teraz sortowane alfabetycznie. Wcześniej nie jest ona sortowana.

Wykorzystaj funkcję fragmentów kodu, aby szybciej uruchamiać polecenia. Obejrzyj ten film, by uzyskać wskazówkę.

Sortowanie fragmentów w panelu Źródła

Problem z Chromium: 1243976

Nowe linki do przetłumaczonych informacji o wersji i zgłaszanie błędu w tłumaczeniu

Teraz na karcie Co nowego możesz przeczytać informacje o wersji Narzędzi dla programistów w 6 innych językach: rosyjskim, chińskim, hiszpańskim, japońskim, portugalskim i koreańskim.

Od wersji Chrome 94 w Narzędziach deweloperskich możesz ustawić preferowany język. Jeśli zauważysz jakieś problemy z tłumaczeniem, pomóż nam je ulepszyć: zgłoś problem z tłumaczeniem w sekcji Więcej opcji > Pomoc > Zgłoś błąd w tłumaczeniu.

Nowe linki do przetłumaczonych informacji o wersji i zgłaszanie błędu w tłumaczeniu

Problemy z Chromium: 1246245, 1245481

Ulepszony interfejs menu poleceń Narzędzi deweloperskich

Czy trudno było znaleźć plik w menu poleceń? Mamy dobrą wiadomość – interfejs menu poleceń jest teraz ulepszony.

Otwórz menu poleceń, aby wyszukać plik za pomocą skrótu klawiszowego Control + P w systemach Windows i Linux lub Command + P w systemie macOS.

Nadal ulepszamy interfejs menu poleceń. Wkrótce podamy więcej informacji na ten temat.

Menu poleceń

Problem z Chromium: 1201997

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