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