REA a Chrome DevTools: analiza z agentem czy bezpośrednie debugowanie?

Wybierz Chrome DevTools do bezpośredniego debugowania w przeglądarce, edycji DOM/CSS, ustawiania punktów przerwania w JavaScript i badania wydajności. Wybierz REA, gdy chcesz, aby agent programistyczny zbadał stronę w przeglądarce, powiązał wybrane skrypty lub żądania z pytaniem i wyjaśnił ustalenia na podstawie dowodów.

Analiza przeglądarki w REA wymaga przygotowanego lokalnego połączenia z przeglądarką. REA nie bada witryny tylko dlatego, że ktoś wpisze jej URL na tej stronie społeczności. Ten niezależny przewodnik odsyła do oficjalnej dokumentacji REA dotyczącej przeglądarki i dokumentacji Chrome DevTools.

Czym różnią się te dwa sposoby pracy z przeglądarką?

Chrome DevTools jest wbudowane w Chrome. Jego panele pozwalają programiście badać działającą stronę, zmieniać style, wstrzymywać wykonanie JavaScript, analizować żądania, rejestrować przebieg działań użytkownika oraz badać wydajność i pamięć. Analizą sterujesz bezpośrednio w przeglądarce. Przegląd DevTools od Google opisuje te sposoby pracy.

REA zapewnia agentowi programistycznemu dostęp do wybranych obserwacji z przeglądarki, w tym struktury strony, załadowanych skryptów, aktywności sieciowej i zrzutów ekranu wykonanych na żądanie. Agent wykorzystuje te obserwacje, aby odpowiedzieć na konkretne pytanie lub zaproponować rekonstrukcję. REA oferuje również odrębne sposoby pracy z lokalnymi plikami aplikacji i natywnymi plikami binarnymi, wykraczające poza zwykły zakres debugowania stron w DevTools. README REA rozróżnia te grupy obiektów analizy.

Co chcesz zrobić?	Zalecany punkt wyjścia	Dane wejściowe	Wynik lub zaleta
Od razu zmienić odstępy, układ lub regułę CSS	Chrome DevTools	Wybrany element DOM	Edycja stylów na żywo i wizualna informacja zwrotna
Zatrzymać wykonanie na wierszu JavaScript i zbadać stan	Chrome DevTools	Działająca strona i punkt przerwania	Bezpośrednie sterowanie debuggerem i badanie zmiennych
Znaleźć wąskie gardło ładowania lub problem z pamięcią	Chrome DevTools	Nagranie wydajności lub profil pamięci	Wyspecjalizowane osie czasu i panele diagnostyczne
Zapytać agenta, jak działa funkcja w przeglądarce	Analiza przeglądarki w REA	Przygotowane lokalne połączenie i konkretne pytanie	Wybrany kod i obserwacje zinterpretowane przez agenta
Prześledzić funkcję od pakietu Electron do kodu natywnego	Odrębne tryby analizy aplikacji i kodu natywnego w REA	Lokalne artefakty aplikacji i odpowiedni dostawcy silników	Dowody z różnych typów obiektów analizy

Kiedy Chrome DevTools jest lepszym wyborem?

Użyj DevTools, gdy wiesz już, co zbadać, i chcesz natychmiastowej informacji zwrotnej. Zaznaczenie elementu, sprawdzenie stylu, ustawienie punktu przerwania lub przejrzenie żądania to często krótka, bezpośrednia czynność. DevTools pozwala uniknąć dodatkowej konfiguracji i interpretacji związanych z wymianą informacji z agentem.

DevTools jest też lepszym punktem wyjścia do szczegółowego badania wydajności i pamięci przeglądarki. Panel Performance udostępnia nagrania ładowania i działania; narzędzia Memory pomagają badać problemy z pamięcią. Możliwość zbierania obserwacji z przeglądarki przez REA nie oznacza, że oferuje ono równoważny interfejs dla każdej funkcji diagnostycznej DevTools. W takich zadaniach zacznij od dokumentacji wydajności od Google lub dokumentacji pamięci.

W przypadku nieudanego żądania panel Network zapewnia bezpośredni dostęp do aktywności zarejestrowanej przez przeglądarkę. Agent może pomóc zinterpretować dowody, ale dodatkowa warstwa agenta jest zbędna, gdy status odpowiedzi lub treść żądania już wyjaśnia problem.

Kiedy pomaga analiza z REA?

REA przydaje się, gdy odpowiedź na pytanie wymaga połączenia kilku obserwacji i chcesz, aby agent programistyczny wyjaśnił ich związek. Zapytaj o konkretne zachowanie, wskaż stronę do analizy i poproś o odpowiedni załadowany kod oraz obserwacje. Ogólny prompt w rodzaju „wyjaśnij całą tę witrynę” daje mniej jednoznacznych sposobów sprawdzenia odpowiedzi.

Oficjalny przykład REA z dinozaurem stanowi konkretną ilustrację. REA odczytuje skrypt załadowany przez grę z dinozaurem wywodzącą się z Chromium. Agent identyfikuje prędkość początkową 6, przyspieszenie 0.001 przy każdej aktualizacji bez kolizji oraz prędkość maksymalną 13, a następnie wykorzystuje tę regułę w niewielkiej grze z regulowaną prędkością. Przykład zawiera odwołania do kodu źródłowego i kontrolowane sprawdzenie reguły prędkości.

Autorem tego przykładu jest projekt REA. Nie stanowi on dowodu, że można odtworzyć każdą witrynę, i nie powinien być przedstawiany jako doświadczenie niezależnego użytkownika ze społeczności. Nasz zbiór przykładów społeczności oddziela wpisy źródłowe od oficjalnych przykładów z opisanym przebiegiem analizy.

Jak przygotować analizę przeglądarki?

Postępuj zgodnie z instrukcją przygotowania przeglądarki do REA, dotyczącą przeglądarki z rodziny Chrome i lokalnego połączenia debugowania. Podaj agentowi URL właściwej strony, lokalny punkt końcowy wymagany w tym poradniku i jedno pytanie. Przestrzegaj opisanego w poradniku zakresu połączenia zamiast udostępniać usługę debugowania w publicznym internecie.

Prompt dla własnej strony demonstracyjnej może wyglądać tak:

Użyj REA z przygotowanym lokalnym połączeniem z przeglądarką, aby zbadać
moją stronę demonstracyjną. Wyjaśnij, jak jej pole wyszukiwania aktualizuje wyniki.
Pokaż odpowiedni załadowany skrypt i lokalizacje w kodzie źródłowym.
Wymień obserwacje potwierdzające wyjaśnienie i wszelkie niewiadome.

Sprawdź, czy otrzymane dowody opisują zamierzone działanie i stan. Jeśli aplikacja ma wiele stron lub stanów, skrypt z jednego stanu może nie wyjaśniać innego. W razie potrzeby ręcznie powtórz czynność w DevTools, aby potwierdzić żądanie lub ścieżkę wykonania kodu opisaną przez agenta.

Czy któreś z narzędzi może pokazać kod źródłowy backendu witryny?

Skrypty i żądania widoczne w przeglądarce ujawniają działanie po stronie klienta dostępne w danej sesji przeglądarki. Nie ujawniają automatycznie prywatnego kodu implementacji serwera, zawartości bazy danych ani ukrytych reguł biznesowych. Odpowiedź może pokazać, co serwer zwrócił dla jednego żądania, bez wyjaśnienia wszystkich wewnętrznych kroków, które do niej doprowadziły.

Traktuj proponowany przez agenta projekt backendu jako hipotezę, chyba że potwierdzają go odrębne dowody uzyskane w ramach upoważnionego dostępu. Odtworzenie zaobserwowanego interfejsu i odzyskanie jego oryginalnej implementacji to dwa różne twierdzenia. Dowody i ograniczenia REA pomagają określić tę granicę; agent nadal musi jej przestrzegać.

Materiały przechwycone z przeglądarki mogą zawierać dane konkretnej sesji, treści żądań lub wrażliwe adresy URL. REA przeprowadza analizę lokalnie, ale zwracane wyniki narzędzi trafiają do agenta programistycznego i podlegają polityce danych dostawcy jego modelu. Oficjalne FAQ REA wyjaśnia tę granicę przepływu danych. Udostępniaj tylko obserwacje odpowiednie do zadania i zakresu uprawnień.

Jakie pytania pojawiają się przy wyborze między nimi?

Czy REA zastępuje Chrome DevTools?

REA zapewnia interfejs analizy dla agenta programistycznego. DevTools oferuje bezpośrednie debugowanie w przeglądarce i wyspecjalizowane panele diagnostyczne. Weryfikowanie ustaleń REA za pomocą DevTools to przydatne połączenie.

Czy do witryny potrzebuję Hopper, Ghidra lub IDA?

Analiza przeglądarki w REA wymaga zgodnej przeglądarki i udokumentowanego lokalnego połączenia z nią. Silniki natywne służą do odrębnej, dogłębnej analizy natywnych plików binarnych, a nie do zwykłego badania stron.

Czy REA działa w tej witrynie?

Nie. reverseengineeranything.tools publikuje przykłady społeczności i poradniki. Aby prowadzić analizy, zainstaluj oficjalny pakiet REA na własnym komputerze; ta strona nie ma funkcji przesyłania plików do analizy ani uruchamiania analiz na serwerze.

Czy mogę korzystać z DevTools bez modelu AI?

Tak. Chrome DevTools jest dostępne bezpośrednio w Chrome. CLI REA może również uruchamiać obsługiwane procesy pracy bez agenta programistycznego, natomiast analiza REA sterowana przez agenta korzysta z dostępu do modelu i warunków danego klienta.

Jak zacząć korzystać z REA z agentem?

Przeczytaj nasz poradnik pierwszej analizy, a następnie postępuj zgodnie z oficjalnymi poradnikami konfiguracji i przeglądarki. Sprawdź listę narzędzi zainstalowanego serwera; funkcje opisane w gałęzi main repozytorium mogą być nowsze niż opublikowany pakiet.