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

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

Wersja wideo tych informacji o wersji

Punkty logowania

Używaj punktów logowania do rejestrowania komunikatów w konsoli bez zaśmiecania kodu za pomocą console.log() połączeń.

Aby dodać punkt logowania:

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

   

   Rysunek 1. Dodawanie punktu logowania

2. Wybierz Dodaj punkt logowania. Pojawi się Edytor punktów przerwania.

   

   Rysunek 2. Edytujący punkty 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: Gdy wylogowujesz zmienną (np. TodoApp), umieść ją w obiekcie (np. {TodoApp}), aby wylogować się z jej nazwy i wartości w Konsoli. Patrz sekcja Zawsze loguj obiekty oraz Skrót do wartości właściwości obiektu, aby dowiedzieć się więcej o tej składni.

4. Aby zapisać, naciśnij Enter lub kliknij poza edytorem punktów przerwania. Pomarańczowa plakietka nad numerem wskazuje punkt logowania.

   

   Rysunek 4. Pomarańczowa plakietka punktu logowania w wierszu 174

Przy następnym wykonaniu wiersza Narzędzia deweloperskie zapiszą wynik wyrażenia logu w interfejsie Konsola.

Rysunek 5. Wynik wyrażenia punktu logowania 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 Narzędzia deweloperskie wyświetlają teraz rozwiniętą etykietkę zawierającą często ważne takie jak rozmiar i kolor czcionki, współczynnik kontrastu czy wymiary modelu pola.

Rysunek 6. Sprawdzanie węzła

Aby sprawdzić węzeł:

1. Kliknij Zbadaj .

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

2. Najedź kursorem na węzeł w widocznym obszarze.

Eksportowanie danych o zasięgu kodu

Dane zasięgu kodu można teraz eksportować w postaci pliku JSON. 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 z fragmentami kodu. start to przesunięcie początkowe dla użytego zakresu. end to przesunięcie końcowe. text to pełny tekst pliku.

W powyższym przykładzie zakres od 0 do 21 odpowiada zakresowi body { margin: 1em; } oraz zakresowi 45– 67 odpowiada h1 { color: #317EFB; }. Innymi słowy, użyto pierwszego i ostatniego zestawu reguł a pozostałego – 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 poleceń.

   

   Rysunek 7. Menu polecenia

2. Zacznij pisać coverage, wybierz Pokaż zakres i naciśnij Enter.

   

   Rysunek 8. Pokaż zasięg

   Otworzy się karta Stan.

   

   Rysunek 9. Karta Zasięg

3. Kliknij Załaduj ponownie . DevTools spowoduje ponowne załadowanie strony i odnotuje, ile kodu zostało użyte w porównaniu do ilości wysłanych produktów.

4. Kliknij Eksportuj , aby wyeksportować jako pliku JSON.

Pokrycie kodu jest również dostępne w Puppeteer – narzędziu do automatyzacji przeglądarek dostępnym w Narzędziach deweloperskich. Google Cloud. Zobacz Stan.

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

Poruszanie się 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 ocenionego ). Jeśli wiadomość zawiera linki, ostatni z nich jest podświetlony. Docisk Enter otwiera link w nowej karcie. Naciśnięcie klawisza w lewo podświetla cały komunikat (zobacz ilustrację 13).

Rysunek 11. Zaznaczanie linku

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

Rysunek 12. Aktywuję inny link

Ponowne naciśnięcie klawisza w górę spowoduje zaznaczenie 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 (obiektów, tablicy itp.) wł.).

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, zobacz Problem nr 865674 w Chromium.

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

Selektor kolorów wyświetla teraz drugą linię, aby wskazać, które kolory spełniają współczynnik kontrastu AAA . Linia AA jest dostępna od Chrome 65.

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

Kolory między 2 liniami oznaczają kolory zgodne z zaleceniami dotyczącymi aplikacji w internecie i aplikacjach, ale niespełniające wymagań AAA. zalecenie. Gdy kolor jest zgodny z rekomendacją AAA, wszystko, co znajduje się po tej samej stronie tego koloru spełnia także zalecenia. Na przykład na Rys. 15 wszystko, co znajduje się poniżej dolnej linii, to AAA, a cokolwiek ponad górną granicą nie spełnia rekomendacji AA.

Wskazówka: Ogólnie można poprawić czytelność stron, zwiększając ilość tekstu które są zgodne z rekomendacją AAA. Jeśli zastosowanie rekomendacji dotyczących AAA jest niemożliwe w przypadku niektórych spróbuj przynajmniej zastosować się do rekomendacji AA.

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

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

Zapisz niestandardowe zastąpienia 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 poleceń.

   

   Rysunek 16. Menu polecenia

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

   

   Rysunek 17. Karta Czujniki

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

   

   Rysunek 18. Karta Geolokalizacje w Ustawieniach

4. Kliknij Dodaj lokalizację.

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

   

   Rysunek 19. Dodawanie niestandardowej geolokalizacji

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. Wiersze od 54 do 65 zostały złożone

Aby włączyć zawijanie kodu:

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

Aby zwinąć blok kodu:

1. Najedź kursorem myszy na numer linii, w której zaczyna się bryła.
2. Kliknij Rozłóż .

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

Karta Wiadomości

Karta Klatki zmieniła nazwę na Wiadomości. Ta karta jest dostępna tylko w Network (Sieć) podczas sprawdzania połączenia z gniazdem internetowym.

Rysunek 21. Karta Wiadomości

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

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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.