Użyj narzędzia do inspekcji pamięci, aby sprawdzić pamięć ArrayBuffer, TypedArray i DataView w JavaScriptie, a także WebAssembly.Memory w aplikacjach Wasm napisanych w C++.
Omówienie
Inspektor pamięci porządkuje zawartość pamięci i ułatwia szybkie poruszanie się po dużych tablicach. Możesz wyświetlać wartości ASCII zawartości pamięci bezpośrednio obok bajtów i wybierać różne kolejności bajtów. Aby usprawnić proces debugowania aplikacji internetowej, podczas jej testowania korzystaj z inspektora pamięci.
Otwieranie narzędzia do inspekcji pamięci
Narzędzie do inspekcji pamięci możesz otworzyć na kilka sposobów.
Otwieranie z menu
- Otwórz Narzędzia deweloperskie.
- Kliknij Więcej opcji
> Więcej narzędzi > Inspektor pamięci.
Otwórz podczas debugowania
- Otwórz stronę z JavaScriptem
ArrayBuffer. Użyjemy tej strony demonstracyjnej. - Otwórz Narzędzia deweloperskie.
- W panelu Źródła otwórz plik demo-js.js i ustaw punkt przerwania w wierszu 18.
- Odśwież stronę.
- W panelu Debugger po prawej stronie rozwiń sekcję Zakres.
Narzędzie do inspekcji pamięci możesz otworzyć:
- Kliknij ikonę. klikając ikonę obok właściwości
buffer. - W menu kontekstowym Kliknij prawym przyciskiem myszy właściwość
bufferi wybierz Pokaż w panelu Menedżer pamięci.
- Kliknij ikonę. klikając ikonę obok właściwości
Sprawdzanie wielu obiektów
- Możesz też sprawdzić DataView lub TypedArray. Na przykład
b2jestTypedArray. Aby to sprawdzić, kliknij prawym przyciskiem myszy właściwośćb2i wybierz Pokaż w panelu Menedżer pamięci (ikonaTypedArraylubDataViewnie jest jeszcze dostępna). - Otworzy się nowa karta w Narzędzie do inspekcji pamięci. Pamiętaj, że możesz sprawdzić wiele obiektów naraz.
Narzędzie do inspekcji pamięci
Narzędzie do inspekcji pamięci składa się z 3 głównych obszarów:
Pasek nawigacyjny
- Wpis adresu zawiera aktualny adres bajtu w formacie szesnastkowym. Możesz wpisać nową wartość, aby przejść do nowego miejsca w buforze pamięci. Możesz na przykład użyć typu
0x00000008. - Bufory pamięci mogą być dłuższe niż strona. Zamiast przewijać, możesz poruszać się za pomocą przycisków w lewo i w prawo.
- Przyciski po lewej stronie umożliwiają przechodzenie do przodu i do tyłu.
- Domyślnie bufor jest automatycznie aktualizowany podczas przechodzenia. Jeśli nie, możesz użyć przycisku Odśwież, aby odświeżyć pamięć i zaktualizować jej zawartość.
Bufor pamięci
- Po lewej stronie adres jest wyświetlany w formacie szesnastkowym.
- Pamięć jest też wyświetlana w formacie szesnastkowym, a każdy bajt jest oddzielony spacjami. Wybrany bajt jest podświetlony. Możesz kliknąć bajt lub poruszać się za pomocą klawiatury (w lewo, w prawo, w górę i w dół).
- Po prawej stronie znajduje się reprezentacja w formacie ASCII pamięci. Podświetlenie pokazuje wartość odpowiadającą wybranym bitom w bajcie. Podobnie jak w przypadku pamięci możesz kliknąć bajt lub poruszać się za pomocą klawiatury (w górę, w dół, w lewo i w prawo).
Inspektor wartości
- Na górnym pasku narzędzi znajduje się przycisk umożliwiający przełączanie się między wielkim i małym endianem oraz otwierający ustawienia. Otwórz ustawienia, aby wybrać typy wartości, które mają być domyślnie wyświetlane w inspektorze.
- Główna część zawiera wszystkie interpretacje wartości zgodnie z ustawieniami. Domyślnie wyświetlane są wszystkie.
- Kodowanie jest klikalne. Możesz przełączać się między formatami dec, hex i oct dla liczb całkowitych oraz sci i dec dla liczb zmiennoprzecinkowych.
Sprawdzanie pamięci
Razem sprawdźmy pamięć.
- Aby rozpocząć debugowanie, wykonaj te czynności.
- W polu Adres zmień adres na
0x00000027.
- Zwróć uwagę na reprezentację ASCII i interpretację wartości. Wszystkie wartości są obecnie puste.
- Zwróć uwagę na niebieski przycisk Przejdź do adresu obok
Pointer 32-bitiPointer 64-bit. Możesz kliknąć adres, aby przejść do niego. Jeśli adresy są nieprawidłowe, przyciski są wyszarzone i nie można ich kliknąć.
- Aby przejrzeć kod, kliknij Wznów wykonywanie skryptu.
- Zwróć uwagę, że reprezentacja ASCII została zaktualizowana. Zostaną też zaktualizowane wszystkie interpretacje wartości.
- Skonfigurujmy Inspektora wartości tak, aby wyświetlał tylko wartości zmiennopozycyjne. Kliknij przycisk Ustawienia i zaznacz tylko Liczba zmiennoprzecinkowa 32-bitowa oraz Liczba zmiennoprzecinkowa 64-bitowa.
- Zmieńmy kodowanie z
decnasci. Zwróć uwagę, że reprezentacje wartości są odpowiednio aktualizowane.
- Spróbuj poruszać się po buforze pamięci za pomocą klawiatury lub paska nawigacyjnego. Powtórz krok 4, aby obserwować zmiany wartości.
Inspekcja pamięci WebAssembly
Obiekt WebAssembly.Memory to obiekt ArrayBuffer zawierający surowe bajty pamięci obiektu. Panel Narzędzie do inspekcji pamięci umożliwia sprawdzanie takich obiektów w aplikacjach Wasm napisanych w C++.
Aby w pełni korzystać z funkcji WebAssembly.Memory:
- Użyj Chrome w wersji 107 lub nowszej. Sprawdź swoją wersję na stronie
chrome://version/. - Zainstaluj rozszerzenie C/C++ DevTools Support (DWARF). To wtyczka do debugowania aplikacji WebAssembly w C/C++ za pomocą informacji debugowania DWARF.
Aby sprawdzić WebAssembly.Memory obiektu:
- Otwórz Narzędzia deweloperskie na tej stronie demonstracyjnej.
- W panelu Źródła otwórz
demo-cpp.cci ustaw punkt przerwania w funkcjimain()w wierszu 15:x[i] = n - i - 1;. - Aby uruchomić aplikację, odśwież stronę. Debuger wstrzymuje się w punkcie przerwania.
- W panelu Debugger rozwiń Zakres > Lokalnie.
Kliknij ikonę
obok tablicy x: int[10].Możesz też kliknąć tablicę prawym przyciskiem myszy i wybrać Pokaż w panelu Menedżer pamięci.
Aby przestać wyróżniać pamięć obiektu, w panelu Wykrywacz pamięci najedź kursorem na plakietkę obiektu i kliknij przycisk x.
Więcej informacji znajdziesz w tych artykułach: