تطوير محلي · اختبارات عملية
شارك localhost: اختبر على الهاتف واستقبل Webhooks
يعمل الموقع على حاسوبك. استخدم رابط HTTPS مؤقتًا لإتاحة الوصول من هاتفك أو لعميل أو لخدمة Webhooks، دون الحاجة إلى نشر الموقع على خادم آخر.
قبل المشاركة: تحقّق من العنوان المحلي
انظر إلى العنوان الذي يعرضه خادم التطوير. البروتوكول والمنفذ مهمان: http://localhost:5173 وhttps://localhost:7143 وجهتان مختلفتان. افتح العنوان نفسه على حاسوبك ونفّذ إجراءً معتادًا قبل إنشاء النفق.
تطبيق واحد ومنفذ واحد
إذا استخدمت الصفحة وواجهة API العنوان المحلي نفسه، يصل نفق واحد إليهما. تبقى المسارات كما هي: يصل الطلب العام إلى /contact إلى /contact في التطبيق المحلي. لا ينسخ النفق ملفاتك ولا ينشرها على خادم آخر.
الواجهة الأمامية وAPI على منفذين مختلفين
لا ينشر نفق الواجهة الأمامية تلقائيًا واجهة API على منفذ آخر. المتصفح الذي يطلب localhost:3000 يتصل بجهاز الزائر نفسه. استخدم وكيل API في خادم التطوير أو عنوان اختبار متاحًا للواجهة، ثم عدّل الواجهة الأمامية وفقًا لذلك.
أنشئ رابطًا عامًا
ابدأ بتشغيل الموقع أو واجهة API وتحقق من الوصول المحلي. يتعرّف GhostlyShare تلقائيًا على تطبيقات الويب المحلية قيد التشغيل. اضغط Go Public للحصول على رابط HTTPS عام.
- اترك التطبيق وGhostlyShare يعملان طوال الاختبار.
- افتح الرابط في نافذة تصفح خاصة قبل مشاركته.
- استخدم بيانات تجريبية. أضف كلمة مرور عند الحاجة لمعاينة خاصة بالعميل.
متاح على Windows وLinux. أنشئ روابط مؤقتة مجانية دون حساب أو بريد إلكتروني أو اشتراك.
تنزيل GhostlyShare ↗
افتح العنوان العام على حاسوبك وعلى جهاز آخر. إذا عملت الصفحة المحلية وفشلت العامة، احتفظ بالعنوانين للمقارنة وتمييز مشكلة التطبيق عن مشكلة النفق أو إعداد المضيف.
افتح localhost على هاتفك
عند فتح localhost على الهاتف، يكون المقصود هو الهاتف ذاته وليس الحاسوب. للوصول إلى التطبيق، افتح الرابط العام أو امسح رمز QR الظاهر في GhostlyShare.
- انتقل إلى بيانات الهاتف للتحقق من الوصول من خارج شبكة Wi-Fi لديك.
- جرّب القائمة والنماذج ولوحة المفاتيح ورفع الملفات على الجهاز الفعلي.
- افتح صفحة داخلية مباشرة وأعد تحميلها. تحقّق أيضًا من الصور واستجابات API.
إن كانت التجربة محصورة في شبكة Wi-Fi نفسها، فقد يفي عنوان الحاسوب المحلي بالغرض إذا أتاح خادم التطوير والجدار الناري الوصول. استخدم نفقًا عامًا للوصول عبر شبكات أخرى أو خدمات خارجية.
اختبار مفيد للهاتف في خمس دقائق
- التنقل والتخطيط
- افتح القائمة ودوّر الهاتف وزر صفحة طويلة. ابحث عن تمرير أفقي أو أزرار محجوبة أو محتوى خلف رأس ثابت. تساعد محاكاة المتصفح لكنها لا تعيد كل تفاعلات الجهاز الحقيقي.
- النماذج والجلسة
- المس كل حقل وأرسل قيمة غير صالحة ثم قيمة صالحة. تأكد من بقاء رسائل الخطأ ظاهرة فوق لوحة المفاتيح. إذا نجح الدخول على الحاسوب فقط، جرّب جلسة جديدة وراجع عنوان العودة وإعدادات ملفات تعريف الارتباط.
- الطلبات والتحميل
- اختبر صفحة كثيرة الصور وإجراءً يحمّل بيانات. الاستجابة البطيئة عبر اتصال منزلي ليست قياسًا لأداء بيئة الإنتاج. دوّن الصفحة والجهاز والإجراء لتكرار المشكلة محليًا.
اعرض عملك على العميل
شارك رابط الصفحة التي تريد مراجعتها تحديدًا، وأخبر المستلم بما يجب تجربته وبموعد إغلاق المعاينة.
قبل الإرسال
اختر حساب اختبار ومحتوى تجريبيًا. جرّب الرابط من دون الاعتماد على ملفات تعريف الارتباط الخاصة بك أو على جلسة دخولك.
اطلب اختبارًا محددًا
اطلب تعبئة نموذج الاتصال أو اختبار القائمة على الهاتف أو إتمام شراء بدفعة تجريبية. تحديد مهمة واضحة يجعل ملاحظات العميل أكثر فائدة.
هذه معاينة لمراجعتنا اليوم. يُرجى اختبار قائمة الهاتف ونموذج الاتصال. سأغلق الرابط بعد مكالمتنا.
اجعل الملاحظات قابلة لإعادة الاختبار
اطلب عنوان الصفحة والجهاز والمتصفح وآخر إجراء قبل المشكلة. لقطة شاشة مع «توقعت 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 المتبادلة بين الخوادم.
افحص استجابة 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 إذا تغيّر العنوان.