Protokół narzędzi deweloperskich w Chrome (CDP) to protokół zdalnego debugowania (interfejs API), który umożliwia deweloperom komunikację z uruchomioną przeglądarką Chrome. Narzędzia deweloperskie w Chrome korzystają z CDP, aby umożliwić Ci sprawdzanie stanu przeglądarki, kontrolowanie jej działania i gromadzenie informacji debugujących. Możesz też tworzyć rozszerzenia do Chrome, które korzystają z CDP.
Oto przykład polecenia CDP, które wstawia nową regułę z danym parametrem ruleText w arkuszu stylów z danym parametrem styleSheetId w pozycji określonej przez parametr location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Karta Monitorowanie protokołów w schowku umożliwia wysyłanie żądań CDP i wyświetlanie wszystkich żądań CDP oraz odpowiedzi wysyłanych i otrzymywanych przez DevTools.
Wcześniej trudno było ręcznie utworzyć polecenie, zwłaszcza takie z wieloma parametrami. Nie tylko trzeba było zwracać uwagę na nawiasy i cudzysłów, ale też pamiętać parametry polecenia, co z kolei wymagało korzystania z dokumentacji CDP.
Aby rozwiązać ten problem, w Narzędziach deweloperskich wprowadziliśmy nowy edytor CDP, którego głównymi celami są:
- Polecenia autouzupełniania. Uprość wprowadzanie poleceń CDP, wyświetlając listę dostępnych poleceń za pomocą funkcji autouzupełniania.
- Autouzupełnianie parametrów polecenia. Zmniejszenie potrzeby sprawdzania listy dostępnych parametrów poleceń w dokumentacji CDP.
- Uprość wpisywanie parametrów. Wystarczy, że wpiszesz wartości parametrów, które chcesz przesyłać.
- Edytuj i wyślij ponownie. Zwiększ szybkość prototypowania, skracając czas modyfikowania polecenia CDP.
Zobaczmy, co oferuje nowy edytor i jak możesz z niego korzystać.
Funkcja autouzupełniania
Pasek wprowadzania poleceń korzysta teraz z funkcji autouzupełniania. Pomaga w pisaniu nazw poleceń CDP, do których masz dostęp. Może to być bardzo przydatne w przypadku poleceń, które nie obsługują parametrów.
Parametry ciągu znaków i liczb
Dzięki temu nowemu edytorowi możesz teraz łatwo edytować wartości parametrów prymitywnych. Aby otworzyć edytor, kliknij ikonę 
obok pola wprowadzania polecenia.
Gdy wpiszesz nazwę polecenia, edytor automatycznie wyświetli odpowiednie parametry. Nie musisz sprawdzać w dokumentacji, jakie parametry pasują do poszczególnych poleceń. Ponadto edytor wyświetla parametry w określonej kolejności: najpierw wymagane (na czerwono), a potem opcjonalne (na niebiesko).
Aby dodać wartość do parametru opcjonalnego, najedź kursorem na jego nazwę i kliknij przycisk +. Aby zresetować parametr do wartości nieokreślonej, kliknij przycisk Przywróć wartość domyślną.
Parametry wyliczenia i wartości logicznej
Podczas edytowania parametrów typu enum lub wartości logicznych zobaczysz menu, w którym możesz wybrać możliwe wartości (w przypadku parametrów typu enum) lub opcję „prawda” lub „fałsz” (w przypadku parametrów wartości logicznych). Ta funkcja zmniejsza ryzyko wpisania nieprawidłowej wartości w przypadku parametrów typu enum i zapewnia dokładność oraz prostotę.
Parametry tablicy
W przypadku parametrów tablic możesz ręcznie dodawać do nich wartości. Najedź kursorem na wiersz parametru i kliknij przycisk +.
Aby usunąć elementy tablicy pojedynczo, kliknij obok nich przycisk kosza. Możesz też wyczyścić wszystkie parametry z tablicy za pomocą przycisku blokowania. W takim przypadku parametr tablicy jest resetowany do wartości [].
Parametry obiektu
Gdy wpiszesz polecenie, które akceptuje parametry obiektu, edytor wyświetli klucze tego obiektu, a Ty będziesz mieć możliwość bezpośredniego edytowania ich wartości. Działa to w przypadku wszystkich typów parametrów zagnieżdżonych.
Dowiedz się, co robią polecenia i parametry w edytorze
Czy kiedykolwiek nie byłeś/aś pewien/pewna, do czego służy dany parametr lub polecenie? Teraz możesz najechać kursorem na polecenie lub parametr, aby wyświetlić opisowy tekst informacyjny z linkiem do dokumentacji online.
Ostrzeżenie przed wysłaniem nieprawidłowych parametrów
Jeśli wcześniej nie wiedziałeś(-aś), czy wartość parametru ma prawidłowy typ, musiałeś(-aś) czekać na odpowiedź z błędem. Ten nowy edytor jest właśnie dla Ciebie. W czasie rzeczywistym pokazuje błędy, jeśli parametr nie może zaakceptować wprowadzonej przez Ciebie wartości.
Ponowne wysyłanie polecenia
Jeśli chcesz zmienić parametr właśnie wysłanego polecenia, nie musisz go ponownie wpisywać. Aby edytować i ponownie wysłać polecenie, kliknij element prawym przyciskiem myszy w siatce danych i w menu kliknij Edytuj i wyślij ponownie. Spowoduje to automatyczne ponowne otwarcie edytora CDP i wstępne wypełnienie go wybranym przez Ciebie poleceniem.
Kopiowanie polecenia do formatu JSON
Aby skopiować polecenie CDP w formacie JSON do schowka, kliknij ikonę kopiowania 
na samym lewej stronie paska narzędzi. Pamiętaj też, że jeśli wpiszesz polecenie bezpośrednio na pasku wprowadzania, zostanie ono automatycznie wstawione do edytora i na odwrót.
Podsumowanie
Celem zespołu DevTools przy projektowaniu nowego edytora CDP było uproszczenie wpisywania poleceń CDP. Nowy edytor umożliwia też wyświetlanie parametrów obok dokumentacji i łatwiejsze wysyłanie poleceń CDP.
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
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 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.