تطوير محلي · اختبارات عملية

شارك localhost: اختبر على الهاتف واستقبل Webhooks

يعمل موقعك على حاسوبك. امنح هاتفك أو عميلك أو خدمة Webhooks رابط HTTPS مؤقتًا للوصول إليه، دون نشره على خادم آخر.

قبل المشاركة: تحقّق من العنوان المحلي

انظر إلى العنوان الذي يعرضه خادم التطوير. البروتوكول والمنفذ مهمان: http://localhost:5173 وhttps://localhost:7143 وجهتان مختلفتان. افتح العنوان نفسه على حاسوبك ونفّذ إجراءً معتادًا قبل إنشاء النفق.

تطبيق واحد ومنفذ واحد

إذا استخدمت الصفحة وواجهة API العنوان المحلي نفسه، يصل نفق واحد إليهما. تبقى المسارات كما هي: يصل الطلب العام إلى /contact إلى /contact في التطبيق المحلي. لا ينسخ النفق ملفاتك ولا ينشرها على خادم آخر.

الواجهة الأمامية وAPI على منفذين مختلفين

لا ينشر نفق الواجهة الأمامية تلقائيًا واجهة API على منفذ آخر. المتصفح الذي يطلب localhost:3000 يتصل بجهاز الزائر نفسه. استخدم وكيل API في خادم التطوير أو عنوان اختبار متاحًا للواجهة، ثم عدّل الواجهة الأمامية وفقًا لذلك.

افتح العنوان العام على حاسوبك وعلى جهاز آخر. إذا عملت الصفحة المحلية وفشلت العامة، احتفظ بالعنوانين للمقارنة وتمييز مشكلة التطبيق عن مشكلة النفق أو إعداد المضيف.

هل تفضّل الطرفية؟

بعد تثبيت cloudflared، استبدل 5173 بمنفذك المحلي وشغّل الأمر. اترك الطرفية مفتوحة وانسخ عنوان HTTPS الناتج. يوقف Ctrl+C النفق.

cloudflared tunnel --url http://localhost:5173

تُستخدم Quick Tunnels للاختبارات المؤقتة. لا تضمن التوافر ولا تدعم Server-Sent Events (SSE).

التثبيت والقيود ↗

افتح localhost على هاتفك

يشير localhost على الهاتف إلى الهاتف نفسه، لا إلى حاسوبك. افتح الرابط العام أو امسح رمز QR في GhostlyShare.

انتقل إلى بيانات الهاتف للتحقق من الوصول من خارج شبكة Wi-Fi لديك.
جرّب القائمة والنماذج ولوحة المفاتيح ورفع الملفات على الجهاز الفعلي.
افتح صفحة داخلية مباشرة وأعد تحميلها. تحقّق أيضًا من الصور واستجابات API.

هل تختبر ضمن شبكة Wi-Fi نفسها فقط؟ قد يكفي عنوان حاسوبك في الشبكة المحلية إذا سمح خادم التطوير والجدار الناري بالوصول. يفيد النفق العام عند الوصول من شبكات أخرى أو خدمات خارجية.

رمز QR في GhostlyShare لفتح المعاينة على الهاتف

اختبار مفيد للهاتف في خمس دقائق

التنقل والتخطيط: افتح القائمة ودوّر الهاتف وزر صفحة طويلة. ابحث عن تمرير أفقي أو أزرار محجوبة أو محتوى خلف رأس ثابت. تساعد محاكاة المتصفح لكنها لا تعيد كل تفاعلات الجهاز الحقيقي.
النماذج والجلسة: المس كل حقل وأرسل قيمة غير صالحة ثم قيمة صالحة. تأكد من بقاء رسائل الخطأ ظاهرة فوق لوحة المفاتيح. إذا نجح الدخول على الحاسوب فقط، جرّب جلسة جديدة وراجع عنوان العودة وإعدادات ملفات تعريف الارتباط.
الطلبات والتحميل: اختبر صفحة كثيرة الصور وإجراءً يحمّل بيانات. الاستجابة البطيئة عبر اتصال منزلي ليست قياسًا لأداء بيئة الإنتاج. دوّن الصفحة والجهاز والإجراء لتكرار المشكلة محليًا.

اعرض عملك على العميل

أرسل الصفحة المحددة المطلوب مراجعتها. وضّح ما ينبغي تجربته ومتى ستغلق المعاينة.

قبل الإرسال

استخدم حسابًا تجريبيًا ومحتوى نموذجيًا. تأكد من عمل الرابط دون ملفات تعريف الارتباط أو جلسة تسجيل الدخول الخاصة بك.

اطلب اختبارًا محددًا

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

هذه معاينة لمراجعتنا اليوم. يُرجى اختبار قائمة الهاتف ونموذج الاتصال. سأغلق الرابط بعد مكالمتنا.

اجعل الملاحظات قابلة لإعادة الاختبار

اطلب عنوان الصفحة والجهاز والمتصفح وآخر إجراء قبل المشكلة. لقطة شاشة مع «توقعت X لكن حدث Y» أفيد من «الصفحة لا تعمل». أخبر المراجعين إذا عدّلت التطبيق أثناء المراجعة؛ فقد يرون التغييرات أو إعادة التحميل فورًا بحسب الإعدادات.

استقبل Webhook محليًا

لا تستطيع خدمة Webhooks الوصول إلى localhost على حاسوبك. أعطها عنوان النفق العام مع مسار الاستدعاء الراجع. يفترض المثال أن تطبيقك يعالج بالفعل طلبات POST على /api/webhooks/demo.

http://localhost:5173/api/webhooks/demohttps://YOUR-TUNNEL.trycloudflare.com/api/webhooks/demo

استبدل YOUR-TUNNEL باسم المضيف الفعلي وأدخل عنوان الاستدعاء الراجع كاملًا في إعدادات الاختبار لدى المزوّد.
أبقِ التحقق من التوقيع مفعّلًا. خزّن سر Webhook محليًا وأرسل حدثًا تجريبيًا من المزوّد.
راجع حالة التسليم والسجلات المحلية. أعد استجابة النجاح التي يتوقعها المزوّد وتعامل مع المحاولات المتكررة دون تكرار الإجراء.

قد تمنع مطالبة كلمة المرور في المتصفح مرسل Webhook. استخدم نقطة وصول يمكن للمزوّد بلوغها وتحقق من طلباته الموقّعة. ينطبق CORS على طلبات المتصفح، لا على تسليم Webhooks بين الخوادم.

مثال: التحقق من توقيعات GitHub Webhooks ↗

افحص استجابة Webhook لا صفحة المتصفح فقط

فتح عنوان العودة في المتصفح يرسل عادة طلب GET. تتوقع نقاط Webhook كثيرة طلب POST، لذا لا يثبت خطأ المتصفح وحده فشل التسليم. أرسل حدث الاختبار وقارن وقته ومعرّف التسليم بالسجل المحلي.

404 / 405: راجع المسار وطريقة HTTP. استخدم منفذ API، وليس منفذ الواجهة الأمامية تلقائيًا. فتح الصفحة الرئيسية لا يعني وجود نقطة الاستدعاء الراجع.
401 / 403: حدّد موضع رفض الطلب: كلمة مرور المعاينة أو مصادقة التطبيق أو فحص التوقيع. اتبع قواعد المزوّد بشأن جسم الطلب الأصلي للبيانات الموقّعة؛ فتحليله وإعادة كتابته قبل التحقق قد يبطل التوقيع.
5xx / Timeout: تأكد من تشغيل التطبيق واستلامه الطلب. عند المعالجة البطيئة، التزم بمهلة استجابة المزوّد واستخدم مهام خلفية عند الحاجة. اختبر إعادة التسليم حتى لا تنشأ طلبات شراء أو رسائل مكررة.

استخدم وضع الاختبار لدى المزوّد ولا تسجّل الأسرار أو كامل البيانات الشخصية. الاختبار الناجح يفحص التسليم ومعالجة التطبيق، لكنه لا يغني عن متطلبات التكامل لدى المزوّد.

يفتح الرابط لكن شيئًا ما لا يعمل؟

الرابط العام لا يصل إلى التطبيق

افتح العنوان المحلي أولًا. راجع المنفذ واستخدام HTTP أو HTTPS وتأكد من استمرار تشغيل التطبيق والنفق.

تفشل الصور أو طلبات API

ابحث عن عناوين localhost المكتوبة مباشرة في الشفرة. استخدم مسارات نسبية متى أمكن. تحتاج واجهة API على منفذ آخر إلى مسار وصول خاص بها.

يعيد التطبيق التوجيه إلى localhost

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

لا تعمل إعادة التحميل المباشرة أو WebSockets

تأكد من استخدام WebSockets للمضيف العام وwss في صفحات HTTPS. تحتاج بعض خوادم التطوير إلى إعداد مستقل لمضيف HMR.

لا يتلقى Webhook استجابة نجاح

راجع مسار العودة وطريقة HTTP وسر التوقيع وسجل التسليم. حدّث عنوان العودة بعد بدء نفق مؤقت جديد.

أنه الاختبار وأوقف المشاركة

أوقف المشاركة في GhostlyShare أو أوقف نفق الطرفية باستخدام Ctrl+C. يمكن لوقت انتهاء الرابط إغلاق معاينة مجدولة تلقائيًا. احذف أيضًا عناوين العودة المؤقتة لدى مزوّد Webhooks بعد الانتهاء.

هل تحتاج عنوانًا ثابتًا للاستخدام المستمر؟

المعاينة المؤقتة ليست نشرًا دائمًا. يشرح دليل الاستضافة المنزلية الأنفاق المسماة والنطاقات وخدمات Windows وتكاليف التشغيل.

إعداد Cloudflare Tunnel دائم →

أسئلة عن المعاينات المحلية

الأسئلة الشائعة

لماذا لا يعمل localhost على هاتفي؟

يشير localhost إلى الجهاز الذي يفتح العنوان. استخدم رابط المعاينة العام على هاتفك للوصول إلى التطبيق على حاسوبك.

هل يجب إبقاء حاسوبي قيد التشغيل؟

نعم. يجب أن يستمر الحاسوب والتطبيق المحلي والنفق في العمل. يجعل وضع السكون أو إيقاف النفق المعاينة غير متاحة.

هل أحتاج نطاقًا للمعاينة؟

لا. يوفّر النفق المؤقت عنوان HTTPS عامًا. حدّث الروابط المشتركة وإعدادات Webhooks إذا تغيّر العنوان.