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

Kayce Basques

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 wywołaniami console.log().

Aby dodać punkt logowania:

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

    Dodawanie punktu logowania

    Rysunek 1. Dodawanie punktu logowania

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

    Edytujący punkty przerwania

    Rysunek 2. Edytujący punkty przerwania

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

    Wpisywanie wyrażenia punktu logowania

    Rysunek 3. Wpisywanie wyrażenia punktu logowania

    Wskazówka: Gdy wylogowujesz zmienną (np. TodoApp), umieść ją w obiekcie (np. {TodoApp}), by wylogować się z jej nazwy i wartości 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ć, naciśnij Enter lub kliknij poza edytorem punktów przerwania. Pomarańczowa plakietka na górze wiersza oznacza punkt logowania.

    Pomarańczowa plakietka punktu logowania w wierszu 174

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

Przy następnym wykonaniu wiersza narzędzia deweloperskie zapiszą w konsoli wynik wyrażenia punktu logowania.

Wynik wyrażenia punktu logowania w konsoli

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ę z często ważnymi informacjami, takimi jak rozmiar i kolor czcionki, współczynnik kontrastu i wymiary modelu prostokąta.

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 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 użyte fragmenty kodu. start to przesunięcie początkowe dla użytego zakresu. 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, użyto pierwszego i ostatniego zestawu reguł, a środkowego 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ń.

    Menu polecenia

    Rysunek 7. Menu polecenia

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

    Pokaż zasięg

    Rysunek 8. Pokaż zasięg

    Otworzy się karta Stan.

    Karta Zasięg

    Rysunek 9. Karta Zasięg

  3. Kliknij Załaduj ponownie Załaduj ponownie. Po załadowaniu strony są one wczytywane ponownie i rejestruje wykorzystanie kodu w porównaniu z przesłaną ilością kodu.

  4. Kliknij Eksportuj Eksportuj, aby wyeksportować dane do pliku JSON.

Pokrycie kodu jest również dostępne w Puppeteer – narzędziu do automatyzacji przeglądarek dostępnym przez zespół Narzędzi deweloperskich. 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 wyrażenia). Jeśli wiadomość zawiera linki, ostatni z nich jest podświetlony. Naciśnięcie Enter otwiera link w nowej karcie. Naciśnięcie klawisza w lewo spowoduje podświetlenie całego komunikatu (zobacz ilustrację 13).

Zaznaczanie linku

Rysunek 11. Zaznaczanie linku

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

Aktywuję inny link

Rysunek 12. Aktywuję inny link

Ponowne naciśnięcie klawisza w górę spowoduje zaznaczenie całej wiadomości.

Podkreślenie 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.).

Rozwijanie zwiniętego zrzutu stosu

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

W selektorze kolorów wyświetla się teraz druga linia, która wskazuje, które kolory spełniają rekomendację współczynnika kontrastu AAA. Linia AA jest dostępna od Chrome 65.

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

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

Kolory między 2 liniami reprezentują kolory zgodne z zaleceniami AAA, ale niespełniające tego zalecenia. 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, 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 można poprawić czytelność stron, zwiększając ilość tekstu zgodnie z rekomendacją AAA. Jeśli z jakiegoś powodu zastosowanie rekomendacji AAA jest niemożliwe, spróbuj zastosować się przynajmniej do tego zalecenia.

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

    Menu polecenia

    Rysunek 16. Menu polecenia

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

    Karta Czujniki

    Rysunek 17. Karta Czujniki

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

    Karta Geolokalizacje w Ustawieniach

    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.

    Dodawanie niestandardowej geolokalizacji

    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.

Wiersze od 54 do 65 zostały złożone

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 > Preferencje > Ź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łóż Zwiń.

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 panelu Sieć podczas sprawdzania połączenia z gniazdem elektrycznym.

Karta Wiadomości

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59