Home-theater-designers
يعد Chrome DevTools أحد الأصول الأساسية للمطورين. بينما تقدم المتصفحات الأخرى أدوات مفيدة جدًا لاستكشاف الأخطاء وإصلاحها ، فإن Chrome DevTools يستحق اهتمامك بسبب واجهته متعددة الوظائف وشعبيته.
Chrome هو المتصفح الأكثر شيوعًا للمطورين بسبب مجموعته القوية من أدوات تصحيح الأخطاء. يعد استخدام Chrome DevTools أمرًا سهلاً ، لكنك تحتاج إلى فهم كيفية عمله لتحقيق أقصى استفادة منه.
كيف تعمل أدوات مطوري Chrome
تتيح لك Chrome DevTools حل المشكلات على موقع الويب عبر وحدة التحكم في الأخطاء وأدوات التصحيح والمراقبة الأخرى. يكشف استخدام DevTools عن ثغرات الواجهة الأمامية ويتيح لك مراقبة كيفية ظهور موقع الويب الخاص بك على الأجهزة المحمولة والأجهزة اللوحية.
باستخدام DevTools ، يمكنك إجراء تعديلات في الوقت الفعلي على كود موقع الويب ، مثل JavaScript و HTML و CSS ، والحصول على نتائج فورية للتغييرات التي أجريتها.
لا تؤثر التغييرات التي تجريها عبر DevTools على موقع الويب بشكل دائم. إنهم يعرضون النتيجة المتوقعة مؤقتًا فقط كما لو كنت قد طبقتها على شفرة المصدر الفعلية. يتيح لك ذلك إيجاد طرق لجعل موقع الويب الخاص بك يتم تحميله بشكل أسرع ويجعل من السهل التخلص من الأخطاء.
كيفية الوصول إلى Chrome DevTools
يمكنك الوصول إلى Chrome DevTools بعدة طرق. لفتح أدوات المطور باستخدام طريقة الاختصار في نظام التشغيل Mac OS ، اضغط على Cmd + Opt + I . إذا كنت تستخدم نظام التشغيل Windows ، فاضغط على Ctrl + Shift + I مفاتيح على لوحة المفاتيح.
بدلاً من ذلك ، يمكنك الوصول إلى أدوات مطور Chrome من خلال النقر على النقاط الثلاث في الزاوية العلوية اليمنى من الشاشة. رئيس ل أدوات أكثر واختر ادوات المطورين . خيار آخر هو النقر بزر الماوس الأيمن على صفحة الويب والنقر فوق ملف فحص اختيار.
استخدام أدوات مطوري Chrome لتشخيص موقع الويب
تقدم Chrome DevTools عدة طرق لتعديل واستكشاف أخطاء صفحة الويب وإصلاحها. دعنا نلقي نظرة على بعض الطرق التي يمكن أن تساعدك بها DevTools.
انظر كيف يبدو موقع الويب الخاص بك على الهاتف الذكي
بمجرد تبديل متصفح Chrome إلى وضع المطور ، فإنه يعرض نسخة نصف الحجم من صفحة الويب الخاصة بك. ومع ذلك ، لن يمنحك هذا رؤية حقيقية لما سيبدو عليه الهاتف الذكي أو الجهاز اللوحي.
لحسن الحظ ، بالإضافة إلى تعيين حجم شاشة صفحة الويب ، يتيح لك Chrome DevTools التبديل بين أنواع وإصدارات شاشات الجوال المختلفة أيضًا.
للوصول إلى هذا الخيار ، قم بالتبديل إلى ملف فحص الوضع. بعد ذلك ، انقر فوق متجاوب القائمة المنسدلة في الزاوية العلوية اليسرى من DevTools وحدد جهازك المحمول المفضل. ثم يتم عرض صفحة الويب وضبطها لتلائم حجم الجهاز المحمول الذي حددته.
الصوت على نظام التشغيل windows 10 لا يعمل
الوصول إلى الملفات المصدر لصفحة ويب
يمكنك الوصول إلى الملفات التي تشكل صفحة ويب عبر Chrome DevTools. للوصول إلى هذه الملفات ، انقر فوق مصادر الخيار في الجزء العلوي من قائمة DevTools. هذا يفضح نظام ملفات موقع الويب ويمنحك أيضًا التحرير.
يمكنك أيضًا البحث عن ملفات المصدر ، والتي يمكن أن تكون مفيدة عند التعامل مع صفحة ويب بها العديد من الموارد. للبحث عن ملف مصدر عبر DevTools ، انقر فوق ملف بحث الخيار فقط فوق وحدة التحكم.
ومع ذلك ، إذا لم تتمكن من العثور على ملف بحث الخيار الأفضل هو استخدام اختصارات لوحة المفاتيح. في نظام التشغيل Mac OS ، اضغط على Cmd + Opt + F مفاتيح للبحث عن ملف المصدر. إذا كنت تستخدم نظام التشغيل Windows ، فاضغط على Ctrl + Shift + F مفتاح للوصول إلى شريط البحث عن ملف المصدر.
قم بإجراء عمليات تحرير مباشرة على صفحة ويب
أحد الأغراض الرئيسية لاستخدام DevTools هو تنفيذ ملف تعديل فوري مزيف للعناصر على صفحة ويب . بمجرد التبديل إلى أدوات المطور ، يمكنك تحرير محتوى HTML لموقع الويب بالنقر فوق عناصر اختيار. بعد ذلك ، انقر بزر الماوس الأيمن فوق أي نقطة تريد تطبيق التغييرات عليها داخل محرر الكود وحدد تحرير كملف هتمل .
لتحرير خصائص CSS غير المضمنة ، حدد مصادر . بعد ذلك ، حدد ملف CSS الذي تريد تحريره. ضع المؤشر على خط من اختيارك داخل وحدة التحكم في التعليمات البرمجية لإجراء تعديل مباشر. يمنحك القيام بذلك ملاحظات فورية حول أي تغييرات في النمط تقوم بتطبيقها على صفحة الويب.
لاحظ أنه عندما تقوم بتحرير صفحة عبر DevTools ، فإن إعادة تحميل الصفحة على متصفحك تعيدها إلى شكلها الأصلي ، ويكون التعديل مرئيًا لك فقط. لا يؤثر التحرير عبر DevTools على التشغيل السلس لهذا الموقع أو استخدامه للمستخدمين الآخرين.
تصحيح أخطاء كود JavaScript باستخدام DevTools Console
واحدة من أفضل الطرق لتصحيح أخطاء JavaScript هي استخدام أدوات مطور Chrome. يمنحك تقريرًا مباشرًا عن البرامج النصية غير الصالحة بالإضافة إلى الموقع الدقيق للخطأ.
من الممارسات الجيدة إبقاء DevTools مفتوحًا دائمًا أثناء تصميم موقع ويب باستخدام JavaScript. على سبيل المثال ، تشغيل ملف console.log () أمر JavaScript في مجموعة من التعليمات يعرض نتيجة ذلك السجل في وحدة تحكم DevTools إذا تم تشغيل البرنامج بنجاح.
بشكل افتراضي ، تبلغ وحدة التحكم عن أي مشكلات JavaScript على موقع الويب الخاص بك. يمكنك العثور على وحدة التحكم في الجزء السفلي من DevTools أو الوصول إليها بالنقر فوق وحدة التحكم الخيار في الجزء العلوي من نافذة Chrome DevTools.
مراقبة تحميل الموارد من قاعدة بيانات
بالإضافة إلى تصحيح أخطاء JavaScript ، يمكن أن توفر لك وحدة التحكم أيضًا تفاصيل الموارد التي لا يتم تحميلها بشكل صحيح من قاعدة بيانات موقع الويب.
على الرغم من أن هذه ليست دائمًا أفضل طريقة لتصحيح أخطاء الخلفية ، إلا أنها لا تزال تخبرك بالموارد التي تقوم بإرجاع ملف 404 خطأ بعد تشغيل استعلام قاعدة بيانات لهذه العناصر.
الموضوعات ذات الصلة: أخطاء مواقع الويب الشائعة وما تعنيه
قم بتبديل اتجاه أدوات مطوري Chrome
لتغيير موضع أدوات مطور Chrome ، انقر فوق نقاط القائمة الثلاث داخل DevTools (وليس النقطة الرئيسية في المتصفح). ثم حدد موقعك المفضل من جانب قفص الاتهام اختيار.
قم بتثبيت ملحقات Chrome DevTools
يمكنك أيضًا تثبيت ملحقات خاصة بإطار عمل أو لغة تعمل مع Chrome DevTools. يتيح لك تثبيت هذه الإضافات تصحيح أخطاء صفحة الويب الخاصة بك بشكل أكثر كفاءة.
يمكنك الوصول إلى قائمة الامتدادات المتاحة لـ Chrome DevTools في Chrome ملحقات DevTools المميزة صالة عرض.
تحقق من وجود مشكلات الأمان على موقع الويب
يتيح لك Chrome DevTools تقييم مدى أمان موقع الويب الخاص بك ، بناءً على معايير مثل مدى توفر شهادات أمان الويب ومدى أمان الاتصال ، من بين أمور أخرى. للتحقق مما إذا كان موقع الويب الخاص بك آمنًا ، انقر فوق حماية الخيار في الجزء العلوي من DevTools.
ال حماية يمنحك علامة التبويب نظرة عامة على تفاصيل أمان موقع الويب الخاص بك ويخبرك بأي تهديدات محتملة.
تدقيق موقع الويب الخاص بك
يحتوي Chrome DevTools على ميزة تتيح لك التحقق من الأداء العام لموقع الويب الخاص بك بناءً على معلمات محددة.
للوصول إلى هذه الميزة ، حدد منارة الخيار في الجزء العلوي من نافذة DevTools. بعد ذلك ، حدد المعلمات التي تريد التحقق منها ، ثم حدد إما متحرك أو سطح المكتب خيارات لمعرفة كيفية أداء صفحة الويب الخاصة بك على أنظمة أساسية مختلفة.
بعد ذلك ، انقر فوق انشاء تقرير لإجراء تحليل لصفحة الويب الخاصة بك بناءً على المعلمات التي حددتها مسبقًا.
يمكنك أيضًا تقييم وقت التشغيل أو أداء التحميل لموقع ويب بالنقر فوق أداء اختيار. لإجراء اختبار ، انقر فوق الرمز الموجود بجوار ملف انقر فوق زر التسجيل خيار لإجراء تحليل وقت التشغيل. بدلاً من ذلك ، انقر فوق زر إعادة التحميل الموجود أسفله لتقييم أداء وقت التحميل. انقر فوق قف لإيقاف المحلل وعرض النتائج.
استفد من Chrome DevTools
بناءً على ما تحتاج إليه ، تتيح لك Chrome DevTools القيام بأكثر من مجرد تصحيح أخطاء موقع الويب. لحسن الحظ ، فإن DevTools سهل الاستخدام للمبرمجين من جميع مستويات المهارة. يمكنك حتى تعلم بعض أساسيات تطوير الواجهة الأمامية للموقع من خلال البحث عن الكود المصدري لمواقع الويب التي تزورها.
كيفية تنزيل مقاطع الفيديو المتدفقة من أي موقع ويب
قد تكتشف أيضًا بعض الخيارات الأخرى التي لم نناقشها في هذه المقالة. لذلك ، لا تتردد في اللعب بالميزات المتاحة. إلى جانب ذلك ، فإن تعديل هذه الميزات لا يضر بالموقع الإلكتروني قليلاً.
يشارك يشارك سقسقة بريد الالكتروني كيفية استخدام Chrome OS على Raspberry Piلا تستطيع شراء جهاز Chromebook؟ هل تبحث عن بديل لـ Raspbian؟ إليك كيفية تثبيت إصدار من Chrome OS على Raspberry Pi الخاص بك.
اقرأ التالي مواضيع ذات صلة- إنترنت
- برمجة
- لغة البرمجة
- تطوير الشبكة
- جافا سكريبت
- جوجل كروم
Idowu شغوف بأي شيء التكنولوجيا الذكية والإنتاجية. في أوقات فراغه ، يلعب بالبرمجة ويتحول إلى رقعة الشطرنج عندما يشعر بالملل ، لكنه أيضًا يحب الابتعاد عن الروتين من حين لآخر. يحفزه شغفه بإظهار طريقة حول التكنولوجيا الحديثة للناس على كتابة المزيد.
المزيد من Idowu Omisolaاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك