مقدمة
Google Chrome هو متصفح ويب ثري وفعّال، رائد في ما هو ممكن للتطبيقات على الويب. عملت Google جاهدة لتقديم تجربة تصفح مليئة بالميزات وسريعة للغاية وثابتة للغاية للمستخدمين النهائيين. تضمنت Google أيضًا أنّ مطوّري البرامج مثلك يحصلون على تجربة رائعة مع Chrome. تتيح أدوات المطوّرين، المتوفرة في حزمة واحدة ومتوفّرة في متصفّح Chrome وSafari، لمطوّري الويب والمبرمجين إمكانية الوصول إلى التفاصيل الداخلية للمتصفّح وتطبيق الويب.
تُعدّ أدوات المطوّرين جزءًا من مشروع Webkit مفتوح المصدر. تنطبق معظم المناقشة في هذه المقالة على كل من Google Chrome وSafari. ومع ذلك، تم أخذ لقطات الشاشة باستخدام الإصدار Google Chrome 6، لذلك قد تكون هناك اختلافات طفيفة في المتصفح الذي تستخدمه.
في هذه المقالة، سنلقي نظرة عامة على "أدوات المطوّرين" وسنوضّح ميزاتها الأكثر رواجًا وفائدةً. جمهورنا المستهدف هم مطوِّرو البرامج على الويب الذين لم يعرفوا أدوات المطوّرين أو لم يتحقّقوا منها بعد. ومع ذلك، فإننا على ثقة من أنك ستستفيد من نصيحة أو نصيحة، حتى لو كنت مطور برامج ويب يتمتع بالخبرة.
إذا كانت النسخة الافتراضية من "أدوات المطوّرين" لا تتطابق تمامًا مع لقطات الشاشة الواردة في هذه المقالة، ننصحك بالترقية إلى الإصدار 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 متصفح الأنماط في علامة تبويب "العناصر" مفيدًا للغاية. وفي بعض الأحيان، يتم تصغير الأنماط على نفسها وتظهر عناصر مرئية غير مقصودة. تساعد معرفة قاعدة النمط التي يطبقها المتصفح على العنصر في تصحيح مثل هذه المشكلة.
سيؤدي النقر فوق أي عنصر في علامة التبويب "العناصر" إلى عرض جميع الأنماط المرتبطة بهذا العنصر.
سترى في لقطة الشاشة أعلاه أنّ بإمكاننا التعرّف على جميع سمات النمط التي يتمّ تطبيقها. على سبيل المثال، تأتي المساحة المتروكة مباشرةً من سمة نمط العنصر <img>. ومع ذلك، يأتي العرض والارتفاع من السمات الأصلية ذات الصلة. يمكنك معرفة أنّ هناك أنماطًا مكتسَبة أيضًا من العلامة <center> والعلامة <body> وغيرها.
في حين أنه من الرائع رؤية الأنماط الفردية ومصدرها، فمن المفيد أيضًا مشاهدة المجموعة النهائية من الأنماط بعد حسابها وتطبيقها على العنصر. يمكنك الاطّلاع على المنتج النهائي من خلال النقر على قائمة Computed Style، كما هو موضّح في لقطة الشاشة أدناه.
بعد ذلك، سنلقي نظرة سريعة على الميزات الأخرى التي تقدمها علامة التبويب "العناصر". سنتناول ما يلي بمزيد من التفصيل في المقالات المستقبلية.
نموذج المربع
يمكنك مشاهدة نموذج المربع حيث يتم تطبيقه على العنصر المحدد من خلال تحديد قائمة المقاييس:
خصائص العنصر
يمكنك عرض كل خصائص العنصر، كما تظهر لكل من JavaScript وDOM، وذلك من خلال تحديد القائمة "Properties" (الخصائص):
أدوات معالجة الأحداث
وأخيرًا، يمكنك أيضًا رؤية عناصر معالجة الحدث المرتبطة بالعنصر أو عرض الفقاعة التفسيرية من خلال قائمة "أدوات معالجة الأحداث":
ملخّص
هناك الكثير من الوظائف المتاحة عبر علامة تبويب "Elements" (العناصر)، وستتعمق المقالات المستقبلية في القوائم الفردية.
يجب عليك استخدام علامة تبويب "العناصر" عندما تريد أن ترى كيف تبدو الصفحة للمتصفح نفسه. يتم الإجابة عن المشكلات الشائعة مثل "كيف تم احتساب هذا النمط؟" أو "ما علامات HTML التي أدت إلى إنشاء هذا المكوِّن؟" بسرعة وسهولة عبر علامة تبويب "العناصر".
اعتبر علامة التبويب "العناصر" بمثابة "مصدر عرض" uber، واحصل على مستوى رؤية شديد الدقة لصفحتك.
بعد الانتهاء من فحص الصفحة، قد تتساءل عن كيفية وصول HTML وCSS والصور إلى هذه الصفحة في المقام الأول. توضح علامة تبويب "الموارد"، الموضحة في ما يلي، كيفية اتصال متصفح العميل وخادم الويب لإرسال هذه الموارد.
المراجِع
عند عمل التطبيق، يجب أن تكون خطوتك التالية هي تحسين أداء الشبكة ومعدل نقل البيانات. يجب أن تهدف إلى جعل عملية نقل التطبيق، من الخادم إلى العميل، سريعة وفعّالة قدر الإمكان. سيشكرك المستخدمون على سرعة تحميل الصفحات، وسيوفّرون المال من خلال معدل نقل البيانات وموارد الخادم، كما سيؤدي ذلك أيضًا إلى تحقيق نتيجة أفضل في ترتيبات نتائج البحث في Google (التي تراعي الآن سرعة الموقع).
علامة تبويب "الموارد" في أدوات المطور هي نافذتك على الاتصال بين خادم الويب ومتصفح العميل. ويمكنك رؤية جميع الموارد التي يطلبها المتصفح (وهذا أمر مدهش للغاية دائمًا!) والوقت الذي يستغرقه تلقيها من الخادم ومقدار النطاق الترددي المستخدم أثناء النقل.
ومن ناحية أخرى، يؤثر تشغيل علامة التبويب "الموارد" في أداء تحميل الصفحة، لذلك يتم إيقافه افتراضيًا. ستحتاج إلى تفعيلها للصفحة التي تعرضها عند الدخول إليه للمرة الأولى.
أوصيك بترك الإعداد التلقائي "التفعيل لهذه الجلسة فقط" محدّدًا، لأنك لا تريد أن تتحمّل بدون مبرّر عقوبة الأداء البسيطة. بعد النقر على "تفعيل تتبُّع الموارد"، ستتم إعادة تحميل الصفحة، وستراقب "أدوات المطوّرين" الموارد المُرسَلة من الخادم وتعرضها.
توضح لقطة الشاشة التالية الموارد المطلوبة لصفحة Google الرئيسية وتم تحميلها.
تتضمّن هذه الشاشة الكثير من المعلومات، لذا لنأخذها على مراحل.
يتمثل السلوك التلقائي في عرض المدة التي استغرقها طلب جميع الموارد للصفحة وتحميلها. قد يفاجئك التمرير لأسفل قائمة الموارد، لأنك قد لا تعرف عدد الطلبات الفردية التي يقوم بها العميل. يمكن أن يؤثر عدد كبير من الطلبات الواردة من العميل بشكلٍ كبير في الأداء. تتمثل الخطوة الأولى نحو التحسين والتقليل النهائي في الموارد من خلال التعرّف على ما هو مطلوب بالضبط.
إذا كنت مهتمًا بالصور أو أوراق الأنماط فقط، يمكنك تصفية نوع المورد باستخدام القائمة مباشرة ضمن نافذة علامة التبويب الرئيسية.
ستتعلم أيضًا الترتيب الذي يتم طلب الموارد به. عند استخدام عرض المخطط الزمني، قد تكتسب فهمًا أفضل لسبب ظهور بعض العناصر على صفحتك في وقت لاحق من العناصر الأخرى.
بعد الحصول على نظرة عامة على جميع الموارد المطلوبة، وكيفية إنشائها للمخطط الزمني للطلب بالكامل، ستحتاج إلى التوغّل إلى الموارد الفردية.
وإذا لاحظت أن بعض الموارد يتم طلبها في كل مرة تقوم فيها بالوصول إلى الصفحة، فهذه علامة على أن رؤوس التخزين المؤقت لم يتم تكوينها بشكل صحيح. يمكنك عرض جميع رؤوس أحد الموارد عن طريق النقر على المورد في القائمة اليمنى.
استخدِم عرض العناوين لضمان ضبط رمز استجابة HTTP المتوقّع وتوفير العناوين المناسبة. على سبيل المثال، إذا كان المورد نادرًا ما يتم تغييره أو لا يتم تغييره أبدًا، يجب أن يضبط الخادم عنوان تاريخ "تاريخ الانتهاء" لوقت بعيد في المستقبل. سيخبر ذلك المتصفِّح بأنّه يجب عدم طلب المورد مرة أخرى حتى ذلك التاريخ. يقلل هذا من مقدار اتصالات HTTP المطلوبة لصفحتك، وبالتالي يتم تسريع موقعك الإلكتروني.
ملخّص
هناك المزيد في علامة التبويب "Resources" (الموارد)، والتي سنتناولها في مقالة مستقبلية.
استخدم علامة التبويب "الموارد" لاكتساب رؤية حول كيفية اتصال متصفح العميل بخادم الويب. وباستخدام هذه المعلومات، بما في ذلك وقت الطلب وحجم الطلب وترتيبه، يمكنك إجراء تحسينات ذكية لتقليل العبء على الخادم والتكاليف وزيادة السرعة وتعزيز تجربة المستخدم.
تُعدّ السرعة مهمة جدًا لموقعك الإلكتروني ومستخدميه ومحركات البحث. بعد تقليل عدد الموارد وحجمها وتقليل محادثات HTTP المناسبة، تكون الخطوة التالية هي البحث في النصوص البرمجية التي يتم تشغيلها في صفحتك وتحسينها. لحسن الحظ، تقوم علامة تبويب "النصوص"، والتي نناقشها فيما يلي، بذلك.
مراجع إضافية
لمزيد من المعلومات حول أدوات المطوّرين، نقترح عليك ما يلي:
- فيديو العرض التقديمي الخاص بأدوات مطوّري برامج Chrome وشرائحه من مؤتمر Google I/O 2010
- برنامج تعليمي عن "أدوات مطوّري برامج Chrome"
وبالطبع، تابِع html5rocks.com للاطّلاع على الجزء الثاني من هذه المقالة، بالإضافة إلى الكثير من محتوى HTML5 وChrome الرائع الآخر.