لوحة جديدة، مصممة لـ GraphQL

علامة تبويب جديدة في Chrome DevTools تعرض المعلومات التي تحتاجها، بالواجهة التي تعرفها مسبقاً.

لماذا

جميع طلباتك تذهب إلى نقطة النهاية نفسها

كل ما كان بإمكانك رؤيته هو قائمة من طلبات POST /graphql بالحالة 200. يعرض لك GraphQL Network ما يهمك فعلاً.

شبكة Chrome
الاسمالحالةالنوع
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch

لا يظهر الخطأ في الطلب الثالث إلا إذا فتحت استجابته.

GraphQL Network
الاسمالحالةالنوع
Godsناجحquery
CreateGodناجحmutation
GetUserخطأ واحدquery
GetEventsناجحquery
GodActionناجحsubscription

اسم العملية ونوعها وأخطاؤها في لمحة واحدة.

الحمولة

الاستعلام والمتغيرات والملفات في عرض واحد

تفصل علامة تبويب الحمولة العملية عن متغيراتها وملفاتها المرفقة، مع تلوين صياغة GraphQL.

الاستعلام
1  mutation UploadFavicon($file: File!) {
2    uploadFavicon(file: $file) {
3      name
4      size
5      __typename
6    }
7  }
المتغيرات عرض المصدر
file: null
الملفات
1favicon.ico· image/x-icon
التوقيت

حلّل كل ميلي ثانية

يفصل التحليل كل مرحلة من مراحل الطلب. إذا هيمن وقت الانتظار فالمشكلة في الـ resolver.

CreateGodmutation · 184.6 ms
في قائمة الانتظار1.2 ms
الاتصال الأولي6.8 ms
SSL12.4 ms
تم إرسال الطلب0.6 ms
في انتظار الخادم148.2 ms
تنزيل المحتوى15.4 ms
الوقت الفعلي

الاشتراكات (Subscriptions) عبر WebSocket وSSE

تظهر كل رسالة مُرسلة ومُستلمة بالترتيب مع وقتها وحجمها. يظل الاتصال مفتوحاً ما دام الاشتراك نشطاً.

GodAction · subscription · wsمفتوحة
مُرسلة{"type":"connection_init","payload":{}}12:04:01
مُستلمة{"type":"connection_ack"}12:04:01
مُرسلة{"id":"1","type":"subscribe","payload":{"query":"subscription GodAction…"}}12:04:01
مُستلمة{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Hermes"}}}}12:04:09
مُستلمة{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Athena"}}}}12:04:15
مُستلمة{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Zeus"}}}}12:04:22
الواجهة

لا حاجة لتعلّم أدوات جديدة

تحاكي الواجهة Chrome DevTools: المرشحات والشلال ولوحة التفاصيل وعلامات التبويب في أماكنها نفسها. افتح DevTools وابدأ التصحيح.

متوفر في متجر Chrome الإلكتروني

قلّل صعوبات العمل مع GraphQL وابدأ باستخدام أدوات تسهّل عملك.

الانتقال إلى متجر Chrome