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

Kayce Basques

Oto co nowego w Narzędziach deweloperskich w Chrome 73.

Wersja wideo tych informacji o wersji

Punkty logowania

Korzystaj z Logpoints, aby logować wiadomości w konsoli bez zaśmiecania kodu wywołaniami console.log().

Aby dodać punkt logowania:

  1. Kliknij prawym przyciskiem myszy numer wiersza, w którym chcesz dodać punkt logowania.

    Dodawanie punktu logowania

    Rysunek 1. Dodawanie punktu logowania

  2. Wybierz Dodaj punkt logowania. Pojawi się edytor punktów przerwania.

    Edytujący punkty przerwania

    Rysunek 2. Edytujący punkty przerwania

  3. W edytorze punktów przerwania wpisz wyrażenie, które chcesz zalogować w konsoli.

    Wpisywanie wyrażenia punktu logowania

    Rysunek 3. Wpisywanie wyrażenia punktu logowania

    Wskazówka: Podczas wylogowywania zmiennej (np. TodoApp) umieść zmienną w obiekcie (np. {TodoApp}), aby wylogować się z jej nazwy i wartości w Konsoli. Więcej informacji o tej składni znajdziesz w sekcjach Zawsze loguj obiekty i Skrócona wartość właściwości obiektu.

  4. Aby zapisać zmiany, naciśnij Enter lub kliknij poza edytorem punktów przerwania. Pomarańczowa plakietka na górze linii oznacza punkt logowania.

    Pomarańczowa plakietka z punktem logowania na linii 174

    Rysunek 4. Pomarańczowa plakietka z punktem logowania na linii 174

Przy następnym uruchomieniu wiersza Narzędzia deweloperskie zapiszą w konsoli wynik wyrażenia Logpoint.

Wynik wyrażenia Logpoint w konsoli

Rysunek 5. Wynik wyrażenia Logpoint w konsoli

Zobacz problem nr 700519 w Chromium, aby zgłosić błędy lub zaproponować poprawki.

Szczegółowe etykietki w trybie inspekcji

Podczas badania węzła w Narzędziach deweloperskich wyświetla się teraz rozwinięta etykietka z popularnymi informacjami, takimi jak rozmiar i kolor czcionki, współczynnik kontrastu i wymiary modelu pola.

Sprawdzanie węzła

Rysunek 6. Sprawdzanie węzła

Aby sprawdzić węzeł:

  1. Kliknij Zbadaj Sprawdzanie węzła.

    Wskazówka: Najedź kursorem na Zbadaj, aby zobaczyć skrót klawiszowy tej funkcji.

  2. W widocznym obszarze najedź kursorem na węzeł.

Eksportuj dane pokrycia kodu

Dane zasięgu kodu można teraz eksportować w postaci pliku JSON. Plik JSON wygląda tak:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url to adres URL pliku CSS lub JavaScript poddanego analizie przez Narzędzia deweloperskie. ranges opisuje użyte części kodu. start to przesunięcie początkowe dla użytego zakresu. end to przesunięcie końcowe. text to pełny tekst pliku.

W powyższym przykładzie zakres od 0 do 21 odpowiada wartości body { margin: 1em; }, a zakres od 45 do 67 – wartość h1 { color: #317EFB; }. Innymi słowy, pierwszy i ostatni zestaw reguł byli używany, a środkowy – nie.

Aby przeanalizować ilość kodu używanego podczas wczytywania strony i wyeksportować dane:

  1. Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu poleceń.

    Menu poleceń

    Rysunek 7. Menu poleceń

  2. Zacznij pisać coverage, wybierz Pokaż zasięg i naciśnij Enter.

    Pokaż zakres

    Rysunek 8. Pokaż zakres

    Otworzy się karta Stan.

    Karta Zasięg

    Rysunek 9. Karta Zasięg

  3. Kliknij Załaduj ponownie Wczytaj jeszcze raz. Narzędzia deweloperskie ładują stronę ponownie i rejestrują ilość użytego kodu w porównaniu z ilością wysłanych.

  4. Kliknij Eksportuj Eksportuj, aby wyeksportować dane do pliku JSON.

Zakres kodu jest też dostępny w Puppeteer – narzędziu do automatyzacji przeglądarki udostępnianym przez zespół DevTools. Zobacz Stan.

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 717195.

Poruszanie się po konsoli za pomocą klawiatury

Możesz teraz poruszać się po konsoli za pomocą klawiatury. Oto przykład.

Naciśnięcie Shift + Tab powoduje zaznaczenie ostatniej wiadomości (lub wyniku ocenionego wyrażenia). Jeśli wiadomość zawiera linki, jako pierwszy jest podświetlony ostatni z nich. Naciśnięcie Enter otwiera link w nowej karcie. Naciśnięcie klawisza strzałki w lewo powoduje podświetlenie całej wiadomości (zobacz Rysunek 13).

Zaznaczanie linku

Rysunek 11. Zaznaczanie linku

Naciśnięcie klawisza strzałki w górę powoduje zaznaczenie następnego linku.

Zaznaczanie kolejnego linku

Rysunek 12. Zaznaczanie kolejnego linku

Ponowne naciśnięcie klawisza strzałki w górę powoduje zaznaczenie całej wiadomości.

Wyróżnienie całej wiadomości

Rysunek 13. Wyróżnienie całej wiadomości

Naciśnięcie klawisza strzałki w prawo powoduje rozwinięcie zwiniętego zrzutu stosu (lub obiektu, tablicy itd.).

Rozwijanie zwiniętego zrzutu stosu

Rysunek 14. Rozwijanie zwiniętego zrzutu stosu

Naciśnięcie klawisza strzałki w lewo zwija rozwinięty komunikat lub wynik.

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 865674.

Linia współczynnika kontrastu AAA w selektorze kolorów

Selektor kolorów pokazuje teraz drugą linię, która wskazuje, które kolory są zgodne z zaleceniami dotyczącymi współczynnika kontrastu AAA. Linia AA jest dostępna od wersji Chrome 65.

Linia AA (u góry) i linia AAA (u dołu)

Rysunek 15. Linia AA (u góry) i linia AAA (u dołu)

Kolory między 2 liniami reprezentują kolory, które spełniają zalecenia AA, ale nie są zgodne z tą zasadą. Jeśli kolor jest zgodny z rekomendacją AAA, wszystkie elementy z tej samej strony są też zgodne z rekomendacjami. Na przykład na Rys. 15 wszystkie elementy poniżej dolnej linii to AAA, a cokolwiek, co znajduje się powyżej górnej granicy, nie jest nawet zgodne z zaleceniem AA.

Wskazówka: Ogólnie można poprawić czytelność stron, zwiększając ilość tekstu zgodnie z zaleceniami AAA. Jeśli z jakiegoś powodu spełnienie rekomendacji AAA jest niemożliwe, staraj się spełnić przynajmniej te zalecenia.

Informacje o tym, jak uzyskać dostęp do tej funkcji, znajdziesz w sekcji Współczynnik kontrastu w selektorze kolorów.

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 879856.

Zapisywanie niestandardowych zastąpień geolokalizacji

Na karcie Czujniki możesz teraz zapisywać niestandardowe zastąpienia geolokalizacji.

  1. Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu poleceń.

    Menu poleceń

    Rysunek 16. Menu poleceń

  2. Wpisz sensors, wybierz Pokaż czujniki i naciśnij Enter. Otworzy się karta Czujniki.

    Karta Czujniki

    Rysunek 17. Karta Czujniki

  3. W sekcji Geolokalizacja kliknij Zarządzaj. Otworzy się strona Ustawienia > Geolokalizacje.

    Karta Geolokalizacje w Ustawieniach

    Rysunek 18. Karta Geolokalizacje w Ustawieniach

  4. Kliknij Dodaj lokalizację.

  5. Wpisz nazwę lokalizacji oraz szerokość i długość geograficzną, a potem kliknij Dodaj.

    Dodawanie niestandardowej geolokalizacji

    Rysunek 19. Dodawanie niestandardowej geolokalizacji

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 649657.

Zawijanie kodu

Panele Źródła i Sieć obsługują teraz zwijanie kodu.

Linie od 54 do 65 zostały zwinięte

Rysunek 20. Linie od 54 do 65 zostały zwinięte

Aby włączyć zwijanie kodu:

  1. Naciśnij F1, aby otworzyć Ustawienia.
  2. W sekcji Ustawienia > Preferencje > Źródła włącz Zwijanie kodu.

Aby złożyć blok kodu:

  1. Najedź kursorem myszy na numer linii, na której zaczyna się blok.
  2. Kliknij Zwiń Zwiń.

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 328431.

Karta Wiadomości

Karta Ramki zmieniła nazwę na Wiadomości. Ta karta jest dostępna tylko w panelu Sieć podczas sprawdzania połączenia przez gniazdo.

Karta Wiadomości

Rysunek 21. Karta Wiadomości

Aby zgłosić błędy lub zaproponować poprawki, zobacz problem Chromium nr 802182.

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