Chrome DevTools: دليل الاستخدام الكامل 2026

هل تستخدم console.log() لتصحيح كل خطأ في كودك؟ إذا كانت إجابتك نعم، فأنت تضيع 80% من وقتك. Chrome DevTools هي أقوى أداة مجانية يمتلكها أي مطور ويب، لكن معظم المطورين — حتى المحترفين — يستخدمون أقل من 15% من إمكانياتها.

في هذا الدليل الشامل والمفصل، سنغطي كل ما تحتاجه لتحول من مبتدئ في DevTools إلى محترف يصحح الأخطاء ويحلل الأداء ويفحص الشبكة ويحاكي الأجهزة بسرعة البرق. سواء كنت مطور Frontend أو Backend أو Full-Stack، هذا الدليل سيغير طريقة عملك تماماً.

⚡ حقيقة مذهلة: المطور المحترف يستخدم DevTools ليس فقط لتصحيح الأخطاء، بل لتحليل الأداء، فحص الشبكة، محاكاة الأجهزة، تحليل الأمان، تحسين تجربة المستخدم، وقياس Core Web Vitals — كل ذلك في أداة واحدة مدمجة في المتصفح ومجانية بالكامل.

🚪 فتح DevTools والاختصارات السريعة

قبل أن نتعمق في اللوحات، لنبدأ بالأساسيات — كيف تفتح DevTools بسرعة وما هي الاختصارات التي توفر عليك ساعات من العمل.

Chrome DevTools متاحة في كل إصدار من Google Chrome على Windows, macOS, و Linux. لا تحتاج لتثبيت أي إضافات أو برامج إضافية. كل ما تحتاجه هو الضغط على مجموعة مفاتيح بسيطة.

جميع طرق فتح DevTools

F12

فتح/إغلاق DevTools بسرعة

Ctrl + Shift + I

فتح DevTools (Windows/Linux)

Cmd + Option + I

فتح DevTools (Mac)

Ctrl + Shift + J

فتح Console مباشرة

Ctrl + Shift + C

فتح Inspector وفحص العنصر

Right Click → Inspect

فحص العنصر المحدد مباشرة

💡 نصيحة احترافية: احفظ الاختصار Ctrl + Shift + C في ذاكرتك. هذا الاختصار يفتح DevTools مباشرة في وضع الفحص ويمكنك النقر على أي عنصر في الصفحة لرؤية كود HTML و CSS الخاص به فوراً.

تخصيص واجهة DevTools

يمكنك تخصيص DevTools لتناسب طريقة عملك:

تغيير المظهر: اضغط F1 في DevTools → Preferences → Appearance → اختر Dark/Light/System.
تغيير موقع اللوحة: انقر على النقاط الثلاث (⋮) → Dock side → اختر Bottom, Left, Right, أو Undock (نافذة منفصلة).
تكبير الخط: Ctrl + + (تكبير) أو Ctrl + - (تصغير) داخل DevTools.
الوضع العمودي: مفيد للشاشات العريضة — اختر Dock to left أو right.

🔍 لوحة العناصر (Elements Panel)

هذه هي اللوحة الأكثر استخداماً بين المطورين. تتيح لك فحص وتعديل HTML و CSS في الوقت الفعلي دون الحاجة لإعادة تحميل الصفحة. باستخدامها بشكل صحيح، يمكنك توفير ساعات من التجربة والخطأ.

فحص العنصر (Inspect Element)

انقر بزر الماوس الأيمن على أي عنصر في الصفحة واختر "Inspect" أو استخدم Ctrl + Shift + C ثم انقر على العنصر. ستظهر لك شجرة DOM مع جميع خصائص CSS المطبقة على العنصر.

🎯 فحص العنصر بالتفصيل

عند فحص أي عنصر، ستجد في اللوحة اليمنى:

Styles: كل خصائص CSS المطبقة مع المصدر (ملف CSS أو inline)
Computed: القيم النهائية المحسوبة لكل خاصية بعد تطبيق الـ Cascade
Layout: أبعاد العنصر، المسافات، والموقع
Event Listeners: الأحداث المرتبطة بالعنصر (click, hover, إلخ)
DOM Breakpoints: نقاط توقف لتتبع تغييرات DOM
Properties: جميع خصائص JavaScript للعنصر
Accessibility: معلومات الوصولية (ARIA roles, labels)

التعديل المباشر في الوقت الفعلي

يمكنك تعديل HTML و CSS مباشرة في DevTools وترى النتيجة فوراً:

انقر نقراً مزدوجاً على أي نص HTML لتعديله
انقر على أي خاصية CSS لتغيير قيمتها — استخدم الأسهم لزيادة/تقليل القيم
اضغط H لإخفاء/إظهار العنصر (مفيد لتجربة بدونه)
اضغط Delete لحذف العنصر من DOM
اسحب أي عنصر في شجرة DOM لإعادة ترتيبه
انقر بزر الماوس الأيمن على أي عنصر → Edit as HTML لتعديل الكود كاملاً

⚠️ تنبيه مهم: التعديلات في DevTools مؤقتة — تختفي عند إعادة تحميل الصفحة. لحفظ التعديلات، انسخ الكود المعدل والصقه في ملفاتك الفعلية. أو استخدم إضافة "Workspaces" في Sources Panel لربط DevTools بملفاتك المحلية.

تجربة الألوان والتصاميم

انقر على أي لون في CSS لفتح Color Picker المتقدم:

Eyedropper: اختيار لون من أي مكان في الشاشة
تبديل التنسيقات: HEX, RGB, HSL, HWB — انقر على اللون للتبديل
Contrast Ratio: يظهر نسبة التباين للوصولية (AA أو AAA)
Color Palette: يقترح ألوان متناسقة بناءً على CSS Variables

Flexbox & Grid Inspector (جديد 2026)

في 2026، أضاف Chrome أدوات رائعة لفحص Flexbox و Grid بشكل مرئي:

📐 فحص Flexbox و Grid

ابحث عن أيقونة flex أو grid بجانب العنصر في شجرة DOM
انقر عليها لرؤية خطوط التوجيه المرئية (Guidelines) بالألوان
تعديل خصائص align-items, justify-content, gap مباشرة من اللوحة
رؤية المسافات الفعلية بين العناصر (Gap Overlay)
تبديل اتجاه Flex (row/column) بزر واحد

DOM Breakpoints: نقاط توقف متقدمة

يمكنك إيقاف الكود عند تغيير أي عنصر في DOM:

// 1. انقر بزر الماوس الأيمن على أي عنصر في Elements Panel

// 2. اختر "Break on" → اختر نوع التغيير:

// subtree modifications: عند إضافة/حذف عناصر داخل العنصر

// attribute modifications: عند تغيير أي خاصية HTML

// node removal: عند حذف العنصر

// مثال عملي: ضع Breakpoint على div#app

// ثم شغل موقعك — DevTools ستتوقف عند أي تغيير!

💻 لوحة الكونسول (Console Panel)

Console ليست فقط لـ console.log(). إليك الاستخدامات المتقدمة التي يستخدمها المحترفون يومياً:

أوامر Console المتقدمة

// ✅ console.table: عرض البيانات بشكل جدولي منظم

const users = [

  { name: "أحمد", age: 25, role: "Frontend" },

  { name: "سارة", age: 30, role: "Backend" },

  { name: "محمد", age: 28, role: "Full-Stack" }

];

console.table(users);

// ✅ console.group: تجميع الرسائل المتعلقة

console.group("🔧 تحميل البيانات");

console.log("جاري الاتصال بالخادم...");

console.log("تم الاتصال بنجاح ✅");

console.log("جاري تحليل البيانات...");

console.groupEnd();

// ✅ console.time: قياس وقت تنفيذ الكود بدقة

console.time("⚡ عملية البحث");

// ... كود البحث هنا

console.timeEnd("⚡ عملية البحث");  // عملية البحث: 2.345ms

// ✅ console.count: عداد للأحداث المتكررة

console.count("نقرة على الزر");

console.count("نقرة على الزر");

console.countReset("نقرة على الزر");  // إعادة العداد للصفر

// ✅ console.assert: التأكد من الشروط

const x = -5;

console.assert(x > 0, "❌ x يجب أن يكون موجباً، القيمة الحالية:", x);

// ✅ console.trace: تتبع مصدر الاستدعاء (Call Stack)

function foo() { bar(); }

function bar() { baz(); }

function baz() { console.trace("📍 أين تم استدعائي؟"); }

foo();

// ✅ console.dir: فحص كائن بعمق

console.dir(document.body);  // يظهر كل الخصائص القابلة للتوسيع

استخدام Console كآلة حاسبة ومنصة اختبار

Console يمكن استخدامه كآلة حاسبة متقدمة ومنصة اختبار سريعة:

// 🧮 حسابات سريعة

2 ** 10                    // 1024

Math.sqrt(144)             // 12

Math.PI * 5 ** 2           // مساحة دائرة نصف قطرها 5

Date.now()                 // الطابع الزمني الحالي (Unix timestamp)

new Date().toLocaleDateString('ar-SA')  // التاريخ بالعربية

// 🔍 فحص DOM بسرعة

document.querySelectorAll("a").length     // عدد الروابط في الصفحة

document.querySelectorAll("img").length   // عدد الصور

$$("h1, h2, h3")                          // اختصار لـ querySelectorAll

$0                                        // آخر عنصر تم فحصه في Elements

$1                                        // العنصر قبل الأخير

$($0)                                     // jQuery wrapper للعنصر المحدد

// 🎨 تعديل CSS مباشرة

$0.style.backgroundColor = "#ff6b6b";

$0.style.color = "white";

$0.style.padding = "20px";

$0.style.borderRadius = "10px";

// 📊 فحص أداء سريع

performance.now()          // الوقت منذ تحميل الصفحة بدقة عالية

performance.memory           // استهلاك الذاكرة (Chrome فقط)

Live Expressions: مراقبة متغيرات في الوقت الفعلي

ميزة رائعة في 2026 تتيح لك مراقبة أي تعبير JavaScript بشكل مباشر:

افتح Console Panel
انقر على أيقونة العين (👁️) في أعلى اليمين
اكتب أي تعبير: document.querySelectorAll('img').length
سترى القيمة تتحدث تلقائياً عند تغييرها!

🎯 أمثلة Live Expressions مفيدة:

window.innerWidth — عرض النافذة الحالي
document.readyState — حالة تحميل الصفحة
document.querySelectorAll('[loading="lazy"]').length — عدد الصور مع Lazy Loading

🌐 لوحة الشبكة (Network Panel)

هذه اللوحة تكشف كل شيء عن طلبات HTTP — الأداء، الأخطاء، حجم الملفات، والتسلسل الزمني. باستخدامها بشكل صحيح، يمكنك تقليل وقت تحميل موقعك بنسبة 50% أو أكثر.

قراءة Waterfall Chart

كل شريط في الرسم البياني يمثل طلباً واحداً. فهم الألوان يساعدك على تحديد المشاكل:

📊 ألوان Waterfall Chart ومعانيها

الأبيض: الانتظار في الطابور (Queueing) — المتصفح ينتظر دوره
الرمادي: DNS Lookup — البحث عن عنوان IP للخادم
البرتقالي: الاتصال (Connection) — إنشاء اتصال TCP
الأرجواني: SSL Handshake — تبادل شهادات الأمان
الأخضر: الانتظار للاستجابة (Waiting/TTFB) — الخادم يعالج الطلب
الأزرق: تحميل المحتوى (Content Download) — استلام البيانات

تصفية الطلبات

استخدم أزرار التصفية في أعلى اللوحة:

All: كل الطلبات
Fetch/XHR: طلبات API (AJAX, fetch)
JS: ملفات JavaScript
CSS: ملفات CSS
Img: الصور
Media: الفيديوهات والصوت
Font: الخطوط
Doc: مستندات HTML
WS: WebSocket
Wasm: WebAssembly

محاكاة سرعة بطيئة (Throttling)

اختبر موقعك على شبكة 3G أو حتى Offline:

افتح Network Panel
انقر على القائمة المنسدلة "Online" (بجانب Disable cache)
اختر "Fast 3G" أو "Slow 3G" أو "Offline"
أعد تحميل الصفحة (Ctrl + R) وراقب الفرق!

🐢 لماذا Slow 3G مهم؟ 60% من مستخدمي الإنترنت حول العالم يستخدمون شبكات بطيئة. إذا موقعك يعمل بسلاسة على Slow 3G، فهو سيعمل بشكل ممتاز على أي شبكة.

تصوير لقطات الشاشة من DevTools

يمكنك التقاط لقطة لأي عنصر أو الصفحة كاملة دون إضافات:

افتح Command Menu: Ctrl + Shift + P (أو Cmd + Shift + P على Mac)
اكتب "screenshot"
اختر أحد الخيارات:
- Capture full size screenshot: الصفحة كاملة (أفضل من أي إضافة)
- Capture screenshot: المنطقة المرئية فقط
- Capture node screenshot: العنصر المحدد في Elements

نسخ طلب كـ cURL

لتكرار أي طلب HTTP في Terminal:

انقر بزر الماوس الأيمن على أي طلب في Network
اختر Copy → Copy as cURL
الصق في Terminal وشغل!

⚡ لوحة الأداء (Performance Panel)

هذه اللوحة الأكثر قوة لتحليل أداء موقعك وقياس Core Web Vitals. إذا فهمت هذه اللوحة، ستتمكن من تسريع أي موقع بشكل ملحوظ.

تسجيل أداء الصفحة خطوة بخطوة

الإعداد قبل التسجيل

افتح Performance Panel
تأكد من إغلاق كل التطبيقات الثقيلة على جهازك
افتح موقعك في Tab واحد فقط
افتح DevTools في وضع Undocked (نافذة منفصلة) لتقليل التأثير

تسجيل الأداء

انقر على الزر الدائري "Record" 🔴
تفاعل مع الصفحة (تمرير، نقرة، كتابة)
انتظر 3-5 ثوانٍ
انقر على "Stop" ⏹

قراءة النتائج

بعد التسجيل، ستظهر لك:

FPS (Frames Per Second): معدل الإطارات — يجب أن يكون 60fps ثابتاً
CPU: استهلاك المعالج — الأخضر = جيد، الأحمر = مشكلة خطيرة
NET: طلبات الشبكة ومدة كل واحدة
Main (Main Thread): خيط JavaScript الرئيسي — الأصفر = Scripting، الأرجواني = Rendering، الأخضر = Painting
GPU: استهلاك كرت الشاشة للرسومات
Raster: تحويل المتجهات إلى بكسل

تحديد مشاكل الأداء الشائعة

🔍 ما تبحث عنه في Performance Timeline

Long Tasks: مهام JavaScript تستغرق أكثر من 50ms — ابحث عن الشرائط الطويلة في Main Thread
Forced Reflow: قراءة خصائص DOM بعد تعديلها (مثل offsetHeight بعد تغيير style) — يسبب إعادة حساب Layout
Layout Thrashing: تكرار القراءة والكتابة على DOM في loop — حلها بـ DocumentFragment
Heavy Paint: رسومات معقدة تستهلك GPU — ابحث عن أشرطة خضراء طويلة
Memory Leaks: ذاكرة تزداد باستمرار — افتح Memory Panel وخذ Heap Snapshots

// ❌ Layout Thrashing — أداء سيء

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {

  const height = box.offsetHeight;  // قراءة (Reflow)

  box.style.height = height + 10 + 'px';  // كتابة (Reflow)

});  // يتكرر Reflow لكل عنصر!

// ✅ الحل: استخدام DocumentFragment أو requestAnimationFrame

const heights = Array.from(boxes).map(box => box.offsetHeight);

boxes.forEach((box, i) => {

  box.style.height = heights[i] + 10 + 'px';

});  // قراءة أولاً، ثم كتابة

🔦 Lighthouse: التدقيق الشامل

Lighthouse هو أداة مدمجة في DevTools تعطيك تقريراً كاملاً عن جودة موقعك في 5 مجالات رئيسية. في 2026، أصبح Lighthouse أداة لا غنى عنها لأي مطور جاد.

تشغيل Lighthouse خطوة بخطوة

الإعداد

افتح Lighthouse Panel (F12 → Lighthouse)
اختر ما تريد قياسه:

✅ Performance: سرعة التحميل وCore Web Vitals
✅ Accessibility: الوصولية للأشخاص ذوي الإعاقة
✅ Best Practices: أمان HTTPS، أخطاء Console، HTTPS
✅ SEO: تحسين محركات البحث التقني
✅ PWA: تطبيقات الويب التقدمية

اختر الجهاز: Mobile (موصى به) أو Desktop
اختر Mode: Navigation (الافتراضي) أو Timespan أو Snapshot
انقر "Analyze page load"

فهم درجات Lighthouse

الدرجة	التقييم	اللون	الإجراء
90-100	ممتاز	🟢 أخضر	حافظ على الأداء
50-89	يحتاج تحسين	🟡 أصفر	طبق التوصيات
0-49	ضعيف	🔴 أحمر	إعادة بناء ضرورية

🎯 هدفك: درجة 90+ في Performance و 100 في Accessibility و Best Practices. SEO يجب أن يكون 100 لأن معظم التوصيات سهلة التطبيق.

📦 لوحة التطبيق (Application Panel)

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

ما يمكنك فحصه في Application Panel

Local Storage: بيانات تبقى حتى بعد إغلاق المتصفح
Session Storage: بيانات تختفي عند إغلاق الـ Tab
IndexedDB: قاعدة بيانات NoSQL في المتصفح
Cookies: ملفات تعريف الارتباط مع خصائصها
Cache Storage: تخزين Service Worker
Service Workers: سكربتات تعمل في الخلفية
Manifest: ملف PWA (الاسم، الأيقونات، الألوان)

تعديل Local Storage و Cookies

يمكنك تعديل البيانات مباشرة:

افتح Application Panel → Local Storage
انقر نقراً مزدوجاً على أي قيمة لتعديلها
اضغط Enter لحفظ
أعد تحميل الصفحة لرؤية التأثير

🔧 نصيحة للاختبار: استخدم Application Panel لمحاكاة سيناريوهات مختلفة — مثلاً، احذف Local Storage لاختبار تجربة المستخدم الجديد، أو عدّل Cookie لتجربة تسجيل الدخول.

🔒 لوحة الأمان (Security Panel)

لوحة الأمان تعطيك نظرة شاملة على أمان موقعك — HTTPS، الشهادات، Mixed Content، وأمان المصادر.

ما تبحث عنه

🔒 Secure: HTTPS صحيح مع شهادة صالحة
⚠️ Mixed Content: صفحة HTTPS تحتوي موارد HTTP (صور، CSS, JS) — يُعرض الموقع كـ "Not Secure"
🔴 Not Secure: HTTP فقط — Google تعاقب هذه المواقع في SEO

// ✅ حل Mixed Content: استخدم روابط نسبية أو HTTPS

// ❌ خطأ:

<img src="http://example.com/image.jpg">

// ✅ صحيح:

<img src="https://example.com/image.jpg">

// أو أفضل — روابط نسبية:

<img src="/images/image.jpg">

📁 لوحة المصادر (Sources Panel)

لوحة المصادر هي بيئة التطوير المتكاملة (IDE) داخل المتصفح. يمكنك من خلالها:

تصحيح الأخطاء (Debug): نقاط توقف (Breakpoints)، Step Over, Step Into, Step Out
تعديل الكود مباشرة: Local Overrides تتيح لك حفظ التعديلات
Workspaces: ربط DevTools بملفاتك المحلية للتعديل المباشر
Snippets: حفظ مقتطفات JavaScript لتشغيلها في أي موقع
Blackboxing: إخفاء ملفات المكتبات (jQuery, React) من Call Stack

نقاط التوقف (Breakpoints) المتقدمة

// 1. Regular Breakpoint: انقر على رقم السطر

// 2. Conditional Breakpoint: انقر بزر الماوس الأيمن → Add conditional breakpoint

//    اكتب الشرط: user.id === 42

// 3. Logpoint: انقر بزر الماوس الأيمن → Add logpoint

//    اكتب: "User clicked:", event.target

//    يطبع في Console بدون إيقاف الكود!

// 4. XHR/fetch Breakpoint: Sources → XHR/fetch Breakpoints → +

//    اكتب URL: "api/users" — يتوقف عند أي طلب يحتوي هذا النص

// 5. Event Listener Breakpoint: Sources → Event Listener Breakpoints

//    اختر "Mouse → click" — يتوقف عند أي نقرة في الصفحة

🚀 نصائح متقدمة واختصارات سرية

Command Menu (القائمة السحرية)

اضغط Ctrl + Shift + P (أو Cmd + Shift + P) لفتح Command Menu. اكتب أي شيء تبحث عنه:

screenshot — التقاط لقطة شاشة
full — وضع ملء الشاشة
theme — تغيير المظهر
coverage — فتح Coverage Panel
rendering — فتح Rendering Panel
network conditions — تغيير User Agent

Coverage Panel: اكتشاف الكود غير المستخدم

هل تعلم أن معظم المواقع يحمل CSS و JavaScript لا يُستخدم؟ Coverage Panel يكشف ذلك:

افتح Command Menu → اكتب "coverage" → اختر "Show Coverage"
انقر على الزر الدائري "Start"
تفاعل مع الصفحة (تمرير، نقرة)
انقر "Stop"
سترى نسبة الاستخدام — الأحمر = غير مستخدم!

📊 إحصائية: متوسط الموقع يحمل 70% من CSS و 60% من JavaScript غير مستخدم. استخدم Coverage Panel لإزالة الكود الزائد وتسريع موقعك بشكل كبير.

Rendering Panel: محاكاة الشاشات المختلفة

افتح Command Menu → "rendering" → Show Rendering:

Paint Flashing: يلون العناصر التي تُعاد رسمها — مفيد لاكتشاف إعادة الرسم غير الضرورية
Layout Shift Regions: يلون المناطق التي تتحرك (Layout Shift)
Core Web Vitals: يظهر LCP, CLS, INP مباشرة على الصفحة
Emulate CSS media feature prefers-reduced-motion: اختبار للمستخدمين الذين يفضلون الحركات البسيطة

Network Conditions: تغيير User Agent وسرعة الشبكة

افتح Command Menu → "network conditions"
في Network Panel، ستجد قسم "Network conditions"
يمكنك تغيير User Agent (مثلاً إلى iPhone Safari)
تعطيل Cache أو محاكاة Offline

❓ الأسئلة الشائعة (FAQ)

هل Chrome DevTools متاحة في المتصفحات الأخرى؟

نعم! كل متصفح حديث يحتوي على DevTools مشابهة. Firefox Developer Tools ممتازة خاصة في CSS Grid. Safari Web Inspector جيدة لاختبار iOS. Edge DevTools مبنية على Chromium مثل Chrome. لكن Chrome DevTools تبقى الأكثر تطوراً وتحديثاً.

هل يمكنني استخدام DevTools على الموبايل؟

نعم! يمكنك فحص مواقع الموبايل بثلاث طرق: 1) Device Mode في Chrome (Ctrl + Shift + M)، 2) Remote Debugging عبر USB لأجهزة Android الحقيقية، 3) Safari Web Inspector لأجهزة iOS. الطريقة الثانية هي الأدق لأنها تختبر على جهاز حقيقي.

كيف أحفظ التعديلات التي أجريها في DevTools؟

هناك ثلاث طرق: 1) Local Overrides: Sources → Overrides → اختر مجلد → التعديلات تُحفظ تلقائياً، 2) Workspaces: ربط DevTools بملفاتك المحلية للتعديل المباشر، 3) Copy-Paste: انسخ الكود المعدل والصقه في ملفاتك. Local Overrides هي الأسهل للتجربة السريعة.

ما الفرق بين Console.log و Debugger؟

console.log() يطبع قيمة في الوقت الحالي فقط. Debugger (أو Breakpoints) يتيح لك إيقاف الكود في أي لحظة، فحص كل المتغيرات، تتبع Call Stack، وتنفيذ الكود سطراً بسطر. Debugger أقوى بكثير لكن console.log() أسرع للاختبارات البسيطة.

كيف أقيس Core Web Vitals باستخدام DevTools؟

أفضل طريقة هي Lighthouse Panel (F12 → Lighthouse → Performance). أو Performance Panel لتسجيل تفاعل حقيقي. أو استخدم Web Vitals Extension من Chrome Web Store لقياس LCP, INP, CLS في الوقت الفعلي. Google Search Console تعطيك أيضاً تقارير Core Web Vitals لكل صفحات موقعك.

هل DevTools تؤثر على أداء الموقع أثناء القياس؟

نعم، DevTools تستهلك موارد الجهاز. لتقليل التأثير: 1) افتح DevTools في وضع Undocked (نافذة منفصلة)، 2) أغلق كل التطبيقات الأخرى، 3) استخدم Incognito Mode لتجنب الإضافات، 4) للقياسات الدقيقة استخدم WebPageTest أو PageSpeed Insights (يقيس من خادم Google).

✍️ عن الكاتب

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

📞 الهاتف: 01229068356

🌐 الموقع: librarybook32.com