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

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

Film z informacjami o wersji

Punkty logowania

Używaj punktów logowania, aby rejestrować komunikaty 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 zarejestrować 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ńczowa plakietka na górze wiersza oznacza 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łosić błędy lub zaproponować ulepszenia, zobacz Problem nr 700519 w Chromium.

Szczegółowe etykietki w trybie inspekcji

Podczas sprawdzania węzła DevTools wyświetla teraz rozszerzony tekst narzędzia, 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 zasięgu kodu można teraz eksportować w postaci pliku 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 zakresu, który został użyty. 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, 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 Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu polecenia.

   

   Rysunek 7. Menu poleceń

2. Zacznij pisać coverage, wybierz Pokaż zakres 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 również dostępne w Puppeteer – narzędziu do automatyzacji przeglądarek dostępnym przez zespół DevTools. Zobacz Stan.

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 powoduje zaznaczenie ostatniej wiadomości (lub wyniku ocenionego wyrażenia). Jeśli wiadomość zawiera linki, najpierw zostanie wyróżniony ostatni link. Naciśnięcie Enter spowoduje otwarcie linku w nowej karcie. Naciśnięcie klawisza w lewo spowoduje podświetlenie całego komunikatu (zobacz ilustrację 13).

Rysunek 11. Zaznaczanie 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 skupienie się na całej wiadomości.

Rysunek 13. Podkreślenie całej wiadomości

Naciśnięcie klawisza strzałki w prawo powoduje rozwinięcie zrzutu stosu (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 oznaczają kolory zgodne z zaleceniami AAA, ale niespełniające tego zalecenia. 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, co znajduje się poniżej linii, to AAA, a wszystkie elementy powyżej górnej linii nie są nawet zgodne z zaleceniem 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łosić błędy lub zaproponować ulepszenia, zobacz Problem nr 879856 w Chromium.

Zapisywanie niestandardowych ustawień geolokalizacji

Na karcie Czujniki możesz teraz zapisać niestandardowe zastąpienia 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 Sensors (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 zawijanie 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.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. 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 ds. Narzędzi deweloperskich w Chrome

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

• Prześlij nam swoje opinie i prośby o dodanie funkcji na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij 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.