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

Kayce Basques

Oto nowości w Narzędziach w Chrome 73.

Wersja wideo tych informacji o wersji

Punkty logowania

Używaj punktów dziennika, aby rejestrować wiadomości w konsoli bez zaśmiecania kodu wywołaniami console.log().

Aby dodać punkt rejestrowania:

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

   

   Rysunek 1. Dodawanie punktu logowania

2. Kliknij Dodaj punkt rejestrowania. Pojawi się edytor punktów przerwania.

   

   Rysunek 2. Edytor punktów przerwania

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

   

   Rysunek 3. Wpisanie wyrażenia punktu logowania

   Wskazówka: Podczas rejestrowania zmiennej (np. TodoApp) umieść ją w obiekcie (np. {TodoApp}), aby zarejestrować w konsoli jej nazwę i wartość. Więcej informacji o tej składni znajdziesz w sekcjach Always Log Objects (Zawsze rejestruj obiekty) i Object Property Value Shorthand (Skrót wartości właściwości obiektu).

4. Aby zapisać, naciśnij Enter lub kliknij poza edytorem punktów przerwania. Pomarańczowa plakietka obok numeru wiersza oznacza punkt rejestrowania.

   

   Rysunek 4. Pomarańczowa plakietka Logpoint w wierszu 174

Gdy wiersz zostanie wykonany następnym razem, Narzędzia deweloperskie zapiszą w konsoli wynik wyrażenia punktu logowania.

Rysunek 5. Wynik wyrażenia punktu rejestrowania w konsoli.

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem nr 700519 w Chromium.

Szczegółowe etykietki w trybie inspekcji

Podczas sprawdzania węzła Narzędzia deweloperskie wyświetlają teraz rozwinięte dymki z najważniejszymi informacjami, takimi jak rozmiar i kolor czcionki, współczynnik kontrastu oraz wymiary modelu pudełkowego.

Rysunek 6. Sprawdzanie węzła

Aby sprawdzić węzeł:

1. Kliknij Zbadaj .

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

2. W widoku najedź kursorem na węzeł.

Eksportowanie danych o pokryciu kodu

Dane pokrycia kodu można teraz eksportować jako plik 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, który został przeanalizowany przez Narzędzia deweloperskie. ranges opisuje użyte fragmenty kodu. start to początkowe przesunięcie użytego zakresu. end to margines zakończenia. text to pełna treść pliku.

W powyższym przykładzie zakres od 0 do 21 odpowiada body { margin: 1em; }, a zakres od 45 do 67 odpowiada h1 { color: #317EFB; }. Innymi słowy, użyto pierwszego i ostatniego zestawu reguł, a środkowego nie.

Aby przeanalizować, ile kodu jest używane podczas wczytywania strony, i wyeksportować dane:

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

   

   Rysunek 7. Menu poleceń

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

   

   Rysunek 8. Pokaż zasięg

   Otworzy się karta Zasięg.

   

   Rysunek 9. Karta Zasięg

3. Kliknij Odśwież . Narzędzia deweloperskie ponownie wczytują stronę i rejestrują, ile kodu jest używane w porównaniu z ilością kodu dostarczonego.

4. Kliknij Eksportuj , aby wyeksportować dane jako plik JSON.

Pokrycie kodu jest też dostępne w Puppeteer, narzędziu do automatyzacji przeglądarki, które jest utrzymywane przez zespół Narzędzi deweloperskich. Zobacz Zasięg.

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem 717195 w Chromium.

Nawigowanie po konsoli za pomocą klawiatury

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

Naciśnięcie Shift+Tab powoduje zaznaczenie ostatniej wiadomości (lub wyniku obliczonego wyrażenia). Jeśli wiadomość zawiera linki, najpierw wyróżniony jest ostatni link. Naciśnięcie Entera spowoduje otwarcie linku w nowej karcie. Naciśnięcie klawisza strzałki w lewo powoduje podświetlenie całej wiadomości (patrz rysunek 13).

Rysunek 11. Skupianie się na linku

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

Rysunek 12. Skupianie się na innym linku

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

Rysunek 13. Zaznaczanie całej wiadomości

Naciśnięcie klawisza strzałki w prawo rozwija zwinięty ślad stosu (lub obiekt, tablicę itp.).

Rysunek 14. Rozwijanie zwiniętego zrzutu stosu

Naciśnięcie klawisza strzałki w lewo powoduje zwinięcie rozwiniętej wiadomości lub wyniku.

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem 865674 w Chromium.

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

Selektor kolorów wyświetla teraz drugi wiersz, aby wskazać, które kolory spełniają zalecenia dotyczące współczynnika kontrastu AAA. Linia AA jest dostępna od Chrome 65.

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

Kolory między tymi 2 liniami spełniają zalecenia AA, ale nie spełniają zaleceń AAA. Jeśli kolor spełnia wymagania rekomendacji AAA, wszystkie kolory po tej samej stronie również je spełniają. Na przykład na rysunku 15 wszystko poniżej dolnej linii to AAA, a wszystko powyżej górnej linii nie spełnia nawet rekomendacji AA.

Wskazówka: Ogólnie rzecz biorąc, czytelność stron można poprawić, zwiększając ilość tekstu, który spełnia zalecenia AAA. Jeśli z jakiegoś powodu nie możesz spełnić rekomendacji AAA, spróbuj przynajmniej spełnić rekomendację AA.

Więcej informacji 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ć ulepszenia, zapoznaj się z problemem nr 879856 w Chromium.

Zapisywanie niestandardowych zastąpień geolokalizacji

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

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

   

   Rysunek 16. Menu poleceń

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

   

   Rysunek 17. Karta Czujniki

3. W sekcji Geolokalizacja kliknij Zarządzaj. Otworzą się Ustawienia > Geolokalizacja.

   

   Rysunek 18. Karta Geolokalizacje w Ustawieniach

4. Kliknij Dodaj lokalizację.

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

   

   Rysunek 19. Dodawanie niestandardowej geolokalizacji

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem 649657 w Chromium.

Zawijanie kodu

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

Rysunek 20. Wiersze 54–65 zostały zwinięte

Aby włączyć zawijanie kodu:

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

Aby zwinąć blok kodu:

1. Najedź kursorem myszy na numer wiersza, w którym zaczyna się blok.
2. Kliknij Zwiń .

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem 328431 w Chromium.

Karta Wiadomości

Zmieniliśmy nazwę karty Ramki na Wiadomości. Ta karta jest dostępna tylko w panelu Sieć podczas sprawdzania połączenia gniazda internetowego.

Rysunek 21. Karta Wiadomości

Aby zgłosić błędy lub zaproponować ulepszenia, zapoznaj się z problemem 802182 w Chromium.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.