Protokół CDP (Chrome DevTools Protocol) to protokół zdalnego debugowania (API), który umożliwia programistom komunikowanie się z uruchomioną przeglądarką Chrome. Narzędzia deweloperskie w Chrome korzystają z CDP, aby ułatwić Ci badanie stanu przeglądarki, kontrolowanie jej działania i zbieranie informacji na potrzeby debugowania. Możesz też tworzyć rozszerzenia do Chrome korzystające z CDP.
Przykład: jest to polecenie CDP, które wstawia nową regułę z danym parametrem ruleText w arkuszu stylów z określonym parametrem styleSheetId w pozycji określonej przez location.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Na karcie Monitorowanie protokołów możesz wysyłać żądania CDP oraz wyświetlać wszystkie wysyłane i odbierane przez Narzędzia deweloperskie żądania i odpowiedzi CDP.
Wcześniej trudno było samodzielnie opracować polecenie, zwłaszcza o wielu parametrach. Trzeba było pamiętać nie tylko o nawiasach otwierających i zamykających oraz cudzysłowach, ale też pamiętać o parametrach polecenia, które z kolei umożliwiają przejrzenie dokumentacji CDP.
Aby rozwiązać ten problem, wprowadziliśmy w Narzędziach deweloperskich nowy edytor CDP, którego głównym celem jest:
- Polecenia autouzupełniania. Uprość dane wejściowe CDP, udostępniając listę dostępnych poleceń za pomocą funkcji autouzupełniania.
- Automatycznie wypełniaj parametry poleceń. Nie musisz sprawdzać listy dostępnych parametrów polecenia w dokumentacji CDP.
- Uprość wpisywanie parametru. Musisz tylko wpisać wartości parametrów, które chcesz przesłać.
- Edytuj i wyślij ponownie. Przyspiesz proces tworzenia prototypów, wykorzystując możliwość szybszej modyfikacji polecenia CDP.
Teraz przyjrzyjmy się temu nowemu edytorowi i sprawdźmy, jak z niego korzystać.
Funkcja autouzupełniania
Pasek poleceń obsługuje teraz funkcję autouzupełniania. Pomaga zapisywać nazwy poleceń CDP, do których masz dostęp. Jest to bardzo przydatne w przypadku poleceń, które nie akceptują parametrów.
Parametry w postaci ciągów tekstowych i liczb
Ten nowy edytor umożliwia łatwe edytowanie wartości parametrów podstawowych. Aby otworzyć edytor, kliknij ikonę 
obok danych wejściowych polecenia.
Gdy wpiszesz nazwę polecenia, edytor automatycznie wyświetli odpowiednie parametry. Nie musisz przeglądać dokumentacji, aby wiedzieć, jakie parametry są powiązane z poszczególnymi poleceniami. Ponadto edytor wyświetla parametry w określonej kolejności: najpierw są wymagane (na czerwono), a opcjonalne – na niebiesko.
Aby dodać wartość do opcjonalnego parametru, najedź kursorem na jego nazwę i kliknij przycisk +. Aby zresetować parametr do niezdefiniowany, kliknij przycisk Przywróć wartość domyślną.
Parametry w postaci wyliczeń i wartości logicznych
Podczas edytowania parametrów typu enum lub wartości logicznej zobaczysz menu z potencjalnymi wartościami (w przypadku wyliczeń) lub prostą opcją „prawda” lub „fałsz” w przypadku wartości logicznych. Ta funkcja zmniejsza możliwość wpisania niewłaściwej wartości dla parametrów enum oraz utrzymuje dokładność i prostotę.
Parametry tablicy
W przypadku parametrów w postaci tablicy możesz ręcznie dodawać do niej 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
Po wpisaniu polecenia, które akceptuje parametry obiektu, edytor wyświetli listę kluczy tego obiektu i będzie można bezpośrednio edytować ich wartości. Działa to w przypadku wszystkich typów zagnieżdżonych parametrów.
Dowiedz się, jak polecenie i parametry działają w edytorze
Czy mieli Państwo czasami wątpliwości dotyczące przeznaczenia parametru lub polecenia? Teraz możesz najechać kursorem na polecenie lub parametr, aby wyświetlić opisową etykietkę z linkiem do dokumentacji online.
Ostrzegaj przed wysłaniem nieprawidłowych parametrów
Wcześniej, jeśli nie wiadomo było, czy wartość parametru jest prawidłowego typu, i musisz czekać na przeczytanie odpowiedzi o błędzie, ten nowy edytor jest właśnie dla Ciebie. Jeśli parametr nie akceptuje wpisanej wartości, wyświetlane są błędy w czasie rzeczywistym.
Wyślij polecenie ponownie
Jeśli chcesz zmodyfikować jakiś parametr wysłanego przed chwilą polecenia, nie musisz wpisywać go ponownie. Aby edytować i wysłać ponownie polecenie, kliknij prawym przyciskiem myszy element w siatce danych, a następnie z menu wybierz Edytuj i wyślij ponownie. Spowoduje to automatyczne ponowne otwarcie edytora CDP i wstępne wypełnienie go wybranym poleceniem.
Kopiowanie polecenia do formatu JSON
Aby skopiować do schowka polecenie CDP w formacie JSON, kliknij ikonę kopiowania 
na końcu paska narzędzi po lewej stronie. Pamiętaj też, że jeśli wpiszesz polecenie bezpośrednio na pasku wprowadzania danych, zostanie ono płynnie wypełnione w edytorze i na odwrót.
Podsumowanie
Celem zespołu DevTools zaprojektowaniem tego nowego edytora CDP było uproszczenie wpisywania poleceń CDP. Nowy edytor umożliwia też wyświetlanie parametrów wraz z dokumentacją i ułatwia wysyłanie poleceń CDP.
Pobieranie kanałów podglądu
Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.
Kontakt z zespołem Narzędzi deweloperskich w Chrome
Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.
- Prześlij nam sugestię lub opinię na stronie crbug.com.
- Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi. - zatweetuj na @ChromeDevTools.
- Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.