00:00:00أخيراً، أطلق فريق Chrome تحديثاً يتيح لخادم Chrome DevTools MCP
00:00:06التواصل مع نسخة نشطة من Chrome للقيام بأمور مثل تصحيح الأخطاء خلف صفحة تسجيل الدخول،
00:00:12وإجراء تحليل لجلسة مباشرة، بل وحتى القيام بمهام تصحيح متقدمة ورائعة مثل الوصول
00:00:17إلى عنصر محدد، أو أخطاء معينة، وحتى مراقبة نشاط الشبكة.
00:00:21ولكن مع وجود أدوات تصحيح متصفح أخرى مدعومة بالذكاء الاصطناعي مثل Agent Browser وPlaywright، والتي تضيف واجهة سطر أوامر (CLI)
00:00:26بمهارات وخادم MCP، فهل سيتعين على Chrome DevTools MCP إضافة هذه الميزات
00:00:31في المستقبل؟
00:00:33اشترك في القناة دعنا نكتشف ذلك.
00:00:35قبل بضعة أشهر، نشر Anjis فيديو يقدم نظرة عامة ممتازة عن خادم
00:00:44Chrome DevTools MCP، ولكن في ذلك الوقت كان يمكنه فقط تشغيل جلسة Chrome جديدة،
00:00:49أو يمكنك توصيله بمنفذ تصحيح عن بُعد، لكن ذلك كان يتطلب الكثير من الإعداد اليدوي.
00:00:53أما الآن في إصدار Chrome 144 وما فوق، ومع تفعيل خاصية التصحيح عن بُعد،
00:00:58ستقوم أداة Chrome MCP تلقائياً باكتشاف الجلسة المفتوحة واستخدامها للتصحيح،
00:01:04وهذا يغير قواعد اللعبة بالنسبة لي شخصياً لأنني أفضل استخدام Claude Code في الوحدة الطرفية (Terminal)،
00:01:09مما يعني أنني لست مضطراً لاستخدام متصفحات الذكاء الاصطناعي مثل Deer وComet، أو حتى إضافة Claude لمتصفح Chrome
00:01:15أو حتى أدوات تصحيح الذكاء الاصطناعي المفيدة مثل React Grab.
00:01:18دعونا نرى ميزات Chrome DevTools MCP الجديدة هذه قيد التشغيل.
00:01:22ستحتاج أولاً إلى تثبيت خادم MCP مع توفر خيار الاتصال التلقائي (auto connect).
00:01:27أنا أستخدم open-code، لكنه يدعم العديد من بيئات تشغيل الوكلاء، وداخل Chrome
00:01:31ستحتاج للانتقال إلى هذا الرابط والتأكد من تفعيل هذا الخيار.
00:01:36سابقاً، كان عليك بدء جلسة باستخدام أمر مثل هذا، ليقوم الوكيل
00:01:40بالاتصال بالمنفذ المفتوح عبر HTTP.
00:01:43ولكن مع الطريقة الجديدة في هذه الواجهة، يمكنك تشغيل Chrome كالمعتاد مع الوصول
00:01:48إلى جميع ملفات تعريف الارتباط (cookies)، والسجل وما إلى ذلك، وإيقافه متى انتهيت.
00:01:53الآن، إذا كنت تهتم بالخصوصية والأمان، سأريك لاحقاً في الفيديو كيف تتصل
00:01:57بنسخة أكثر خصوصية من متصفح Chrome.
00:01:59ولكن بعد القيام بهذين الأمرين؛ أي تفعيل الخيار والاتصال
00:02:04بخادم MCP مع خيار الاتصال التلقائي، يفترض أن يكون هذا كل شيء.
00:02:08يمكنني أن أطلب من الوكيل فحص أداء Betastack، وداخل Chrome، ستظهر لي هذه
00:02:12الرسالة المنبثقة تسألني إن كنت أريد السماح بالتصحيح عن بُعد، ثم سيظهر هذا الشريط في الأعلى.
00:02:17الآن تمكن الوكيل من الانتقال إلى موقع Betastack، وهو يستخدم حالياً
00:02:21أداة Lighthouse لإعطائي بعض مؤشرات الويب الحيوية ونتائج الأداء وتفاصيل أخرى.
00:02:27ولكن لنقم الآن بشيء أكثر فائدة.
00:02:29هذا تطبيق لتعلم اللغات أعمل عليه حالياً.
00:02:31لقد سجلت الدخول كمسؤول، وانتقلت إلى المحتوى، ثم إلى وحدة معينة وتوجهت لهذا التمرين.
00:02:37ولاحظت في نافذة التمرين أن زر الحفظ هنا في الأسفل مختلف عن
00:02:42بقية الأزرار في الموقع.
00:02:44لذا، بدلاً من إخبار الوكيل يدوياً بتكرار خطواتي، مثل تسجيل الدخول والانتقال
00:02:49إلى هذه الصفحة المحددة، سأقوم بتحديد زر الحفظ هذا في أدوات الفحص (Inspect)
00:02:55ثم أسأل الوكيل إن كان بإمكانه رؤية العنصر الذي حددته.
00:02:58وبعد قليل، تمكن من رؤية أنني حددت زر الحفظ.
00:03:02لذا سأطلب منه تغيير نمط (style) زر الحفظ ليبدو مثل زر التمرين الجديد،
00:03:06وهو هذا الزر الموجود هنا إذا كنتم ترونه.
00:03:09وبعد ثوانٍ قليلة، قام بتغيير نمط الزر تماماً كما أردت.
00:03:13ولكن إذا كنت تشغل خادم MCP في بيئة معزولة (sandbox)، سيتعين عليك استخدام خيار
00:03:18رابط المتصفح (browser URL) مع منفذ التصحيح عن بُعد كـ HTTP وليس WebSockets.
00:03:23وإذا كنت تهتم بالأمان، فستحتاج لإضافة مسار دليل بيانات المستخدم (user data directory)
00:03:28كخيار لخادم MCP، مما يعني أن الوكلاء لن يتمكنوا من الوصول إلى
00:03:33ملفات تعريف الارتباط الحالية، أو كلمات المرور، أو سجل المتصفح وغير ذلك الكثير.
00:03:36وسيتعين عليك إعادة تسجيل الدخول لتلك المواقع إذا أردت أن يصل إليها الوكيل.
00:03:41الآن، ورغم روعة هذا الأمر، فإذا شاهدتم أي فيديوهات سابقة لي، ستعرفون أنني لست
00:03:46من أكبر المعجبين بخوادم MCP لأنها تستهلك الكثير من مساحة السياق (context)
00:03:51إذا كان لديك الكثير منها.
00:03:52ولكن لحسن الحظ، يتيح لك خادم Chrome DevTools MCP القيام بكل شيء عبر واجهة سطر الأوامر (CLI)،
00:03:59وهو أمر لا يعرفه الكثيرون لأنه مخفي نوعاً ما، حيث سيتعين عليك الدخول
00:04:04إلى دليل المهارات (skills) ثم Chrome DevTools CLI للعثور على هذه الميزة التجريبية،
00:04:10والتي تمنح وكيلك معلومات حول كيفية استخدامها.
00:04:12وأيضاً بعض تعليمات التثبيت إذا لم تكن قد قمت بتثبيتها بالفعل.
00:04:16هذه الأداة هي ببساطة غلاف بسيط (thin wrapper) حول خادم MCP.
00:04:20وإذا كان الخادم يعمل بالفعل داخل بيئة وكيل، فلن تستخدم واجهة سطر الأوامر تلك الجلسة
00:04:24لأنها تستخدم العمليات الخلفية (daemon) الخاصة بها.
00:04:26هذا الأمر يعطيك معلومات حول العملية الخلفية الافتراضية التي تعمل، ويمكنك بالفعل
00:04:30رؤية أنه تم ضبط علامة رابط المتصفح مع علامات أخرى مثل headless وisolated.
00:04:34لكن ستلاحظ أيضاً عدم وجود خيار الاتصال التلقائي (auto connect) ضمن خيارات CLI المتاحة.
00:04:39لذا، إذا لم تكن قد شغلت Chrome عبر الوحدة الطرفية، فسيتعين عليك إغلاق الجلسة الحالية
00:04:43ثم تشغيلها بهذا الشكل، مع التأكد من أنه عند استخدام علامة منفذ التصحيح عن بُعد،
00:04:48يجب عليك استخدام علامة بيانات المستخدم (user data).
00:04:50والآن مع تطبيق ذلك، يمكنني بدء العملية الخلفية هكذا، والحصول على قائمة الصفحات،
00:04:54التي تظهر حالياً تبويباً جديداً واحداً فقط لأنه لا يوجد الكثير في الوقت الحالي.
00:04:57ولكن بالطبع، القوة الحقيقية تظهر عندما تستخدمها مع وكيل ذكاء اصطناعي.
00:05:01فإذا أغلقت أداة Chrome MCP، وحددت هذا الزر في DevTools وطلبت من الوكيل
00:05:06استخدام CLI لمعرفة العنصر المحدد، سنجد أنه تمكن من معرفة ذلك.
00:05:11لاحظ أن المعلومات في دليل بيانات المستخدم تستمر بين الجلسات.
00:05:15لذا فهذا يحفظ جميع ملفات تعريف الارتباط ومعلومات المتصفح وما إلى ذلك.
00:05:19كما أن هناك أشياء كثيرة أخرى يمكن لـ Chrome DevTools CLI القيام بها.
00:05:22لذا أوصيكم بالذهاب والتحقق من هذه المهارة، وربما في المستقبل،
00:05:26قد يقدمون ميزة الاتصال التلقائي.
00:05:28هذا كل ما في الأمر، عرض سريع لبعض الميزات الجديدة الرائعة في
00:05:32خادم Chrome DevTools MCP وواجهة CLI، والتي ستحسن بالتأكيد تجربة التصحيح الخاصة بك مع
00:05:38مساعدي البرمجة.
00:05:39بصفتي مستخدماً لمتصفح Arc (نعم، ما زلت أستخدم Arc)، أتمنى حقاً أن تصل هذه الميزة إليه في المستقبل.
00:05:45ولكن حتى ذلك الحين، يسعدني استخدام Agent Browser من Vassal، والذي يعمل
00:05:50بشكل جيد جداً معي.
00:05:51وإذا كنت لا تعرف شيئاً عن Agent Browser، فشاهد هذا الفيديو الذي صنعته منذ فترة، رغم
00:05:55أنه قد تطور كثيراً منذ ذلك الحين.
00:05:58لذا ربما حان الوقت لأصنع فيديو آخر عنه.