تمكين واستخدام DevTools في Microsoft Edge

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

في هذا الدليل ستنتقل مباشرة إلى الأمر المهم:كيفية فتح DevTools في Edge باستخدام الاختصارات والقوائم، وما تقدمه كل علامة تبويب، وكيفية تخصيص الواجهة، حيل أدوات الشبكة ووحدة التحكم لاكتشاف الاختناقات أو الأخطاء، وكيفية دمجها مع Visual Studio Code. ستجد أيضًا توصيات عملية لتحسين الأداء وإمكانية الوصول والاختبار المتجاوب استنادًا إلى سير العمل الواقعي.

ما هي Edge DevTools ولماذا تهمك؟

Microsoft Edge DevTools هي مجموعة أدوات التطوير المضمنة في المتصفح. الذي يظهر بجوار الصفحة المُحمّلة. من هناك، يمكنك فحص HTML/CSS، وتصحيح أخطاء JavaScript باستخدام نقاط التوقف، وعرض حركة مرور الشبكة، وتحليل الذاكرة والأداء، وحتى تحرير الملفات ومزامنتها مع نظام الملفات عند إعداد مساحة عمل.

ما يمكنك فعله بانتظام:مراجعة وتعديل الأنماط المباشرة، والتحقق من مكان تخزين كل مورد (.html، .css، .js، .png) وتحميله، ومحاكاة الأجهزة وظروف الشبكة، والتحقيق في مشكلات إمكانية الوصول والتوافق والأمان، وتصحيح أخطاء الواجهة الأمامية باستخدام وحدة تحكم تفاعلية تقبل التعبيرات في السياق الحالي.

بالإضافة إلى Edge، تتضمن المتصفحات الأخرى DevTools (كروم، فايرفوكس، سفاري، وأوبرا) مع وظائف مماثلة للفحص، ووحدة التحكم، والشبكة، وتصحيح الأخطاء. الاختصارات متشابهة عمومًا: F12 أو Ctrl+Shift+I (Cmd+Option+I على نظام ماك)، ثم النقر بزر الماوس الأيمن على عنصر واختيار "فحص".

لتعلم المزيديجمع هذا الدليل الوثائق الرسمية (Microsoft Learn وMDN Web Docs) مع دروس تعليمية ومقاطع فيديو. ستجد أدلةً خطوة بخطوة وأمثلة وتفاصيل متقدمة لإتقان كل لوحة.

كيفية فتح DevTools في Microsoft Edge

هناك عدة طرق سريعة لفتح الأدوات، واختيارك له تأثير على ظهور اللوحة أولاً. إليك أهم الاختصارات للاستخدام اليومي.

الطرق الرئيسية للفتح:انقر بزر الماوس الأيمن في أي مكان على الصفحة ثم انقر فوق "فحص" (يفتح العناصر مع تمييز العقدة)، أو F12، أو Ctrl+Shift+I (Cmd+Option+I على نظام macOS) لإعادة فتح الأداة المستخدمة آخر مرة أو شاشة الترحيب إذا كانت هذه هي المرة الأولى.

عمل	ما يفتح
انقر بزر الماوس الأيمن > فحص	عناصر مع توسيع DOM على العقدة المحددة
على Ctrl + Shift + I (أو Cmd+Option+I)	آخر أداة مستخدمة أو شاشة الترحيب
F12	آخر أداة مستخدمة أو شاشة الترحيب

نماذج إضافية عملية للغايةمن قائمة Edge ضمن "الإعدادات والمزيد > أدوات إضافية > أدوات المطور"؛ اختصارات لوحة المفاتيح المباشرة (Ctrl+Shift+J / Cmd+Option+J) أو تحديد العنصر (Ctrl+Shift+C / Cmd+Option+C). يؤدي الضغط على Shift+F10 إلى فتح قائمة سياق لوحة المفاتيح واختيار "فحص".

عمل	اللوحة التي سوف تراها
قائمة الحافة > المزيد من الأدوات > أدوات المطور	آخر أداة تم استخدامها أو الترحيب بها
Ctrl + Shift + J (Cmd+Option+J)	وحدة التحكم
على Ctrl + Shift + C (Cmd+Option+C)	عناصر مع التركيز على
التحول + F10 وحدد "فحص"	عناصر مع توسع الشجرة

اختصارات لتسريع تدفقكيُفتح ويُغلق F12 أدوات التطوير، ويُعيد Ctrl+R تحميلها مع إبقائها مرئية، ويُفعّل Ctrl+Shift+C مُحدد العناصر. تذكّر أنه يمكنك التنقل باستخدام Tab لتحديد الصفحة، ثم فتح قائمة السياق باستخدام Shift+F10.

جعل DevTools يفتح تلقائيًا في كل علامة تبويب:إيدج تطلق العلامة التجارية --auto-open-devtools-for-tabs. على سبيل المثال في ويندوز: start msedge --auto-open-devtools-for-tabs، وفي بوويرشيل: Start-Process -FilePath msedge -ArgumentList --auto-open-devtools-for-tabs; على نظام macOS: /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs، وفي لينكس: microsoft-edge --auto-open-devtools-for-tabs.

مهم مع حذاء- إذا قمت بتمكين تحسين بدء التشغيل، فقم بتعطيله في edge://settings/system لكي يعمل الاختصار؛ يمكنك أيضًا تعطيل F12 من فتح DevTools في نفس القسم إذا كنت لا تريد أن يعمل هذا الاختصار.

الواجهة والتخطيط والتخصيص

• يتم تنظيم واجهة المستخدم DevTools في منطقتين رئيسيتينشريط النشاط (أعلى أو يسار) ولوحة "المعاينة السريعة" (أسفل، مع زر Esc). يُركّز شريط النشاط الوصول إلى الأدوات والإعدادات والوثائق؛ بينما تتيح لك "المعاينة السريعة" فتح أداة ثانية بالتوازي.
• يمكنك إرساء DevTools على اليمين أو اليسار أو الأسفلأو افتحها في نافذة منفصلة. غيّر الموقع من قائمة "تخصيص أدوات التطوير والتحكم بها"، أو باستخدام الأوامريمكن أن يكون شريط النشاط في الأعلى (أفقيًا)، أو على اليسار (رأسيًا)، أو يتكيف تلقائيًا مع القاعدة.
• التكبير المستقل لأدوات التطوير والصفحة:تأكد من التركيز على المنطقة المطلوبة واستخدم Ctrl + / – (كمد على نظام macOS) للتكبير/التصغير، أو Ctrl+0 لإعادة الضبط. من قائمة الأوامر، ابحث عن "تكبير" لإجراء "تكبير"، أو "تصغير"، أو "إعادة ضبط مستوى التكبير".
• أدوات مثبتة وقابلة لإعادة الترتيبتم إصلاح العناصر ولوحة التحكم والمصادر، ولكن يمكنك إضافة الباقي من "أدوات إضافية". إذا كانت المساحة لديك محدودة، ستجد بعضها مُجمّعًا ضمن تلك القائمة. انقر بزر الماوس الأيمن على علامة تبويب لإزالتها أو نقلها إلى "العرض السريع"، والعكس صحيح.

تارية	كيفية القيام بذلك
فتح أداة في شريط النشاط	"المزيد من الأدوات" في شريط النشاط وحدد الأداة المطلوبة
فتح أداة في Quick Look	اضغط على Esc، ثم "المزيد من الأدوات" في الشريط السفلي واختر الأداة
التنقل بين الشريط العلوي والعرض السريع	انقر بزر الماوس الأيمن على علامة التبويب "الأداة" واختر "تحريك لأعلى/لأسفل"
استدعاء أي لوحة حسب الاسم	Ctrl+Shift+P (Cmd+Shift+P) واكتب "إظهار ”

قائمة الأوامر هي اختصارك العالمي (Ctrl+Shift+P): إظهار أو إخفاء اللوحات، وتنفيذ الإجراءات، وتغيير الإعدادات دون الحاجة إلى التنقل عبر القوائم. استخدمه، على سبيل المثال، لفتح "التغييرات" عند تعديل CSS في Elements.

التعديلات والتجاربفي الإعدادات (F1)، غيّر السمة، واللغة، والاختصارات (يوجد إعداد مسبق بنمط Visual Studio Code)، وملفات تعريف الشبكة المحدودة، والمواقع الافتراضية، والأجهزة. في التجارب، فعّل ميزات المعاينة، وإذا كنت ترغب في الحصول على أحدث الميزات، فشغّل Edge Canary.

الأدوات الرئيسية وحالات الاستخدام في الحياة الواقعية

• العناصر: التفتيش مع تراكب نموذج الصندوقفعّل زر الفحص لتحوم فوق الصفحة وتشاهد الأبعاد والحشو والهوامش بالألوان. عدّل HTML وCSS بسرعة، وافرض حالات :hover/:active/:focus، واكتشف تعارضات الوراثة أو الخصوصية.
• محرر CSS مع أدوات إضافية: تفعيل/تعطيل الإعلانات باستخدام مربع اختيار، وعرض خصائص الاختصار لعرض مكوناتها، وإضافة قواعد جديدة، والانتقال إلى الملف/السطر المصدر. في علامات التبويب المرتبطة، ستجد "محسوب"، و"نموذج/شبكات التخطيط/المربع"، و"المصادر" (حسب المتصفح) لعرض القيم والأشكال الهندسية النهائية.
• وحدة التحكم: التنفيذ الفوري والتشخيصتصفية الرسائل، وتقييم التعبيرات آنيًا، ودمجها مع مصحح الأخطاء لفحص حالة الكود عند إيقافه مؤقتًا. أزرار مثل "إيقاف مؤقت عند وجود استثناءات" ترشدك إلى السطر المُشكل؛ وتساعدك عناصر التحكم خطوة بخطوة على فهم سير العمل.
• مصحح الأخطاء/المصادر: نقاط التوقف والرمز القابل للقراءةعيّن نقاط التوقف، وراقب المتغيرات، وتحقق من حزمة النداءات والنطاقات. إذا كان الكود مُصغّرًا، فاستخدم رمز الأقواس المعقوفة. {} لتجميلها وتحويلها إلى شجرة صالحة للملاحة.
• الشبكة: الأشعة السينية للطلبات والأداءافتح علامة تبويب "الشبكة"، وأعد تحميل الصفحة، ثم راجع الأعمدة الأساسية: الحجم (يُحسّن الصور ويُصغّر CSS/JS)، والوقت (يؤثر الخادم والمسافة على ذلك)، والتتالي (ترتيب التحميل ومدته). انقر بزر الماوس الأيمن لتخصيص الأعمدة، وفي التذييل، حدد "إنهاء" لمعرفة الإجمالي.
• نصائح عملية للأداءابدأ بالقياس على الهاتف المحمول دون تخزين مؤقت، واستهدف وقتاً مناسباً يتراوح بين ثانيتين وأربع ثوانٍ؛ أما على سطح المكتب، فكرر العملية دون تخزين مؤقت ومعه. قلّل حجم ملفات CSS/JS لتقليل حجمها، واجمع كل نوع في ملف واحد كلما أمكن لتقليل عدد الطلبات (أدوات مثل Closure Compiler تساعد في ذلك).
• الأداء والذاكرةسجلّ الملفات الشخصية للعثور على الاختناقات، والتخطيطات المُكلفة، والمهام المُستهلكة للوقت. الموقع الأسرع يُحافظ على المستخدمين، ويُحسّن الأداء، والإنتاجية. تحسين محركات البحث (SEO) وعادةً ما يُحوِّل بشكلٍ أفضل. في الذاكرة، يجد التسريبات والأشياء التي لا ينبغي تركها على حالها.
• التطبيق و تخزين:يفحص ويحرر ملفات تعريف الارتباط، والتخزين المحلي، وقاعدة بيانات IndexedDB، وذاكرة التخزين المؤقت. مفيد لتصحيح أخطاء الجلسات، والأعلام، وسياسات الثبات.
• محاكاة الأجهزة والشبكات:التبديل إلى الوضع المحمول وضبط منفذ العرض و DPI، ومحاكاة انقطاع الاتصال بشبكات 3G/4G. اختبر تجربة المستخدم الواقعية دون مغادرة سطح المكتب.
• حالات تصحيح الأخطاء باستخدام وحدة التحكم والمصحح:توقف مؤقتًا، ثم شغّل الخطأ، وسيرشدك Edge إلى السطر الصحيح. استخدم أزرار "الخطوات" لمتابعة التسلسل وتصحيح المتغيرات من وحدة التحكم للتحقق من صحة الحلول فورًا.
• فحص الإعلانات باستخدام DevTools: في تصفية الشبكة حسب ads? للتحقق مما إذا كانت صفحتك تُصدر طلبات. عادةً ما يُشير الخطأ 403 إلى سياسات أو موقع غير مُعتمد؛ بينما يُشير الخطأ 200 بدون عرض إلى مشاكل أمنية. ads.txt. إذا رأيت ERR_BLOCKED_BY_CLIENTربما يكون هناك مانع يمنع التنزيل adsbygoogle.jsتتضمن أخطاء التحقق النموذجية رسائل مثل: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0.
• الاختصارات والقوائم في المتصفحات الأخرىفي فايرفوكس، تجد أدوات الفحص/المصحح/لوحة التحكم ضمن "مطور الويب"؛ أما في سفاري، ففعّل قائمة "التطوير" من التفضيلات > خيارات متقدمة. تشبه فلسفة الاستخدام تلك الموجودة في إيدج وكروم.
• اخبار مع IA في الكرومتشرح ميزة "رؤى وحدة التحكم" أخطاء وحدة التحكم، وتقترح أسبابها، وحلولها الممكنة. يمكن تفعيلها من الإعدادات > "ابتكارات الذكاء الاصطناعي"، وتتطلب استخدام متصفح باللغة الإنجليزية، وأن يكون عمرك أكثر من 18 عامًا، وأن تكون جلسة استخدامك نشطة. جوجل مع المزامنة. يوفر متصفح Edge أدوات مشابهة لشرح الرسائل، ومن الجدير مراجعة آثار الخصوصية: قد تُستخدم بعض بيانات المتصفح والموقع لتحسين النماذج؛ ويمكنك التحكم في هذه الخيارات.

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

أدوات تطوير Edge داخل Visual Studio Code

يدمج ملحق "أدوات Microsoft Edge" أدوات DevTools في VS Code باستخدام متصفح مُدمج (Edge DevTools: المتصفح) وعلامات تبويب الأدوات (العناصر، وحدة التحكم، إلخ). يمكنك فتح صفحة محلية، أو تشغيل مثيل دون تصحيح أخطاء، أو بدء مشروع مع التكوين.

• خيار مباشر لملفات HTML:في VS Code Explorer، انقر بزر الماوس الأيمن فوق .html واختر "فتح باستخدام Edge > فتح المتصفح باستخدام أدوات التطوير". سترى أدوات التطوير في وضع التصحيح بجوار الصفحة المعروضة وشريط التحكم المعتاد (إيقاف مؤقت، خطوة، إعادة تشغيل).
• بدء تشغيل المثيل (بدون تصحيح الأخطاء)افتح عرض "أدوات مايكروسوفت إيدج" في شريط النشاط، ثم انقر على "تشغيل النسخة". سيُفتح Edge DevTools وEdge DevTools: المتصفح، مع عرض الصفحة الرئيسية. في شريط عنوان المتصفح المُدمج، الصق مسارًا محليًا أو عنوان URL (مثل: http://localhost:8080).
• ابدأ المشروع (باستخدام launch.json):إذا كان مجلدك يتطلب خادمًا، فقم بإنشاء ملف التشغيل باستخدام "Generate launch.json" وقم بتحرير مفاتيح "url" باستخدام عنوانك (على سبيل المثال، http://127.0.0.1:8080احفظ واستخدم "بدء المشروع" لفتح التطبيق مباشرةً باستخدام DevTools المضمن.
• تعيين الملفات وتحرير المرآة لـ CSSعندما تتمكن أدوات التطوير من ربط الموارد المُنزّلة بمجلدك المفتوح، تنعكس تغييرات CSS في العناصر في ملفات المصدر المحلية. إذا لم يكن هناك مجلد مطابق أو تم منح الثقة، فألغِ تحديد مربع "تعديل المرآة" للتجربة دون أخطاء، أو افتح المجلد الصحيح وضع علامة عليه بأنه آمن.
• الاختلافات بين عناوين URL ومسارات الملفاتمع المسارات المحلية، يعرف المحرر مكان الكتابة فورًا؛ أما مع عناوين URL البعيدة، فيتعين عليك فتح المجلد الذي يحتوي على المصادر المكافئة لتفعيل المرآة. وإلا، ستتمكن من فحص وتحرير الملف مباشرةً، ولكن دون الحاجة إلى الاستمرار.
• إغلاق الحالات عند الانتهاءمن علامة التبويب (رمز "x")، أو من قسم "الأهداف" في الامتداد، أو بإيقاف التصحيح إذا كان نشطًا. يمكنك أيضًا إغلاق المجلد أو نافذة VS Code لإنهاء جميع الجلسات.
• شيء يستحق التذكر:تتضمن علامة التبويب "Edge DevTools: Browser" شريط محاكاة الجهاز الخاص بها، وهو مفيد لعرض حالات الهاتف المحمول دون مغادرة VS Code، ويمكنك فتح الملفات (مثل .js) من المستكشف أثناء التصحيح لإجراء التصحيحات أثناء التنقل.
• كل ما سبق يترك لك سير عمل قويًاافتح الواجهة بسرعة، وافحصها، وقِسها، وصحح أخطائها، وخصّصها حسب رغبتك. إذا دمجتَ VS Code أيضًا، يمكنك التكرار باستخدام التحرير والتعيين المحلي. وإذا كنت تعمل مع الإعلانات أو واجهات برمجة التطبيقات، فستُظهر لك علامة تبويب الشبكة ووحدة التحكم الموقع الدقيق لكل مشكلة.