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

Kayce Basques

Oto nowości w Narzędziach dla programistów w Chrome 73.

Wersja wideo tych informacji o wersji

Punkty logowania

Używaj punktów logowania, aby rejestrować wiadomości w Konsoli bez zaśmiecania kodu wywołaniami funkcji 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. Kliknij Dodaj punkt logowania. Pojawi się Edytor punktów przerwania.

    Edytor punktów przerwania

    Rysunek 2. Edytor punktów przerwania

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

    Wpisywanie wyrażenia punktu logowania

    Rysunek 3. Wpisywanie wyrażenia punktu logowania

    Wskazówka: Podczas wylogowywania zmiennej (np. TodoApp) owiń ją w obiekt (np. {TodoApp}), aby wylogować jej nazwę i wartość w Konsoli. Więcej informacji o tej składni znajdziesz w artykułach Zawsze rejestruj obiekty i Skróty wartości właściwości obiektu.

  4. Aby zapisać zmiany, naciśnij Enter lub kliknij poza obszarem Edytuj punkt przerwania. Pomarańczowy znacznik na wierzchu numeru wiersza wskazuje punkt logowania.

    Pomarańczowa plakietka Logpoint na linii 174

    Rysunek 4 Pomarańczowa plakietka Logpoint na linii 174

Gdy ta linijka zostanie wykonana ponownie, Narzędzia deweloperskie zapiszą w Konsoli wynik wyrażenia Logpoint.

Wynik wyrażenia Logpoint w Konsoli

Rysunek 5. Wynik wyrażenia Logpoint w Konsoli

Aby zgłaszać błędy lub sugerować ulepszenia, otwórz problem Chromium #700519.

Szczegółowe etykiety w trybie inspekcji

Podczas sprawdzania węzła DevTools wyświetla teraz rozszerzony tekst narzędzi zawierający ważne informacje, takie jak rozmiar czcionki, kolor czcionki, współczynnik kontrastu i wymiary modelu pudełka.

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 opcję Sprawdź, aby zobaczyć jej skrót klawiszowy.

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

Eksportowanie danych o zasięgu kodu

Dane pokrywalności kodu można teraz eksportować jako plik JSON. Format pliku 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 JavaScriptu, który został przeanalizowany przez DevTools. ranges opisuje wykorzystane fragmenty kodu. start to przesunięcie początkowe dla użytego zakresu. endto 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ści h1 { color: #317EFB; }. Inaczej mówiąc, zostały użyte pierwsze i ostatnie zestawy reguł, a nie środkowy.

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

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

    Menu poleceń

    Rysunek 7. Menu poleceń

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

    Pokaż pokrycie

    Rysunek 8. Pokaż pokrycie

    Otworzy się karta Pokrycie.

    Karta Zasięg

    Rysunek 9. Karta Zasięg

  3. Kliknij Odśwież Załaduj ponownie. Narzędzie DevTools ponownie wczytuje stronę i rejestruje, ile kodu jest używane w porównaniu z ile jest dostarczane.

  4. Aby wyeksportować dane jako plik JSON, kliknij Eksportuj Eksportuj.

Pokrycie kodu jest też dostępne w Puppeteer, narzędziu do automatyzacji przeglądarki obsługiwanym przez zespół DevTools. Zobacz Zasięg.

Aby zgłaszać błędy lub sugerować ulepszenia, otwórz problem Chromium o numerze 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 spowoduje zaznaczenie ostatniej wiadomości (lub wyniku zinterpretowanej wyrażenia). Jeśli wiadomość zawiera linki, jako pierwszy zostanie podświetlony ostatni link. Naciśnięcie Enter spowoduje otwarcie linku w nowej karcie. Naciśnięcie strzałki w lewo powoduje podświetlenie całej wiadomości (patrz ryc. 13).

Skupienie się na linku

Rysunek 11. Skupienie się na linku

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

Skupienie się na innym linku

Rysunek 12. Skupienie się na innym linku

Naciśnięcie ponownie strzałki w górę spowoduje zaznaczenie całej wiadomości.

Aktywowanie całej wiadomości

Rysunek 13. Aktywowanie całej wiadomości

Naciśnięcie klawisza strzałki w prawo powoduje rozwinięcie zwiniętej informacji o ścieżce wywołania (lub obiektu, tablicy itp.).

Rozwijanie zwiniętego zrzutu stosu

Rysunek 14. Rozwijanie zwiniętego zrzutu stosu

Naciśnięcie klawisza strzałki w lewo zwija rozwiniętą wiadomość lub wynik.

Aby zgłaszać błędy lub sugerować ulepszenia, otwórz problem Chromium #865674.

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

Selektor kolorów wyświetla teraz drugą linię, aby wskazać, które kolory spełniają rekomendację dotyczącą współczynnika kontrastu AAA. Linia AA jest dostępna od wersji 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 to kolory, które spełniają zalecenia AA, ale nie spełniają zaleceń AAA. Jeśli kolor spełnia zalecenia AAA, wszystkie kolory po tej samej stronie również spełniają te zalecenia. Na przykład na rys. 15 wszystko poniżej dolnej linii to AAA, a wszystko powyżej górnej linii nie spełnia nawet zaleceń AA.

Wskazówka: Ogólnie czytelność stron możesz poprawić, zwiększając ilość tekstu, który spełnia zalecenia AAA. Jeśli z jakiegoś powodu nie możesz spełnić zalecenia AAA, postaraj się przynajmniej spełnić zalecenie AA.

Aby dowiedzieć się, jak uzyskać dostęp do tej funkcji, zapoznaj się z artykułem Współczynnik kontrastu w selektorze kolorów.

Aby zgłaszać błędy lub sugerować ulepszenia, zapoznaj się z problemem Chromium #879856.

Zapisywanie niestandardowych ustawień lokalizacji

Na karcie Sensory możesz teraz zapisywać niestandardowe ustawienia geolokalizacji.

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

    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 Lokalizacja geograficzna kliknij Zarządzaj. Otworzy się Ustawienia > Lokalizacja geograficzna.

    Karta Lokalizacje geograficzne w Ustawieniach

    Rysunek 18. Karta Lokalizacje geograficzne w Ustawieniach

  4. Kliknij Dodaj lokalizację.

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

    Dodawanie niestandardowej lokalizacji geograficznej

    Rysunek 19. Dodawanie niestandardowej lokalizacji geograficznej

Aby zgłaszać błędy lub sugerować ulepszenia, otwórz problem Chromium 649657.

Zawijanie kodu

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

Linie 54–65 zostały złożone

Rysunek 20. Linie 54–65 zostały złożone

Aby włączyć zawijanie kodu:

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

Aby złożyć blok kodu:

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

Aby zgłaszać błędy lub sugerować ulepszenia, otwórz problem Chromium #328431.

Karta Wiadomości

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

Karta Wiadomości

Rysunek 21. Karta Wiadomości

Aby zgłaszać błędy lub sugerować ulepszenia, zapoznaj się z problemem Chromium #802182.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.