- بواسطة x32x01 ||
حكاية مع Dart DevTools: "التطبيق شغال تمام، لكن في شوية مشاكل!"
تخيل إنك قاعد بتشرب شاي بعد ما خلصت شغل على تطبيقك، وبدأت تبعته للفريق اللي هيختبره. فجأة، يجي لك تقرير كأنه قنبلة:
"التطبيق تقيل جدًا!"
"فيه حاجة غلط في الأداء!"
وطبعًا، ردك الطبيعي:
"أكيد عشان الصور كتير، ومعظمها بصيغة PNG... بس كده!"
لكن الرد جالك صادم:
"عايزين تقرير كامل عن المشكلة، وبسرعة!"
هنا يظهر البطل الحقيقي: Dart Dev Tools
. أداة تحليل الأداء اللي هتخليك تعرف كل حاجة بتحصل جوه التطبيق.
1. Performance Tab
لو الأداء مش تمام، هنا المكان اللي هيكشفلك المشكلة.
الأعمدة الحمراء (Jank Frames):
لما تشوف أعمدة حمرا كتير، ده معناه إن الإطارات (Frames) بتاخد أكتر من 16.7 ميلي ثانية، وده بيعمل "تقطيع".
الحل؟ راجع الكود، وقلل الصور الكبيرة.
الأعمدة الزرقاء (UI & Raster):
دي بتوضح وقت معالجة واجهة المستخدم (UI) والرسم (Raster). لو الأعمدة أقل من 16.7 ميلي ثانية، تمام! لو أكتر، دور على العمليات الثقيلة اللي ممكن تبطّئ الأداء.
معدل الإطارات (FPS):
لو التطبيق عنده معدل إطارات (FPS) أقل من 60، غالبًا في حاجة تقيلة في الخلفية. أقل من 40؟ شوف المشكلة فورًا.
2. Memory Tab
هنا هتعرف إذا كان التطبيق بيسحب كتير من الرام، وده مؤشر لأي تسريب ذاكرة (Memory Leak).
Dart Heap:
لو التطبيق بيستهلك أكتر من 100 ميجابايت، راجع الصور أو الـ Streams.
عدد الكائنات (Instances):
لقيت إن الـ Image Widgets عندك كتير جدًا؟ ده معناه إن فيه صور كتير مش بتتحرر من الذاكرة.
3. Network Tab
لو التطبيق بيعتمد على الإنترنت، لازم تتابع:
زمن الاستجابة (Response Time):
لو الطلبات للـ API بتاخد أكتر من 3 ثواني، ممكن تكون المشكلة في الشبكة أو السيرفر نفسه.
4. Logs
دي زي الكاميرا الخفية اللي بتفضح الكود بتاعك. أي خطأ أو تحذير هيظهر هنا.
مثال؟خطأ في الاتصال بالـ API؟
مكتبة مش متوافقة؟
كل حاجة موجودة في السجلات.
5. CPU Usage
لو التطبيق بطيء جدًا، بص على استهلاك الـ CPU.
مشاكل شائعة:حلقات لا نهائية (Infinite Loops).
عمليات حسابية تقيلة جدًا.
أدوات إضافية تنقذ اليوم:
Highlight Repaints:
لو فيه مناطق كتير في التطبيق بتعيد الرسم بشكل غير ضروري، دي الأداة اللي هتوضحها.
Flutter Inspector:
أداة سحرية تستكشف بيها كل الـ Widgets والمشاكل في التصميم.
6. حجم التطبيق (App Size)
لو لقيت إن حجم التطبيق كبير جدًا، غالبًا السبب هيكون الصور أو الموارد (assets). شوية خطوات بسيطة هتفرق:
1. استخدم WebP بدل PNG أو JPEG
صيغة WebP بتوفر نفس الجودة بحجم أصغر بكتير.
2. قلل دقة الصور حسب حجم الشاشة
وفر صور بأحجام مختلفة تناسب الشاشات (زي mdpi وxhdpi) عشان متحملش صور كبيرة على شاشات صغيرة.
3. شيل الخطوط والمكتبات الزيادة
استخدم الخطوط اللي محتاجها بس، واحذف المكتبات اللي مش بتستعملها.
4. قسم الموارد حسب النسخ
خلي لكل نظام (Android أو iOS) موارده الخاصة بدل ما تحمل الكل في نفس النسخة.
5. فعّل Code Shrinking (زي Proguard)
استخدم Proguard لتقليص الكود وحذف اللي مش مستخدم، ده بيخفف الحجم بشكل كبير.
Dart Dev Tools هي مش مجرد أداة، دي درعك الواقي ضد كل المشاكل اللي ممكن تواجهك أثناء تطوير التطبيق. لو استخدمتها بذكاء، مش هيبقى فيه أعمدة حمرا، ولا تسريب ذاكرة، ولا حتى تطبيق حجمه عملاق!
تخيل إنك قاعد بتشرب شاي بعد ما خلصت شغل على تطبيقك، وبدأت تبعته للفريق اللي هيختبره. فجأة، يجي لك تقرير كأنه قنبلة:
"التطبيق تقيل جدًا!"
"فيه حاجة غلط في الأداء!"
وطبعًا، ردك الطبيعي:
"أكيد عشان الصور كتير، ومعظمها بصيغة PNG... بس كده!"
لكن الرد جالك صادم:
"عايزين تقرير كامل عن المشكلة، وبسرعة!"
هنا يظهر البطل الحقيقي: Dart Dev Tools
. أداة تحليل الأداء اللي هتخليك تعرف كل حاجة بتحصل جوه التطبيق.1. Performance Tab
لو الأداء مش تمام، هنا المكان اللي هيكشفلك المشكلة.الأعمدة الحمراء (Jank Frames):
لما تشوف أعمدة حمرا كتير، ده معناه إن الإطارات (Frames) بتاخد أكتر من 16.7 ميلي ثانية، وده بيعمل "تقطيع".
الحل؟ راجع الكود، وقلل الصور الكبيرة.
الأعمدة الزرقاء (UI & Raster):
دي بتوضح وقت معالجة واجهة المستخدم (UI) والرسم (Raster). لو الأعمدة أقل من 16.7 ميلي ثانية، تمام! لو أكتر، دور على العمليات الثقيلة اللي ممكن تبطّئ الأداء.
معدل الإطارات (FPS):
لو التطبيق عنده معدل إطارات (FPS) أقل من 60، غالبًا في حاجة تقيلة في الخلفية. أقل من 40؟ شوف المشكلة فورًا.
2. Memory Tab 
هنا هتعرف إذا كان التطبيق بيسحب كتير من الرام، وده مؤشر لأي تسريب ذاكرة (Memory Leak).Dart Heap:
لو التطبيق بيستهلك أكتر من 100 ميجابايت، راجع الصور أو الـ Streams.
عدد الكائنات (Instances):
لقيت إن الـ Image Widgets عندك كتير جدًا؟ ده معناه إن فيه صور كتير مش بتتحرر من الذاكرة.
3. Network Tab 
لو التطبيق بيعتمد على الإنترنت، لازم تتابع:زمن الاستجابة (Response Time):
لو الطلبات للـ API بتاخد أكتر من 3 ثواني، ممكن تكون المشكلة في الشبكة أو السيرفر نفسه.
4. Logs
دي زي الكاميرا الخفية اللي بتفضح الكود بتاعك. أي خطأ أو تحذير هيظهر هنا.مثال؟خطأ في الاتصال بالـ API؟
مكتبة مش متوافقة؟
كل حاجة موجودة في السجلات.
5. CPU Usage 
لو التطبيق بطيء جدًا، بص على استهلاك الـ CPU.مشاكل شائعة:حلقات لا نهائية (Infinite Loops).
عمليات حسابية تقيلة جدًا.
أدوات إضافية تنقذ اليوم:
Highlight Repaints:
لو فيه مناطق كتير في التطبيق بتعيد الرسم بشكل غير ضروري، دي الأداة اللي هتوضحها.
Flutter Inspector:
أداة سحرية تستكشف بيها كل الـ Widgets والمشاكل في التصميم.
6. حجم التطبيق (App Size) 
لو لقيت إن حجم التطبيق كبير جدًا، غالبًا السبب هيكون الصور أو الموارد (assets). شوية خطوات بسيطة هتفرق:1. استخدم WebP بدل PNG أو JPEG
صيغة WebP بتوفر نفس الجودة بحجم أصغر بكتير.
2. قلل دقة الصور حسب حجم الشاشة
وفر صور بأحجام مختلفة تناسب الشاشات (زي mdpi وxhdpi) عشان متحملش صور كبيرة على شاشات صغيرة.
3. شيل الخطوط والمكتبات الزيادة
استخدم الخطوط اللي محتاجها بس، واحذف المكتبات اللي مش بتستعملها.
4. قسم الموارد حسب النسخ
خلي لكل نظام (Android أو iOS) موارده الخاصة بدل ما تحمل الكل في نفس النسخة.
5. فعّل Code Shrinking (زي Proguard)
استخدم Proguard لتقليص الكود وحذف اللي مش مستخدم، ده بيخفف الحجم بشكل كبير.
Dart Dev Tools هي مش مجرد أداة، دي درعك الواقي ضد كل المشاكل اللي ممكن تواجهك أثناء تطوير التطبيق. لو استخدمتها بذكاء، مش هيبقى فيه أعمدة حمرا، ولا تسريب ذاكرة، ولا حتى تطبيق حجمه عملاق!