W ostatnim kwartale 2019 roku zespół Narzędzi deweloperskich w Chrome zaczął ulepszać obsługę plików cookie w tych narzędziach. Było to szczególnie ważne, ponieważ Google Chrome i inne przeglądarki zaczęły zmieniać domyślne zachowanie plików cookie.
Podczas badania narzędzi dostępnych w Narzędziach deweloperskich często znaleźliśmy się w takiej sytuacji:
😰 Konsola była pełna ostrzeżeń i komunikatów o błędach, które zawierały wyjaśnienia techniczne i niekiedy prowadziły do strony chromestatus.com. Wszystkie komunikaty wyglądały podobnie do tego, co sprawiało, że trudno było się zdecydować, którym zająć się najpierw. Co więcej, tekst nie zawierał linków do dodatkowych informacji dostępnych w Narzędziach deweloperskich, co utrudniało zrozumienie, co się stało. Wiadomości często pozostawały całkowicie deweloperowi, który mógł znaleźć sposób rozwiązania problemu, a nawet poznać kontekst techniczny.
Jeśli używasz konsoli również do wiadomości ze swojej aplikacji, czasami możesz mieć problemy ze znalezieniem ich między wszystkimi wiadomościami z przeglądarki.
Nie tylko ludzie mają trudności, by wchodzić w interakcję z komunikatami w konsoli automatycznym procesom. Deweloperzy mogą na przykład używać przeglądarki Chrome bez interfejsu graficznego i puppeteer w scenariuszu ciągłej integracji lub ciągłego wdrażania. Komunikaty w konsoli to tylko ciągi tekstowe, więc programiści muszą napisać wyrażenia regularne lub inny parser, aby wyodrębnić przydatne informacje.
Rozwiązanie: uporządkowane i przydatne raporty o problemach
Aby znaleźć lepsze rozwiązanie wykrytych problemów, zaczęliśmy zastanawiać się nad wymaganiami i zebraliśmy je w dokumencie projektowym.
Naszym celem jest przedstawienie problemów w jasny sposób wyjaśniający, na czym polega problem i jak go rozwiązać. W trakcie projektu zdaliśmy sobie sprawę, że każdy problem powinien składać się z tych 4 części:
- Tytuł
- Opis
- Linki do zasobów, których dotyczy problem, w Narzędziach deweloperskich
- Link do dalszych wskazówek
Tytuł powinien być krótki i precyzyjny, aby ułatwić deweloperom zrozumienie podstawowego problemu, a często również zawierać wskazówki dotyczące rozwiązania problemu. Na przykład problem z plikami cookie brzmi teraz po prostu:
Oznacz pliki cookie pochodzące z różnych stron jako bezpieczne, aby umożliwić konfigurowanie ich w kontekście wielu stron
Każdy problem zawiera bardziej szczegółowe informacje, które wyjaśniają, co się stało, i zawiera praktyczne porady, jak go rozwiązać, oraz linki do innych paneli w Narzędziach deweloperskich, które pozwalają zrozumieć problem w kontekście. Udostępniamy też linki do szczegółowych artykułów na stronie web.dev, aby umożliwić programistom stron internetowych zapoznanie się z tym tematem bardziej szczegółowo.
Ważną częścią każdego problemu jest sekcja dotycząca zasobów, których dotyczy problem. Zawiera ona linki do innych części Narzędzi dla programistów i ułatwia ich dokładniejsze zbadanie. W przypadku przykładowego problemu z plikiem cookie powinna być lista żądań sieciowych, które spowodowały problem. Kliknięcie żądania bezpośrednio przeniesie Cię do panelu Network (Sieć). Mamy nadzieję, że będzie to nie tylko wygodne, ale także pomoże nam zrozumieć, które panele i narzędzia dostępne w Narzędziach deweloperskich mogą być wykorzystywane do debugowania określonego rodzaju problemów.
Jeśli weźmiemy pod uwagę długoterminową interakcję deweloperów z kartą Problemy, wyobrażamy sobie następujące ewolucję interakcji z deweloperami:
- Gdy po raz pierwszy napotkasz konkretny problem, programista stron internetowych może przeczytać artykuł, aby uzyskać szczegółowe informacje na jego temat.
- Mamy nadzieję, że podczas ponownego napotykania problemu opis będzie wystarczający, aby przypomnieć deweloperowi, na czym on polegał, i umożliwić mu natychmiastowe zbadanie sprawy i podjęcie działań w celu rozwiązania problemu.
- Po kilkukrotnym napotkaniu problemu mamy nadzieję, że tytuł wystarczy, aby deweloper rozpoznał jego rodzaj.
Kolejnym ważnym aspektem, który chcemy ulepszyć, jest agregacja. Jeśli np. ten sam plik cookie wielokrotnie powoduje ten sam problem, chcieliśmy go zgłosić tylko raz. Oprócz znacznego zmniejszenia liczby wiadomości często pomaga to szybciej zidentyfikować główną przyczynę problemu.
Wdrożenie
Mając to na uwadze, zespół zaczął szukać sposobu na wdrożenie nowej funkcji. Projekty przeznaczone dla Narzędzi deweloperskich w Chrome zwykle obejmują 3 różne obszary:
- Chromium – projekt open source napisany w C++ i wbudowany w Google Chrome
- Interfejs DevTools, implementacja JavaScriptu z Narzędzi deweloperskich w Chrome
- protokół Chrome DevTools Protocol (CDP), warstwa łącząca oba te formaty.
Wdrożenie składało się następnie z 3 zadań:
- W Chromium musieliśmy zidentyfikować komponenty zawierające informacje, które chcemy udostępnić, i udostępnić je za pomocą protokołu DevTools Protocol bez obniżania szybkości działania i bezpieczeństwa.
- Następnie musieliśmy zaprojektować protokół Narzędzi deweloperskich w Chrome (CDP) w celu zdefiniowania interfejsu API, który udostępnia te informacje klientom, na przykład frontendu Narzędzi deweloperskich.
- Na koniec musieliśmy wdrożyć w interfejsie Narzędzi deweloperskich komponent, który wysyła żądanie informacji do przeglądarki przez CDP i wyświetla je w odpowiednim interfejsie, aby deweloperzy mogli je łatwo interpretować i wchodzić w interakcje.
Jeśli chodzi o przeglądarkę, najpierw przyjrzeliśmy się temu, jak obsługiwane są komunikaty w konsoli, ponieważ ich działanie jest bardzo podobne do tego, o którym wspominaliśmy w przypadku problemów. CodeSearch jest zwykle dobrym punktem wyjścia do takich eksploracji. Umożliwia wyszukiwanie i przeglądanie całego kodu źródłowego projektu Chromium w internecie. W ten sposób dowiedzieliśmy się o implementacji komunikatów w konsoli i mogliśmy stworzyć równoległy, ale bardziej uporządkowany sposób wymagań zebranych w przypadku tych problemów.
Praca w tym klimacie jest szczególnie trudna ze względu na wszystkie kwestie związane z bezpieczeństwem, o których zawsze musimy pamiętać. W projekcie Chromium udało się podzielić elementy na różne procesy i umożliwić im komunikację wyłącznie za pomocą kontrolowanych kanałów komunikacji, co zapobiega wyciekom informacji. Problemy mogą zawierać informacje poufne, dlatego musimy uważać, żeby nie wysyłać ich do części przeglądarki, która nie powinna mieć o nich informacji.
We frontendzie Narzędzi deweloperskich
DevTools to sama aplikacja internetowa napisana w języku JavaScript i CSS. Działa on podobnie do wielu innych aplikacji internetowych, tyle że istnieje od ponad 10 lat. No i oczywiście jego backend jest w zasadzie kanał komunikacji bezpośredniej do przeglądarki: protokół Chrome DevTools.
Jeśli chodzi o kartę Problemy, najpierw zastanowiliśmy się nad historią użytkowników i tym, co deweloperzy muszą zrobić, aby rozwiązać problem. Głównym założeniem naszych pomysłów było to, że karta Problemy stała się głównym punktem wyjścia dla badań, które kierowały użytkowników do paneli zawierających bardziej szczegółowe informacje. Zdecydowaliśmy się umieścić kartę Problemy wraz z pozostałymi kartami u dołu Narzędzi deweloperskich, aby pozostawała otwarta, gdy deweloper styka się z innym komponentem Narzędzi deweloperskim, takim jak sieć czy panel aplikacji.
Mając to na uwadze, nasz projektant UX zrozumieł nasze cele i stworzył prototyp następujących wstępnych propozycji:
Po wielu dyskusjach na temat najlepszego rozwiązania zaczęliśmy wdrażać projekt i podkreślać decyzje, aby stopniowo dochodzić do tego, jak karta Problemy wygląda dzisiaj.
Kolejnym bardzo ważnym czynnikiem była wykrywalność karty Problemy. W przeszłości wielu świetnych funkcji Devtools nie było dostępnych, gdyby deweloper nie wiedział, czego szuka. Na karcie Problemy postanowiliśmy wyróżnić problemy w wielu różnych obszarach, aby mieć pewność, że deweloperzy nie przeoczą ważnych problemów.
Zdecydowaliśmy się dodać powiadomienie do panelu konsoli, ponieważ niektóre komunikaty w konsoli zostały wycofane i zastąpione informacjami o problemach. Dodaliśmy też ikonę do licznika ostrzeżeń i błędów w prawym górnym rogu okna narzędzi dla deweloperów.
Karta Problemy zawiera linki nie tylko do innych paneli Narzędzi deweloperskich, ale też do zasobów związanych z danym problemem, do karty Problemy.
W protokole
Komunikacja między frontendem a backendem odbywa się za pomocą protokołu Chromium DevTools Protocol (CDP). Interfejs CDP może być używany jako backend aplikacji internetowej, czyli Narzędzia deweloperskie w Chrome. CDP dzieli się na wiele domen, a każda domena zawiera różne polecenia i zdarzenia.
Na karcie Problemy zdecydowaliśmy się dodać do domeny kontroli nowe zdarzenie, które jest wywoływane za każdym razem, gdy napotka nowy problem. Aby umożliwić nam raportowanie problemów, które wystąpiły jeszcze przed otwarciem Narzędzi deweloperskich, w domenie Audits są przechowywane najnowsze problemy i wysyłane od razu po nawiązaniu połączenia z Narzędziami deweloperskimi. Następnie w Narzędziach deweloperskich zbiera dane o wszystkich problemach i agreguje je.
CDP umożliwia też odbieranie i przetwarzanie problemów innym klientom protokołów, takim jak Puppeteer. Mamy nadzieję, że uporządkowane informacje o problemach przesyłane przez CDP ułatwią i ułatwią integrację z istniejącą infrastrukturą ciągłej integracji. W ten sposób można wykryć i rozwiązać problemy jeszcze przed wdrożeniem strony.
Przyszła
Przede wszystkim znacznie więcej wiadomości musi zostać przeniesionych z konsoli na kartę Problemy. Zajmie to trochę czasu, zwłaszcza że do każdego nowo dodawanego problemu chcemy przygotować przejrzystą i przydatną dokumentację. Mamy nadzieję, że w przyszłości deweloperzy będą szukać problemów na karcie Problemy, a nie w konsoli.
Zastanawiamy się też, jak umieścić na karcie Problemy problemy z innych źródeł niż backend Chromium.
Pracujemy nad tym, jak utrzymać porządek na karcie Problemy i ułatwić jej obsługę. Wyszukiwanie, filtrowanie i lepsza agregacja znajdują się na naszej liście w tym roku. Aby uporządkować rosnącą liczbę zgłaszanych problemów, jesteśmy w trakcie wprowadzania kategorii problemów, które na przykład umożliwiłyby wyświetlanie tylko problemów związanych z zbliżającym się wycofaniem. Zastanawiamy się też nad dodaniem funkcji drzemki, za pomocą której deweloper będzie mógł tymczasowo ukryć problemy.
Aby problemy były nadal widoczne, chcemy ułatwić wykrycie, na której części strony one je spowodowały. W szczególności zastanawiamy się nad sposobami rozróżniania i odfiltrowywania problemów, które rzeczywiście występują na stronie (tj.własnych) od problemów, które są wywoływane przez umieszczone zasoby, ale nie są bezpośrednio pod Twoją kontrolą (np. sieć reklamowa). W pierwszej kolejności w Chrome 86 będzie można ukryć problemy z plikami cookie innych firm.
Jeśli masz jakieś sugestie dotyczące ulepszenia karty Problemy, daj nam znać, przesyłając błąd.
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.