Ten artykuł przedstawia Inspektora pamięci, który jest dostępny w Chrome 91. Umożliwia badanie pamięci ArrayBuffer, TypedTrack, DataView i Wasm.
Wstęp
Czy zdarzyło Ci się zastanawiać się, jakie dane znajdują się w tablicy ArrayBuffer? Wcześniej narzędzia deweloperskie pozwalały jedynie na ograniczony wgląd w funkcje ArrayBuffers. Inspekcja w widoku Zakres podczas sesji debugowania ograniczała się do wyświetlania listy pojedynczych wartości w buforze tablicy, co utrudniało zrozumienie całości danych. Na przykład widok Zakres pokazuje bufor w postaci rozszerzalnych zakresów tablic w poniższym przykładzie:
Przechodzenie do określonego zakresu w buforcie było problemem, który wymagał od użytkownika przewinięcia w dół, aby w końcu dotrzeć do tego indeksu. Jednak nawet jeśli dotarcie do danej pozycji byłoby łatwe, ten sposób faktycznego inspecting wartości jest uciążliwy: trudno jest określić, co oznaczają te liczby. Zwłaszcza w sytuacji, gdy nie powinny być interpretowane jako pojedyncze bajty, tylko jako 32-bitowe liczby całkowite?
Badanie wartości przy użyciu Inspektora pamięci
W Chrome 91 wprowadzamy Inspektor pamięci – narzędzie do sprawdzania buforów tablic. Być może zdarzyło Ci się już używać narzędzi do sprawdzania pamięci do wyświetlania danych binarnych, które pokazują zawartość plików binarnych w siatce wraz z ich adresami, i oferują różne sposoby interpretacji wartości bazowych. Informacje dostępne w inspektorze pamięci znajdziesz w inspektorze pamięci. Za pomocą Inspektora pamięci możesz teraz wyświetlać treści, poruszać się po nich i wybierać typy do interpretacji dostępnych wartości. Pokazuje wartości ASCII bezpośrednio obok bajtów i pozwala użytkownikowi wybrać różne zakończenie obowiązywania. Zobacz, jak działa Inspektor pamięci:
Chcesz spróbować? Aby dowiedzieć się, jak otworzyć narzędzie Memory Inspector i wyświetlić bufor tablicy (lub TypedArray, DataView lub Wasm Memory) oraz jak z niego korzystać, zapoznaj się z dokumentacją narzędzia Memory Inspector. Wypróbuj te przykłady zabawek (w języku JS, Wasm i C++).
Projektowanie inspektora pamięci
W tej części przyjrzymy się projektowi Inspektora pamięci z użyciem komponentów sieciowych, a także pokażemy jeden z naszych celów projektowych i sposób wdrożenia. Jeśli chcesz dowiedzieć się więcej, zapoznaj się z naszym dokumentem projektowania dotyczącym Inspektora pamięci.
Być może znasz nasz post na blogu na temat migracji do komponentów sieciowych, w którym Jack opublikował wewnętrzny przewodnik na temat tworzenia komponentów UI za pomocą komponentów sieciowych. Migracja do komponentów sieciowych zbiegła się z pracą nad Inspektorem pamięci, dlatego zdecydowaliśmy się wypróbować nowy system. Poniżej znajduje się schemat pokazujący komponenty, które stworzyliśmy w celu utworzenia Inspektora pamięci (pamiętaj, że wewnętrznie nazywamy go Linear Memory Inspector):
Komponent LinearMemoryInspector jest komponentem nadrzędnym, który łączy podkomponenty tworzące wszystkie elementy w inspektorze pamięci. Zasadniczo wykorzystuje ona Uint8Array i address. Przy każdej zmianie przekazuje dane do elementów podrzędnych, co powoduje ponowne renderowanie. Sam obiekt LinearMemoryInspector renderuje 3 podkomponenty:
LinearMemoryViewer(wyświetla wartości),LinearMemoryNavigator(zezwalając na nawigację) orazLinearMemoryValueInterpreter(wyświetlanie różnych interpretacji typu danych).
Drugi z nich jest komponentem nadrzędnym, który renderuje elementy ValueInterpreterDisplay (pokazujące wartości) i ValueInterpreterSettings (wybierając typy, które mają być widoczne na ekranie).
Każdy z nich jest zaprojektowany tak, aby reprezentował tylko jeden niewielki element interfejsu użytkownika, dzięki czemu w razie potrzeby można je ponownie wykorzystać. Za każdym razem, gdy w komponencie zostają ustawione nowe dane, uruchamia się ponowne renderowanie, które pokazuje odzwierciedloną zmianę w danych ustawionych w komponencie. Poniżej znajduje się przykład przepływu pracy z naszymi komponentami, w którym użytkownik zmienia adres na pasku adresu, co powoduje aktualizację przez ustawienie nowych danych, w tym przypadku adresu do wyświetlenia:
LinearMemoryInspector dodaje siebie jako detektor w LinearMemoryNavigator. Funkcja addressChanged ma być aktywowana przez zdarzenie address-changed. Gdy tylko użytkownik będzie edytować wpisany adres, wysłane zostanie wspomniane wcześniej zdarzenie, które spowoduje wywołanie funkcji addressChanged. Ta funkcja zapisuje teraz adres wewnętrznie i aktualizuje jego podskładniki za pomocą metody ustawiającej data(address, ..). Podkomponenty zapisują adres wewnętrznie i ponownie renderują swoje widoki, pokazując zawartość pod danym adresem.
Cel projektu: zapewnienie wydajności i zużycia pamięci niezależnie od rozmiaru bufora
Podczas projektowania narzędzia Inspektor pamięci mieliśmy na uwadze, że jego wydajność powinna być niezależna od rozmiaru bufora.
Jak już wiesz w poprzedniej części, komponent LinearMemoryInspector renderuje wartości za pomocą metody UInt8Array. Jednocześnie chcieliśmy mieć pewność, że inspektor pamięci nie będzie musiał przechowywać wszystkich danych, ponieważ wyświetla tylko ich część (np. pamięć Wasm może mieć nawet 4 GB i nie chcemy przechowywać w niej 4 GB).
Aby szybkość i wykorzystanie pamięci przez inspektora pamięci były niezależne od rzeczywistego wyświetlonego bufora, pozostawiamy komponent LinearMemoryInspector tylko podzakres oryginalnego bufora.
Aby to zadziałało, LinearMemoryInspector musi najpierw przyjąć 2 dodatkowe argumenty: memoryOffset i outerMemoryLength. Pole memoryOffset wskazuje przesunięcie, od którego zaczyna się przekazywana tablica Uint8Track i jest wymagana do renderowania prawidłowych adresów danych. Wartość outerMemoryLength to długość oryginalnego bufora i jest niezbędna, aby określić, jaki zakres możemy wyświetlić:
Dzięki tym informacjom możemy nadal renderować ten sam widok co wcześniej (treść wokół address), ale nie dysponować wszystkimi danymi. Co więc zrobić, jeśli zostanie wysłany inny adres, który należy do innego zakresu? W takim przypadku LinearMemoryInspector wywołuje RequestMemoryEvent, który aktualizuje bieżący zachowany zakres. Oto przykład:
W tym przykładzie użytkownik porusza się po stronie pamięci (inspektor pamięci używa podziału na strony do wyświetlania fragmentów danych), co powoduje uruchomienie polecenia PageNavigationEvent, które również wywołuje RequestMemoryEvent.
Zdarzenie to uruchamia pobieranie nowego zakresu, który jest następnie przesyłany do komponentu LinearMemoryInspector przez konfigurowanie danych. W rezultacie pokazujemy nowo pobrane dane.
A wiesz, że... Możesz nawet sprawdzić pamięć w Wasm i kodzie C/C++
Inspektor pamięci jest dostępny nie tylko w języku ArrayBuffers w języku JavaScript, ale może też służyć do sprawdzania pamięci Wasm i pamięci, na które wskazują odwołania lub wskaźniki w C/C++ (przy użyciu rozszerzenia DWARF – wypróbuj go, jeśli jeszcze go nie znasz). Zobacz artykuł o debugowaniu WebAssembly przy użyciu nowoczesnych narzędzi. Krótkie omówienie działania Inspektora pamięci przy natywnym debugowaniu C++ w internecie:
Podsumowanie
W tym artykule przedstawiliśmy narzędzie do Inspektora pamięci i pokazaliśmy jego konstrukcję. Mamy nadzieję, że inspektor pamięci pomoże Ci zrozumieć, co dzieje się z tablicy ArrayBuffer :-. Jeśli masz jakieś sugestie dotyczące jej ulepszenia, daj nam znać i zgłoś 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.