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.

   

   Rysunek 1 Dodawanie punktu logowania

2. Kliknij Dodaj punkt logowania. Pojawi się 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.

   

   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.

   

   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.

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.

Rysunek 6. Sprawdzanie węzła

Aby sprawdzić węzeł:

1. Kliknij Zbadaj .

   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.

   

   Rysunek 7. Menu poleceń

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

   

   Rysunek 8. Pokaż pokrycie

   Otworzy się karta Pokrycie.

   

   Rysunek 9. Karta Zasięg

3. Kliknij Odśwież . 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 .

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).

Rysunek 11. Skupienie się na linku

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

Rysunek 12. Skupienie się na innym linku

Naciśnięcie ponownie strzałki w górę spowoduje zaznaczenie 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.).

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.

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.

   

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

   

   Rysunek 18. Karta Lokalizacje geograficzne w Ustawieniach

4. Kliknij Dodaj lokalizację.

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

   

   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.

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 .

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.

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.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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