Inspektor pamięci: przejrzyj tablica tablica, typ tablicy, DataView i pamięć Wasm.

Jecelyn Yeen

Sofia Emelianova

Za pomocą inspektora pamięci sprawdź pamięć ArrayBuffer, TypedArray i DataView w JavaScript, a także WebAssembly.Memory aplikacji Wasm napisanych w C++.

Omówienie

Inspektor pamięci porządkuje zawartość pamięci i pomaga szybko poruszać się po dużych tablicach. Wartości ASCII zawartości pamięci możesz wyświetlić bezpośrednio obok bajtów i wybrać różne końce. Aby usprawnić proces, korzystaj z Inspektora pamięci podczas debugowania aplikacji internetowej.

Otwórz narzędzie do inspekcji pamięci.

Inspektor pamięci można otworzyć na kilka sposobów.

Otwórz z menu

1. Otwórz Narzędzia deweloperskie.
2. Kliknij Więcej opcji > Więcej narzędzi > Narzędzie do inspekcji pamięci

Otwórz podczas debugowania

1. Otwórz stronę z kodem JavaScript ArrayBuffer. Będziemy korzystać z tej strony demonstracyjnej.
2. Otwórz Narzędzia deweloperskie.
3. Otwórz plik demo-js.js w panelu Źródła i ustaw punkt przerwania w wierszu 18.
4. Odśwież stronę.
5. Rozwiń sekcję Zakres w panelu Debuger po prawej stronie.

6. Możesz otworzyć Inspektora pamięci:

   • Po kliknięciu ikony. kliknij ikonę obok właściwości buffer lub
   • W menu kontekstowym. Kliknij prawym przyciskiem myszy właściwość buffer i wybierz Pokaż w panelu Narzędzie do inspekcji pamięci.

   

Badanie wielu obiektów

1. Możesz też sprawdzać obiekt DataView lub TypedArray. Na przykład b2 jest TypedArray. Aby to sprawdzić, kliknij prawym przyciskiem myszy właściwość b2 i wybierz Pokaż w panelu Narzędzie do inspekcji pamięci (jeszcze brak ikony TypedArray ani DataView).
2. Otworzy się nowa karta w narzędziu Narzędzie do inspekcji pamięci. Pamiętaj, że możesz sprawdzać wiele obiektów jednocześnie.

Narzędzie do inspekcji pamięci

Inspektor pamięci składa się z 3 głównych obszarów:

Pasek nawigacyjny

1. Dane wejściowe adresu pokazują aktualny adres bajtowy w formacie szesnastkowym. Możesz wpisać nową wartość, by przeskoczyć do nowej lokalizacji w buforze pamięci. Na przykład wpisz 0x00000008.
2. Bufory pamięci mogą być dłuższe niż strona. Do nawigacji możesz używać przycisków w lewo i w prawo.
3. Przyciski po lewej stronie umożliwiają nawigację do przodu i do tyłu.
4. Domyślnie bufor jest aktualizowany automatycznie podczas przechodzenia. W przeciwnym razie przycisk odśwież umożliwia odświeżenie pamięci i zaktualizowanie jej zawartości.

Bufor pamięci

1. Po lewej stronie adres jest wyświetlany w formacie szesnastkowym.
2. Wartość memory jest też podawana w formacie szesnastkowym, w którym każdy bajt jest oddzielony spacją. Wybrany bajt zostanie podświetlony. Możesz kliknąć bajt lub poruszać się za pomocą klawiatury (w lewo, w prawo, w górę, w dół).
3. Po prawej stronie znajduje się reprezentacja pamięci ASCII. Wyróżnienie wskazuje odpowiednią wartość wybranym bitom w bajcie. Podobnie jak w przypadku pamięci, możesz kliknąć bajt lub poruszać się za pomocą klawiatury (w lewo, w prawo, w górę, w dół).

Narzędzie do inspekcji wartości

1. Górny pasek narzędzi zawiera przycisk umożliwiający przełączanie się między skrótami big i small endian oraz otwarcie ustawień. Otwórz ustawienia, aby wybrać typy wartości, które mają być domyślnie widoczne w inspektorze.
2. W obszarze głównym są widoczne wszystkie interpretacje wartości zgodne z ustawieniami. Domyślnie wyświetlane są wszystkie.
3. Kodowanie jest klikalne. Możesz przełączać się między wartościami dec, hex, óct w przypadku liczb całkowitych oraz sci, dec (decyzje) w przypadku liczb zmiennoprzecinkowych.

Sprawdzam pamięć

Przyjrzyjmy się razem pamięci.

1. Wykonaj te czynności, aby rozpocząć debugowanie.
2. Zmień adres w polu adresu na 0x00000027.
3. Przestrzegaj reprezentacji ASCII i interpretacji wartości. Wszystkie wartości są w tej chwili puste.
4. Zwróć uwagę na niebieski przycisk Przejdź do adresu obok Pointer 32-bit i Pointer 64-bit. Możesz go kliknąć, aby przejść pod dany adres. Jeśli adresy są nieprawidłowe, przyciski są wyszarzone i nie można ich kliknąć.
5. Kliknij Wznów wykonywanie skryptu, aby przejść przez kod.
6. Zwróć uwagę, że reprezentacja ASCII została zaktualizowana. Zostaną też zaktualizowane wszystkie interpretacje wartości.
7. Dostosujmy Inspektor wartości tak, aby wyświetlał tylko zmiennoprzecinkowy. Kliknij przycisk ustawień i zaznacz tylko opcje Liczba zmiennoprzecinkowa 32-bitowa i Liczba zmiennoprzecinkowa 64-bitowa.
8. Zmieńmy kodowanie z dec na sci. Zwróć uwagę, że reprezentacje wartości zostały odpowiednio zaktualizowane.
9. Spróbuj poruszać się po buforze pamięci, używając klawiatury lub paska nawigacyjnego. Powtórz krok 4, aby zaobserwować zmiany wartości.

Inspekcja pamięci WebAssembly

Obiekt WebAssembly.Memory to obiekt typu ArrayBuffer, który zawiera nieprzetworzone bajty pamięci obiektowej. Panel Inspektor pamięci umożliwia sprawdzanie takich obiektów w aplikacjach Wasm napisanych w języku C++.

Aby w pełni korzystać z kontroli urządzenia WebAssembly.Memory:

• Musisz używać Chrome 107 lub nowszej wersji. Sprawdź wersję na chrome://version/.
• Zainstaluj rozszerzenie Obsługa Narzędzi deweloperskich w C/C++ (DWARF). Jest to wtyczka do debugowania aplikacji w języku C/C++ WebAssembly przy użyciu danych debugowania w formacie DWARF.

Aby sprawdzić WebAssembly.Memory obiektu:

1. Otwórz Narzędzia deweloperskie na tej stronie demonstracyjnej.
2. W panelu Sources (Źródła) otwórz demo-cpp.cc i ustaw punkt przerwania w funkcji main() w wierszu 15: x[i] = n - i - 1;.
3. Załaduj ponownie stronę, aby uruchomić aplikację. Debuger zatrzyma się w punkcie przerwania.
4. W panelu Debuger rozwiń Zakres > Lokalnie.

5. Kliknij ikonę obok tablicy x: int[10].

   Możesz też kliknąć tablicę prawym przyciskiem myszy i wybrać Pokaż w panelu Narzędzie do inspekcji pamięci.

Aby przestać wyróżniać pamięć obiektów, w panelu Inspektor pamięci najedź kursorem na plakietkę obiektu i kliknij przycisk x.

Więcej informacji:

• Rozszerzanie narzędzia Memory Inspector na potrzeby debugowania w języku C/C++
• Debugowanie WebAssembly za pomocą nowoczesnych narzędzi.