مقدمة
Google Chrome هو متصفّح ويب غني وفعّال، وهو رائِد في ما يتعلّق بإمكانيات التطبيقات على الويب. لقد عملت Google جاهدة لتوفير تجربة تصفّح سريعة جدًا ومستقرة جدًا وغنية بالميزات للمستخدمين النهائيين. حرصت Google أيضًا على أن يحصل المطوّرون مثلك على تجربة رائعة باستخدام Chrome. تتوفّر "أدوات المطوّرين" في Chrome وSafari، وهي تتيح لمطوّري الويب والمبرمجين الوصول إلى التفاصيل الداخلية للمتصفِّح وتطبيقات الويب.
تشكّل "أدوات المطوّرين" جزءًا من مشروع Webkit المفتوح المصدر. تنطبق معظم المناقشات الواردة في هذه المقالة على كل من Google Chrome وSafari. ومع ذلك، تم التقاط لقطات الشاشة باستخدام الإصدار 6 من Google Chrome، لذا قد تكون هناك اختلافات طفيفة في المتصفّح.
في هذه المقالة، سنقدّم نظرة عامة على "أدوات المطوّرين" ونوضّح الميزات الأكثر شيوعًا وفائدةً. جمهورنا المستهدَف هم مطوّرو الويب الذين لم يسبق لهم الاطّلاع على "أدوات المطوّرين" أو لم يسبق لهم الاطّلاع عليها بعد. ومع ذلك، نثق بأنّك ستستفيد من هذه المقالة حتى لو كنت من مطوّري الويب المتمرّسين.
إذا لم تتطابق نسخة "أدوات المطوّرين" مع لقطات الشاشة الواردة في هذه المقالة، ننصحك بالترقية إلى الإصدار 5 حتى تتمكّن من اتّباع الخطوات والوصول إلى جميع الميزات الموضّحة هنا.
نظرة عامة
بشكل عام، تتوفّر ثمانية مجموعات رئيسية من الأدوات في "أدوات المطوّرين"، ويتم توسيع الإمكانات مع كل إصدار. يوفّر Chrome 5 الآن "العناصر" و"الموارد" و"النصوص البرمجية" و"المخطط الزمني" و"الملفات الشخصية" و"التخزين" و"عمليات التدقيق" و"وحدة التحكّم".
العناصر
تتيح لك أداة "العناصر" الاطّلاع على صفحة الويب كما يراها المتصفّح. وهذا يعني أنّه باستخدام أداة "العناصر"، يمكنك الاطّلاع على تنسيق HTML الأوّلي وأنماط CSS الأوّلية ونموذج معالجة المستندات وإجراء تعديلات على أيٍّ منهما في الوقت الفعلي.
الموارد
استخدِم أداة "الموارد" لمعرفة المكوّنات التي تطلبها صفحة الويب أو التطبيق من خوادم الويب، ومدة هذه الطلبات، ومقدار معدل نقل البيانات المطلوب. يمكنك أيضًا عرض رؤوس طلب HTTP واستجابته لكل مورد من مواردك. أداة "المراجع" مثالية لمساعدتك في تسريع أوقات تحميل الصفحات.
النصوص البرمجية
للاطّلاع على JavaScript لصفحة معيّنة، ستستخدم أداة النصوص البرمجية. يمكنك هنا العثور على قائمة بالنصوص البرمجية المطلوبة للصفحة بالإضافة إلى أداة تصحيح أخطاء النصوص البرمجية المزوّدة بميزات كاملة. يمكنك أيضًا تغيير JavaScript أثناء التشغيل.
المخطط الزمني
لتحليل التوقيت والسرعة المتقدّمَين، تقدّم أداة "المخطط الزمني" إمكانية الوصول بشكل مفصّل إلى الأنشطة المختلفة التي يجريها Chrome في الخلفية. يمكنك معرفة الوقت الذي يستغرقه المتصفّح في معالجة أحداث نموذج DOM وعرض تنسيقات الصفحة ورسم النافذة.
ملفات التعريف
تساعدك أداة "الملفات الشخصية" في تسجيل أداء النصوص البرمجية JavaScript وتحليله. على سبيل المثال، يمكنك معرفة الدوالّ التي تستغرق وقتًا أطول في التنفيذ والتركيز على النقاط التي يجب تحسينها بالضبط.
مساحة التخزين
تتطلّب تطبيقات الويب الحديثة ثباتًا أكبر من ملفات تعريف الارتباط، وتساعدك أداة "التخزين" في تتبُّع مساحة التخزين في المتصفّح المحلي وإجراء طلبات بحث فيها وتصحيح الأخطاء فيها. يمكن لهذه الأداة عرض البيانات المخزّنة في قواعد البيانات المحلية ومساحة التخزين المحلية ومساحة تخزين الجلسات وملفات تعريف الارتباط وإجراء طلبات بحث عنها.
التدقيق
تشبه أداة "التدقيق" الاستعانة بمستشار مختص بتحسين الويب يجلس بجانبك. يمكن لهذه الأداة تحليل الصفحة أثناء تحميلها وتقديم اقتراحات وتحسينات لتقليل وقت تحميل الصفحة وزيادة وقت الاستجابة المُدرَك (والحقيقي).
وحدة التحكّم
أخيرًا وليس آخرًا، تقدّم "أدوات المطوّرين" وحدة تحكّم كاملة الميزات. من وحدة التحكّم، يمكنك إدخال JavaScript عشوائي والتفاعل مع صفحتك آليًا.
بدء التشغيل
من السهل بدء أدوات المطوّرين أثناء استخدام متصفّح Chrome.
في أي نظام تشغيل، يمكنك ببساطة النقر بزر الماوس الأيمن على أي عنصر في الصفحة واختيار "فحص العنصر" من قائمة السياقات. سيؤدي ذلك إلى فتح "أدوات المطوّرين" والانتقال مباشرةً إلى العنصر الذي نقرت عليه.
للاطّلاع على هذا الإجراء، يُرجى الانتقال إلى http://www.google.com في متصفّح Chrome. انقر بزرّ الماوس الأيمن على شعار Google، وستظهر لك الخيارات التالية:
سيؤدي اختيار "فحص العنصر" إلى عرض "أدوات المطوّرين" التي من المفترض أن تظهر على النحو التالي:
لاحظ كيف تم فتح "أدوات المطوّرين" داخل علامة التبويب "العناصر" والتنقّل تلقائيًا إلى علامة <img> لشعار Google وتم تمييزها. وهذا مفيد جدًا عندما تريد معرفة رمز HTML الذي أنشأ عنصر صفحة معيّنًا.
يمكنك أيضًا فتح "أدوات المطوّر" باستخدام اختصار بسيط على لوحة المفاتيح. استنادًا إلى نظام التشغيل الذي تستخدمه، جرِّب ما يلي:
- على نظامَي التشغيل Windows وLinux، اختَر مفتاحَي
Control-Shift-J. - على جهاز Mac، اختَر مفاتيح
Command-Option-J.
أخيرًا، يمكنك اختيار فتح الأدوات من قائمة المتصفّح الرئيسية.
على جهاز Mac، اختَر "عرض" (View) ثم "مطوّر" (Developer) ثم "أدوات المطوّرين" (Developer Tools) من شريط قوائم التطبيق الرئيسي.
على جهاز كمبيوتر يعمل بنظام التشغيل Windows، عليك استخدام قائمة الصفحة في أعلى يسار الصفحة، ثم اختيار "المطوّر"، ثم "أدوات المطوّرين".
الآن بعد أن أصبحت "أدوات المطوّرين" مفتوحة وجاهزة، لنبدأ باستكشاف العناصر على الصفحة الرئيسية لموقع Google الإلكتروني.
العناصر
علامة التبويب الأولى في "أدوات المطوّرين" هي "العناصر". هذه هي نافذتك على بنية صفحة الويب، ويتم عرضها بالشكل الذي يظهر به للمتصفح.
تصفُّح نموذج DOM
ستنتقل غالبًا إلى علامات التبويب "العناصر" عندما تحتاج إلى تحديد مقتطف HTML لبعض جوانب الصفحة. على سبيل المثال، قد تريد معرفة ما إذا كانت الصورة تتضمّن سمة معرّف HTML وما هي قيمة هذه السمة.
في بعض الأحيان، تكون علامة التبويب "العناصر" طريقة أفضل "لعرض المصدر" لصفحة معيّنة. في علامة التبويب "العناصر"، سيتم تنسيق نموذج DOM للصفحة بشكل جميل، ما يعرض لك عناصر HTML بسهولة، بالإضافة إلى أسلافها وسلالات تلك العناصر. غالبًا ما تحتوي الصفحات التي تزورها على ملف HTML مصغر أو غير مُرتَّب، ما يجعل من الصعب معرفة بنية الصفحة. تمثل علامة التبويب "العناصر" الحلّ الذي تحتاجه لعرض البنية الأساسية الفعلية للصفحة.
على سبيل المثال، في ما يلي ناتج "عرض المصدر" للصفحة الرئيسية في Google.
من الصعب قراءة المصدر أعلاه لأنّه تم تحسينه وتصغيره. هذا التنسيق جيد للعملاء والخوادم، ولكنه صعب على المطوّرين.
بدلاً من ذلك، عندما تريد قراءة مصدر صفحة، استخدِم علامة التبويب "العناصر" لعرض تسلسل هرمي للعناصر مُبرز بتنسيق جميل وبنية نحوية.
تتيح لك علامة التبويب "العناصر" أيضًا تصفُّح الأنماط والمقاييس والسمات ومستمعِي الأحداث والتفاعل معها، وفي بعض الأحيان تغييرها لأي عنصر على الصفحة.
تصفُّح الأنماط
تجعل الطبيعة المتسلسلة لصفحات CSS متصفّح الأنماط في علامة التبويب "العناصر" مفيدًا جدًا. في بعض الأحيان، يتم تجميع الأنماط مع بعضها ويظهر محتوى مرئي غير مقصود. تساعدك معرفة قاعدة الأسلوب التي يطبّقها المتصفّح على العنصر في تصحيح أخطاء هذه المشكلة.
سيؤدي النقر على أي عنصر في علامة التبويب "العناصر" إلى عرض جميع الأنماط المرتبطة بهذا العنصر.
ستلاحظ في لقطة الشاشة أعلاه أنّه يمكننا معرفة جميع سمات التصميم التي يتم تطبيقها. على سبيل المثال، تأتي قيمة الحشو مباشرةً من سمة style لعنصر <img>. ومع ذلك، يتم الحصول على العرض والارتفاع من السمات الأصلية لكل منهما. من المثير للاهتمام أنّه يمكنك معرفة أنّ هناك أنماطًا مكتسَبة أيضًا من علامة <center> وعلامة <body> وغيرها.
على الرغم من أنّه من الرائع الاطّلاع على الأنماط الفردية ومصدرها، من المفيد أيضًا الاطّلاع على المجموعة النهائية من الأنماط بعد احتسابها وتطبيقها على العنصر. يمكنك الاطّلاع على المنتج النهائي من خلال اختيار قائمة "النمط المحسوب"، كما هو موضّح في لقطة الشاشة أدناه.
بعد ذلك، سنلقي نظرة سريعة على الميزات الأخرى التي تقدّمها علامة التبويب "العناصر". سنتناول ما يلي بمزيد من التفاصيل في مقالات مستقبلية.
نموذج العلبة
يمكنك الاطّلاع على نموذج المربّع أثناء تطبيقه على العنصر المحدّد من خلال اختيار قائمة "المقاييس":
خصائص العنصر
يمكنك الاطّلاع على جميع سمات العنصر، كما ستظهر لـ JavaScript وDOM، من خلال اختيار قائمة "السمات":
أدوات معالجة الأحداث
أخيرًا، يمكنك أيضًا الاطّلاع على مستمعي الأحداث المرتبطين بالعنصر أو الذين ينبثقون من خلاله من خلال قائمة "مستمعو الأحداث":
ملخّص
تتوفّر الكثير من الوظائف من خلال علامة التبويب "العناصر"، وستتعمّق المقالات المستقبلية في القوائم الفردية.
يجب استخدام علامة التبويب "العناصر" عندما تريد الاطّلاع على شكل الصفحة للمتصفّح نفسه. يمكن الإجابة بسرعة وسهولة عن المشاكل الشائعة، مثل "كيف يتم احتساب هذا النمط؟" أو "ما هي علامات HTML التي أنشأت هذا المكوّن؟" من خلال علامة التبويب "العناصر".
يمكنك اعتبار علامة التبويب "العناصر" بمثابة أداة "عرض المصدر" فائقة الجودة، والحصول على رؤية دقيقة جدًا لصفحتك.
بعد التحقيق في الصفحة، قد تتساءل عن كيفية ظهور رمز HTML وCSS والصور في الصفحة في المقام الأول. توضِّح لك علامة التبويب "الموارد"، الموضّحة أدناه، كيفية تواصل متصفّح العميل وخادم الويب لإرسال هذه الموارد.
الموارد
بعد أن يصبح تطبيقك يعمل، يجب أن تكون خطوتك التالية هي تحسين أداء الشبكة ومعدّل نقل البيانات. يجب أن تسعى إلى نقل تطبيقك من الخادم إلى العميل بأسرع وقت ممكن وبأكبر قدر ممكن من الكفاءة. سيشكرك المستخدمون على سرعة تحميل الصفحات، وستوفّر المال على عرض النطاق ومصادر الخادم، وستحصل أيضًا على ترتيب أفضل في ترتيبات نتائج البحث من Google (التي تأخذ الآن سرعة الموقع الإلكتروني في الاعتبار).
علامة التبويب "الموارد" في "أدوات المطوّرين" هي نافذتك على عملية التواصل بين خادم الويب ومتصفّح العميل. يمكنك الاطّلاع على جميع الموارد التي يطلبها المتصفّح (وهذا دائمًا أمر مفاجئ جدًا)، والوقت الذي يستغرقه تلقّيها من الخادم، وكمية النطاق الترددي المستخدَمة أثناء النقل.
من المفارقات أنّ تشغيل علامة التبويب "الموارد" يؤثّر في أداء تحميل الصفحة، لذا يكون غير مفعّل تلقائيًا. في المرة الأولى التي تصل فيها إلى الوظيفة، عليك تفعيلها للصفحة التي تطّلع عليها.
أنصحك بإبقاء الخيار التلقائي "تفعيل هذه الميزة لهذه الجلسة فقط" محدّدًا، لأنّك لا تريد التعرّض لعقوبة صغيرة في الأداء بدون داعٍ. بعد النقر على "تفعيل تتبُّع الموارد"، ستتم إعادة تحميل الصفحة، وستتولى "أدوات المطوّرين" مراقبة الموارد المُرسَلة من الخادم وعرضها.
تعرض لقطة الشاشة التالية الموارد المطلوبة والمُحمَّلة للصفحة الرئيسية في Google.
تتوفّر الكثير من المعلومات على هذه الشاشة، لذا لنطّلع عليها بالتفصيل.
السلوك التلقائي هو عرض الوقت الذي استغرقه طلب جميع موارد الصفحة وتحميلها. قد تفاجئك النتائج عند الانتقال إلى أسفل قائمة "الموارد"، لأنّك قد لا تعرف عدد الطلبات الفردية التي يقدّمها العميل. يمكن أن يؤثّر عدد كبير من الطلبات الواردة من العميل بشكلٍ كبير في الأداء. إنّ معرفة ما هو مطلوب بالضبط هو الخطوة الأولى في التحسين والحدّ من استخدام الموارد في نهاية المطاف.
إذا كنت مهتمًا بالصور أو جداول الأنماط فقط، يمكنك فلترة نوع المورد باستخدام القائمة مباشرةً أسفل نافذة علامة التبويب الرئيسية.
وستتعرّف أيضًا على ترتيب طلب الموارد. باستخدام عرض المخطط الزمني، يمكنك فهم سبب ظهور عناصر معيّنة على صفحتك في وقت لاحق عن غيرها.
بعد الحصول على نظرة عامة على جميع الموارد المطلوبة وكيفية تشكيلها للمخطط الزمني الكامل للطلب، ستحتاج إلى التوغّل في الموارد الفردية.
إذا لاحظت أنّه يتم طلب بعض الموارد في كل مرة تصل فيها إلى الصفحة، هذا يعني أنّه لم يتم ضبط رؤوس التخزين المؤقت بشكل صحيح. يمكنك عرض جميع عناوين المرجع عن طريق النقر على المرجع في القائمة اليمنى.
استخدِم ميزة عرض "العناوين" للتأكّد من ضبط رمز استجابة HTTP المتوقّع وتقديم العناوين المناسبة. على سبيل المثال، إذا كان المورد يتغيّر نادرًا أو لا يتغيّر أبدًا، يجب أن يضبط الخادم رأس Expires في المستقبل البعيد. سيُعلم ذلك المتصفّح بعدم طلب المرجع مرة أخرى إلى ذلك التاريخ. ويؤدي ذلك إلى تقليل عدد عمليات الاتصال ببروتوكول HTTP المطلوبة لصفحتك، ما يؤدي إلى تسريع موقعك الإلكتروني.
ملخّص
هناك الكثير من المعلومات في علامة التبويب "المراجع"، وسنتناولها في مقالة مستقبلية.
استخدِم علامة التبويب "الموارد" للاطّلاع على كيفية تواصل متصفّح العميل مع خادم الويب. باستخدام هذه المعلومات، بما في ذلك وقت الطلب وحجم الطلب وترتيب الطلب، يمكنك إجراء تحسينات ذكية للحد من حمولة الخادم والتكاليف وزيادة السرعة وتحسين تجربة المستخدم.
إنّ السرعة مهمة جدًا لموقعك الإلكتروني ومستخدميك ومحركات البحث. بعد تقليل عدد الموارد وحجمها وبدء محادثات HTTP المناسبة، تكون الخطوة التالية هي التحقيق في النصوص البرمجية التي يتم تشغيلها في صفحتك وتحسينها. لحسن الحظ، تؤدي علامة التبويب "النصوص البرمجية"، التي سنناقشها بعد ذلك، إلى تحقيق ذلك.
موارد إضافية
لمزيد من المعلومات حول "أدوات المطوّرين"، ننصحك بما يلي:
- فيديو عرض أدوات مطوّري برامج Chrome وشرائح العرض من مؤتمر Google I/O لعام 2010
- الدليل التعليمي لأدوات مطوّري برامج Chrome
يمكنك أيضًا زيارة html5rocks.com للاطّلاع على الجزء 2 من هذه المقالة، بالإضافة إلى الكثير من المحتوى الرائع الآخر حول HTML5 وChrome.