---
title: تحليل المتصفح والشبكة — REA
url: https://rea.tools/ar/guides/browser/
---

[الرئيسية](https://rea.tools/ar/) / [أدلة](https://rea.tools/ar/guides/) / مراقبة المتصفح

# انظر ماذا سيحدث عند النقر فوق.

استخدام التطبيق متصفح صغير لربط العمل ، طلب شبكتها و JavaScript أن يبني تحميل.

## ماذا يحدث عند النقر فوق تصدير?

ال [ملاحظات متصفح سبيل المثال](https://rea.tools/examples/notes-web/) لديه **ملاحظات التصدير** زر. النقر عليه الأحمال `notes.json`، تنسيقات المذكرتين على النحو التالي CSV, ويبدأ التنزيل.

من النقر إلى CSV تحميل

1. 01 \* أنت

   انقر فوق تصدير الملاحظات

   قم بتنفيذ الإجراء في متصفحك أثناء تشغيل الالتقاط.
2. 02 · REA

   سجل الطلب

   التقاط عنوان ورل الطلب وحالة الاستجابة وهيكل جسون من الصفحة المحددة.
3. 03 \* وكيلك

   اقرأ رمز التصدير

   قم بتوصيل الطلب المرصود بـ `fetch("./notes.json")` في `export.js`.

`GET notes.json → 200 → notes[] → CSV`

ابدأ الالتقاط قبل النقر فوق تصدير الملاحظات.

## فتح Chrome مع التصحيح عن بعد

افتح مثال الملاحظات المستضافة باستخدام ملف تعريف متصفح منفصل ومنفذ تصحيح أخطاء محلي. على Linux:

ابدأ تشغيل متصفح المثال

```
google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://rea.tools/examples/notes-web/
```

استخدم المسار القابل للتنفيذ للمتصفح المثبت على macOS أو Windows. يمكنك استبدال رابط الصفحة بصفحة أخرى تريد فحصها.

REA يتصل بهذا المتصفح الحالي. يمكنك التحكم في الصفحة وتنفيذ الإجراء وإغلاق المتصفح عند الانتهاء.

## اطلب من وكيلك مشاهدة إجراء واحد

مساعدك البرمجي

استخدام REA لتفقد هذه الصفحة أثناء النقر فوق تصدير الملاحظات. ما هو الطلب الذي يقدمه ، وكيف هو CSV بنيت?

مثال موجه. إعطاء وكيلك نقطة النهاية التصحيح, `http://127.0.0.1:9222`، وعنوان الصفحة. السماح لها بدء التقاط قبل النقر فوق.

يكتشف وكيلك هدف الصفحة ، ويبدأ نافذة مراقبة ، ويقرأ الأدلة الناتجة. ويمكن بعد ذلك فحص البرنامج النصي وراء التصدير.

## أو التقاط من المحطة

ابحث عن معرف الهدف للصفحة:

ابحث عن الصفحة

```
npx -y rea-agents@latest list-browser-targets \
  http://127.0.0.1:9222 --json
```

اختر الهدف مع عنوان ورل مثال الملاحظات. استبدال `TARGET_ID` أدناه مع معرفه ، ثم تشغيل:

التقاط الثواني العشر القادمة

```
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --observation-ms 10000 \
  --include-accessibility-text \
  --include-json-body-shapes --json
```

دع الأمر يتصل لبضع ثوان ، ثم انقر فوق **ملاحظات التصدير** في هذا المتصفح. تصل النتيجة بعد انتهاء نافذة المراقبة.

تتضمن النتيجة الملتقطة الصفحة المحددة ونشاط الشبكة أثناء تلك النافذة وشكل استجابة جسون. الطلبات السابقة خارج هذا الالتقاط.

## قراءة الطلب وتصدير البرنامج النصي

سجلت مع REA 4.1.0 في مثال الملاحظات المحلية

| حقيقة القبض | القيمة |
| --- | --- |
| الطلب | `GET /examples/notes-web/notes.json` |
| الرد | `200 · application/json` |
| طلب البادئ | `export.js` \* النصي |
| هيكل الاستجابة | `notes[]` مع `id` و `title` الحقول |

قراءة البرامج النصية المحملة

```
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --include-script-sources --json
```

يحدد الطلب مصدر البيانات ، و REA المحاضر `export.js` كما البادئ لها. اقرأ مصدر البرنامج النصي الملتقط لمعرفة كيفية استخدام البيانات:

export.js \* مثال مقتطفات المصدر

```
const response = await fetch("./notes.json");
const { notes } = await response.json();
// Format each note as a CSV row.
const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
link.href = url;
link.download = "notes.csv";
link.click();
```

يتم إنشاء التنزيل في الصفحة باستخدام استجابة جسون. ال CSV تأتي خطوة التنسيق من البرنامج النصي ؛ يثبت التقاط الشبكة أن هذه النقرة مطلوبة `notes.json`.

[افتح المثال](https://rea.tools/examples/notes-web/) · [تحميل export.js](https://rea.tools/examples/notes-web/export.js) · [تحميل notes.json](https://rea.tools/examples/notes-web/notes.json)

> ابحث عن البرنامج النصي الذي يطلب `notes.json`. كيف يفلت من العناوين التي تحتوي على فواصل أو علامات اقتباس?

للحصول على تثبيت JavaScript أو Electron التطبيق ، تواصل مع [سير عمل التطبيق](https://rea.tools/guides/javascript/) لمتابعة الملفات وحدود العملية.

لفحص أجسام طلبات HTTP واستجاباتها، استخدم [Fiddler Everywhere: تسجيلات SAZ وMCP والمهارات العامة](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). صدّر بتنسيق SAZ ?? HAR 1.2 للحصول على أدلة تسجيل في REA دون اتصال، أو اربط خادم MCP في Everywhere لفحص حركة المرور المسجلة مع وكيلك.