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

Kayce Basques

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 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 sekcjach Zawsze loguj obiekty i Skrót do 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ę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 JavaScript, który został przeanalizowany w Narzędziach deweloperskich. ranges opisuje wykorzystane fragmenty kodu. start to przesunięcie początkowe dla zakresu, który został użyty. end to przesunięcie końcowe. text to pełny tekst pliku.

W tym przykładzie zakres 0–21 odpowiada wartości body { margin: 1em; }, a zakres 45–67 odpowiada h1 { color: #317EFB; }. Inaczej mówiąc, zostały użyte pierwsze i ostatnie reguły, a środkowe 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 polecenia.

   

   Rysunek 7. Menu polecenia

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

   

   Rysunek 8. Pokaż pokrycie

   Otworzy się karta Stan.

   

   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. Kliknij Eksportuj , aby wyeksportować dane do pliku JSON.

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, najpierw zostanie wyróżniony ostatni link. Naciśnięcie Enter otwiera link 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ę powoduje zaznaczenie kolejnego 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 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 powoduje zwinięcie rozwiniętej wiadomości lub wyniku.

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

Linia współczynnika kontrastu AAA w selektorze 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 Chrome 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. Gdy kolor jest zgodny z rekomendacją AAA, wszystkie elementy o jego tej samej stronie również są zgodne z rekomendacją. 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ń dotyczących AA.

Wskazówka: Ogólnie można poprawić czytelność stron, zwiększając ilość tekstu zgodnego z rekomendacją 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.

Zapisz niestandardowe zastąpienia geolokalizacji

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 polecenia

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 Geolokalizacje 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łosić błędy lub zaproponować ulepszenia, zobacz Problem nr 649657 w Chromium.

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. Naciśnij F1, aby otworzyć Ustawienia.
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 z gniazdem elektrycznym.

Rysunek 21. Karta Wiadomości

Aby zgłosić błędy lub zaproponować ulepszenia, zobacz Problem nr 802182 w Chromium.

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

• Prześlij nam swoje 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.
• 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.