Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

أدوات Chrome Dev: الترميز والنمط 

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by ansgaradh (you can also view the original English article)

من الضروري أن يفهم مطورو الويب ويعرفوا كيفية استخدام أدوات تطوير المتصفح ، وفي هذا البرنامج التعليمي ، سأقدم لك أدوات مطوري Chrome. ستتعرف على بعض الأساسيات ، بدءًا من وضع علامة على صفحة ويب وتصميمها. 

ملاحظة سريعة لمستخدمي أداة التطوير الحاليين : الغرض من هذا البرنامج التعليمي هو تقديم مقدمة أساسية نسبيًا لأدوات مطوري برامج Chrome. إذا كنت تستخدم أي أداة تطوير للمتصفحات ، مثل Firebug في Firefox أو أدوات تطوير IE ، فقد تجد أنك تعرف بالفعل الكثير من المعلومات التي يغطيها هذا البرنامج التعليمي بالتحديد. 


المقدمة 

تسمح لك أدوات تطوير المستعرض بالانتقال إلى صفحة ويب وفحص كل شيء في الصفحة.على سبيل المثال ، يمكنك: 

  • عرض رمز HTML المقابل لعنصر (على سبيل المثال ، رأس من نوع ما) 
  • الحصول على نظرة عامة على CSS المستخدم في صفحة وكيفية تطبيق CSS لعنصر 
  • تعديل CSS في الوقت الفعلي ورؤية التغييرات التي أجريتها في المتصفح بشكل مرئي 
  • عرض طلبات HTTP التي أجراها المتصفح 
  • شغِّل شفرة جافا سكريبت في سياق الصفحة 
  • تحديد اختناقات الأداء واسترداد مجموعة متنوعة من مقاييس الأداء 
  • البحث عن الموارد دون اتصال لمعرفة البيانات التي يتم تخزينها في الصفحة محل البحث محليًا 

أدوات مطور المتصفح 

قبل البحث في أدوات مطوري برامج Chrome ، أريد أن أقدم لك نظرة سريعة على أدوات التطوير التي تقدمها المتصفحات الرئيسية. لاحظ أن هذه ليست نظرة شاملة على هذه الأدوات وميزاتها ، ولكنني أقوم بتوفير المعلومات الأساسية لكل أداة.

أدوات مطوري Chrome 

يمكنك استخدام أدوات مطوّري البرامج داخل Chrome و Chrome Canary وحتى Chromium. 

سفاري WebKit المفتش 

يستخدم Safari رمزًا من مستودع Web Inspector ؛ ومع ذلك ، قد تجد أنه لم يتم تحديثه كثيرًا مثل Chrome. 

  • تنزيل المتصفح: apple.com/safari/ 
  • لفتح: Control + alt + i أو "Develop"> "Show Web Inspector"
  • الوثائق: developer.apple.com/library/safari/documentation 
  • ملاحظات: يمكن فتحها أيضًا بالنقر بزر الماوس الأيمن فوق عنصر في الصفحة وتحديد "فحص العنصر" 

فايرفوكس أدوات المطور 

يأتي فايرفوكس الآن مع مجموعة من أدوات التطوير الخاصة به والتي تركز بشكل جيد على الجانب المرئي للأشياء. لأولئك الذين اعتادوا على Firebug ، لا يزال هذا متاحًا كإضافة. 

أدوات المطور إنترنت إكسبلورر 

 أوبرا اليعسوب 


ابدء 

 ملاحظة: يستخدم هذا البرنامج التعليمي بنية Canary لمتصفح Chrome. لذلك ، قد تكون بعض الميزات المغطاة في هذه المقالة متوفرة أو غير متوفرة في الإصدارات التجريبية أو الثابتة.

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

  1. أغلق أدوات المطور. 
  2. أزرار لتحديد لوحات أدوات مختلفة ( العناصر محددة حاليًا). 
  3. أداة مخصصة مثبتة بواسطة امتداد لجهة خارجية ( PageSpeed ). 
  4.  تغيير تخطيط أدوات المطور.
  5. إظهار وحدة التحكم (سيتم تغطيتها في برنامج تعليمي مختلف). 
  6. حدد عنصرًا في الأداة من خلال النقر عليه في الصفحة. 
  7.  أخطاء JavaScript في الصفحة.
  8. افتح تراكب شاشة الإعدادات. 

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


لوحة العناصر 

و عناصر تسرد لوحة العلامات على الصفحة كما يتم تقديم في المستعرض. ينعكس أي تغيير يتم إجراؤه على DOM عبر JavaScript في العناصر الموجودة في هذه اللوحة. 

دعونا نتعرف على هذه اللوحة. كما هو مذكور من قبل ، قم بالرجوع إلى عناصر القائمة أدناه لقطة الشاشة التالية التي تحدد الأجزاء المختلفة من لوحة Elements . 

القوة التي أعطيتنا من قبل أدوات ديف ليست أقل من مدهشة. 

  1.  العناصر كما قدمت في الوثيقة.
  2. يشير السهم إلى أن العنصر له أطفال. يشير موضع السهم إلى ما إذا كان العنصر مطويًا أو موسعًا. 
  3. فتات الخبز الأولية تبدأ بعنصر المستند ( <html /> ) وتنتهي بالعنصر المحدد حاليًا. يؤدي التمرير فوق كل فتحة إلى إبراز العنصر المعني في نافذة المتصفح. 
  4. مقسم متحرك لفصل قائمة العناصر عن معلومات النمط. 
  5. Togglable الأجزاء التي تحتوي على معلومات التصميم (والمزيد). 
  6. تعرض الأنماط المحسوبة معلومات التصميم التي يحسبها المتصفح للعنصر المحدد. 
  7. يعرض لك الأنماط الموروثة من الأنماط الافتراضية للمتصفح التي يتم تطبيقها على العنصر المحدد. 
  8. أظهرك الأنماط المضافة بواسطة المستخدم ، مثل: الأنماط التي تم استردادها من ملف الأنماط المطابقة الخاص بالصفحة ، والأنماط المضافة عبر JavaScript ، والأنماط المضافة عبر أدوات المطورين. 
  9. زر "قاعدة نمط جديد". يقوم بإنشاء قاعدة نمط جديد للعنصر المحدد. 
  10. يتيح لك Toggle Element State بدء حالات بدء تشغيل المستخدم مثل : hover (يحوم المستخدم فوق شيء ما باستخدام الماوس الخاص به ، و : active، وأكثر من ذلك. تعرض الصورة الزر في حالته "on" ؛ يتم إيقاف تشغيله افتراضيًا. 
  11. يعرض قسم الخطوط الخطوط التي اضطر المتصفح إلى تنزيلها فقط. 

  12. للسماح لك بتعيين التنسيق المفضل لقيم اللون. يمكنك الاحتفاظ بالوضع الافتراضي ("كما هو مؤلف") ، أو تغيير كل شيء إلى ست عشري ، أو استخدام RGB ، أو حتى تعيينه على HSL. 
  13. تصور مربع العنصر عن طريق أخذ الهامش والحدود والحشو في الاعتبار. 

معلومات اضافية 

  • ما: إن عناصر تسمح لوحة لعرض وتحرير العناصر واسلوب المعلومات . 
  • المكان: إنها اللوحة الأولى. يمكنك أيضًا الوصول إليه عن طريق النقر بزر الماوس الأيمن على عنصر في الصفحة وتحديد عنصر فحص . 
  • السبب: هناك عدد من حالات الاستخدام. قد ترغب في تعديل DOM عن طريق حذف عقدة أو إضافة واحدة جديدة.  وضع علامة جانباً ، تعتبر لوحة العناصر مكانًا رائعًا لمشاهدة الأنماط المطبقة لعقدة معينة. يمكنك أيضًا إضافة الأنماط وإزالتها ، بالإضافة إلى إنشاء قواعد جديدة ربما تضيفها إلى صفحات الأنماط الخاصة بك. 

تعديلات DOM 

يعد تعديل DOM داخل لوحة Elements عملية مباشرة إلى حد ما. لحذف عقدة ، ما عليك سوى النقر بزر الماوس الأيمن عليها وتحديد حذف عقدة .  وكما تتوقع ، فإن حذف العقدة الرئيسية يحذف أيضًا أطفالها.نصيحة مفيدة: يمكنك أيضًا الضغط على مفتاح الحذف على لوحة المفاتيح لحذف العقدة المحددة. 

يمكن تغيير نوع العنصر عن طريق النقر المزدوج على اسم العنصر نفسه. على سبيل المثال: الجزء p في علامة فقرة. وبطبيعة الحال ، يؤدي تغيير عنصر من نوع إلى آخر إلى تغيير علامات الفتح والإغلاق. 

renaming an element

عرض موارد الصفحة ضروري لتصحيح الأخطاء. 

يمكن تحقيق إضافة السمات عن طريق النقر بزر الماوس الأيمن على العنصر وتحديدإضافة سمة . يضع المؤشر موقعه على الفور حيث تتوقعه ، ويمكنك البدء في كتابة السمات التي تريد إضافتها إلى العنصر.  على سبيل المثال:class = "title" . يؤدي الضغط على مفتاح tab على لوحة المفاتيح إلى وضع المؤشر على موضع السمة التالي. 

تشبه سمات التحرير إضافتها. ابحث عن السمة التي تريد تحريرها ، وانقر نقرًا مزدوجًا على إما اسم السمة أو قيمتها. يبرز السابق اسم السمة ، ويبرز الأخير القيمة. 

يتم تمكين تحرير HTML الخام عن طريق النقر بزر الماوس الأيمن على عنصر وتحديد تحرير كـ HTML . 

تحديد العناصر 

توفر أدوات المطور بعض التقنيات المفيدة لتحديد موقع العناصر في المستند. تحوم فوق العناصر في عناصر جزء يسبب العناصر المقابلة المقدمة للسيتم تسليط الضوء في الصفحة.   تعد هذه طريقة رائعة للعثور على العنصر الموجود في أدوات المطورين يتوافق مع العنصر الموجود في الصفحة. 

Hovering over elements in the panel to locate them on the page

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

Scrolling an element into view

تحتوي أدوات المطور أيضًا على ميزة بحث. عندما يكون جزء أدوات التطوير مضغوطًا ، اضغط على Control + f لفتح مربع البحث. هذا هو مربع البحث عن نص بسيط. لذلك ، فإن كتابة "body" سيجد المثيل الأول من النص "body" في  المستند.

عرض معلومات الأنماط 

قبل أن نصل إلى ألواح النمط (الجانب الأيمن) لعلامة التبويب " العناصر" ، يمكننا الوصول إلى بعض معلومات الأنماط مباشرةً من عنصر إذا كان يحتوي على جميع الهوامش الثلاثة ، وأقواس المسافات والحدود المحددة في ورقة الأنماط. إن التمرير فوق أحد هذه العناصر يعطينا لمحة عن نموذج الصندوق ، مثل: 

result of hovering over an element

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

أثناء الانتقال إلى موضوع الهوامش / المخططات / الحدود ، دعنا ننتقل إلى منطقة الأنماط في لوحة Elements وتحقق من جزء "المقاييس". 

the metrics pane

هذا يسمح لك بالتنقيب وتحديد المشاكل المحتملة لسبب جعل العنصر يعمل. إنها أيضًا أداة تعليمية رائعة. إذا لم تكن قد حصلت على رأسك حول نموذج صندوق المغلق ، فسيكونالمخطط Metrics بمثابة مساعدة مرئية رائعة. 

و القياسات يتيح لك عرض جزء أبعاد العنصر، الحشو والحدود والهوامش. لاحظ كيف يمكنك تمييز كل جزء على حدة للحصول على تمثيل مرئي عن كيفية عرضه في المتصفح.  و القياسات كما يعطي الرسم البياني المقاييس تقوم بكسل لكل جزء من العنصر، مثل قاعدة أسلوب الحشو: 10px 5px (10px في أعلى وأسفل، 5px اليمين واليسار) سوف تظهر القياسات الدقيقة لكل جانب من هذا العنصر. 

وضع معلومات النمط 

يعد عرض معلومات الأنماط أمرًا ممتعًا ، ولكن على الفور ترقيع مع أي ترتيب لأحرف الصفحة أي أعلى بكثير على مقياس 'ol ol'. سواء كان الأمر يتعلق بتثقيف أنفسنا ، أو تجربة تصميم ، أو حتى توصيل أفكار لأقراننا ، فإن القوة التي يمنحنا إياها أدوات التطوير هي أقل من مدهشة. 

تأكد من توسيع لوحة الأنماط وانقر على يمين قوس التقوس المفتوح. ستلاحظ أن موضعًا يضع موضعه تلقائيًا بحيث يمكنك كتابة خاصية نمط.  اكتب اسم خاصية ، اضغط على Tab لتحريك المؤشر إلى جزء القيمة ، واكتب  القيمة. سأضيف CSS التالي:

و عناصر تسرد لوحة العلامات على الصفحة كما يتم تقديم في المستعرض. 

عند بدء الكتابة باسم الموقع ، يقدم Chrome اقتراحات ، مما يمنحك فائدة الإكمال التلقائي. رائع! تحدد علامة التبويب "ضغط " أقرب تطابق لما كتبته وتحرك المؤشر إلى موضع القيمة.  ومع ذلك ، يؤدي الضغط على مفتاح السهم الأيمن إلى بقاء المؤشر في جزء الخاصية ولكنه يملأ أقرب تطابق لما كتبته. 

يعمل الإكمال التلقائي أيضًا مع قيم الخاصية. على سبيل المثال ، يؤدي كتابة "pos" * tab * "fi" * tab * إلى إنشاء خاصية نمط للموضع: ثابتة .   عند إدخال قيم مبنية على البكسل / النسبة المئوية ، مثل 15٪ أو 10px ، يمكننا زيادة هذه القيم وإنقاصها باستخدام مفاتيح الأسهم لأعلى ولأسفل.لزيادة 10 ، استخدم shift + مفتاح السهم لأعلى. 

يعد تعديل قيم اللون أمرًا رائعًا بفضل منتقي الألوان. بعد إدخال قيمة لونية ، قم بالنقر المفرد على المربع الصغير الملون على يسار القيمة لإظهار أداة منتقي الألوان.   يمكنك أيضًا التبديل بين تنسيقات قيم الألوان عن طريق shift + النقر على المربع الصغير الملون. 

 يمكنك إنشاء قاعدة نمط جديد بالنقر فوق الرمز + الصغير في جزء الأنماط. ترميز يبدو كالتالي: 

ينشئ قاعدة الأنماط التالية تلقائيًا: 

 ترميز يبدو كالتالي:

يولد تلقائيا ما يلي: 

ترميز يبدو كالتالي: 

يولد: 

ترميز يبدو كالتالي: 

 يولد تلقائيا:

بالطبع ، يمكن تعديل قواعد الأنماط حسب رغبتك. 

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


لوحة الموارد 

و الموارد تظهر لوحة ما هي الموارد يستخدم صفحة. دعونا نلقي نظرة على ما  تقدمه.

و القياسات يتيح لك عرض جزء أبعاد العنصر، الحشو والحدود والهوامش. 

  1.  الزر لتنشيط لوحة Resources 
  2. يعرض جزء الفئات الأنواع المختلفة من الموارد التي يمكننا فحصها. قد يكون هناك خطأ بجانب رأس المورد (مثل "إطارات" أو "تخزين الجلسة").  هذا يشير إلى أن هناك المزيد من المعلومات ، والنقر على الرأس يكشف عن تلك المعلومات. هذا الجزء قابل للتغيير. لذا اجعلها كبيرة أو صغيرة كما تريد. 
  3. يمكن العثور على موارد الصفحة بما في ذلك الخطوط والصور وجافا سكريبت و CSS والصفحة نفسها هنا.  إذا كانت الصفحة تستخدم إطارات متعددة (على سبيل المثال باستخدام مجموعة إطارات) ، فسيظهر كل إطار كمجلد منفصل داخل المجلد "Frames" الأصل. هذا مفيد لفهم العلاقة بين الإطار وموارده. 
  4. إذا تم استخدام قواعد بيانات Web SQL في الصفحة ، فسيعرض هذا محتوياتها. 
  5. على غرار SQL Web ، يعرض IndexedDB محتويات قاعدة البيانات IndexedDB. 
  6. يعرض أزواج المفاتيح / القيم المخزنة في LocalStorage . 
  7. يعرض أزواج المفاتيح / القيم المخزنة في sessionStorage .  
  8. يسرد ملفات تعريف الارتباط التي تم إنشاؤها بواسطة المجال. 
  9. يعرض الأصول المخزنة مؤقتًا وفقًا لبيان ذاكرة التخزين المؤقت. يحتوي هذا القسم على الكثير من المعلومات المفيدة. على سبيل المثال ، سيعرض مورد مثل مكتبة جافا سكريبت مسار المصدر وحجم الملف ونوع الملف. 
  10. يعرض التفاصيل المتعلقة بالمورد المحدد في الجزء الأيمن. 

معلومات اضافية 

تحتوي أدوات المطور أيضًا على ميزة بحث. 

  • ماذا: تعرض لوحة الموارد الموارد المرتبطة بالصفحة. 
  • المكان: اللوحة الثانية ، مباشرة بعد لوحة Elements وقبل لوحة الشبكة . 
  • السبب: يعد عرض موارد الصفحة ضروريًا لتصحيح الأخطاء. قد يكون لديك أيضًا فضول لمعرفة المعلومات التي تخزنها مواقع الويب الأخرى في التخزين المحلي أو ملفات تعريف الارتباط أو أي آلية أخرى لتخزين البيانات.  بالإضافة إلى ذلك ، يمكن تعديل بعض الموارد ، مثل localStorage عبر أدوات المطور. 

عرض محتويات الإطار الفردي 

على الرغم من عدم استخدام الإطارات في مواقع الويب الحالية ، فإن فهم كيفية فحص صفحة ذات إطارات متعددة يعد مهارة قيّمة. في لقطة الشاشة التالية ، ستلاحظ صفحة ذات عمود حيث يمثل كل عمود إطارًا مختلفًا: 

viewing multiple frames

يمكنك حفظ مورد إلى جهاز الكمبيوتر الخاص بك 

يتم وضع كل إطار داخل مجلده الخاص. يحتوي كل مجلد على أصول كل صفحة ، ويمكنك النقر على كل صفحة لإظهار محتوياتها.  عرض محتويات صفحة HTML أمر مفيد ، ولكن يمكننا الانتقال إلى أعمق في كل صفحة وعرض مواردها. يمكن عرض JavaScript و CSS والصور وحتى الخطوط!   يتم عرض الأصول التي تحتوي على تعليمات برمجية في عارض التعليمات البرمجية لأدوات المطور ، والتي تأتي مع تمييز وأرقام خطوط التركيب. 

الخطوط 

من المهم ملاحظة أن خطوط النظام ، مثل Arial أو Helvetica ، ليست مدرجة تحت Fonts؛ يعرض قسم الخطوط فقط الخطوط التي اضطر المتصفح إلى تنزيلها. 

Viewing the fonts of a page

مقياس الخط بحيث يمكن احتوائه داخل منطقة محتوى المصدر ؛ لذلك ، تغيير حجم منطقة محتوى المورد أيضاً بتغيير حجم الأصل! 

 صور

من الواضح أن بعض الأفكار دخلت في الصورة التي تعرض واجهة المستخدم. 

Images within a page from the resources panel

تعرض أدوات المطور الصورة في منطقة المحتوى ، ويتم تغيير حجم الصورة وفقًا لحجم مساحة المحتوى. تظهر الصور التي تتمتع بشفافية (مثل الصورة الموجودة في الصورة أعلاه) مع لوحة مربعة في الخلفية ، مما يسهل عرض الصورة.   يتم عرض معلومات أخرى مفيدة ، مثل الأبعاد وحجم الملف ونوع MIME أسفل الصورة. 

مخطوطات 

جافا سكريبت! يؤدي النقر فوق ملف البرنامج النصي إلى عرض محتوياته ، ولكن ليس أكثر من ذلك. 

JavaScript that a page has loaded

لكن لا تيأس عرض الأصول هو ببساطة: عرض الأصول. في برنامج تعليمي مستقبلي ، سنلقي نظرة على دعم وقدرات جافا سكريبت لأدوات التطوير. 

الأنماط 

يمكنك عرض أوراق الأنماط المختلفة التي حملها المتصفح لصفحة الويب. 

Stylesheets from Chrome dev tools

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

الموارد التي فشل تحميلها 

من حين لآخر ، لن يتمكن المتصفح من تحميل مورد معين بسبب مشكلات في الشبكة أو خطأ مطور. 

A resource which has not been found

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

حفظ وعرض الموارد 

كل مورد لديه قائمة السياق. ببساطة النقر بزر الماوس الأيمن على مورد يظهر قائمة  مشابهة لهذه:

the context menu shown for assets

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

بسكويت 

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

viewing the cookies on a page

هنا ، نرى: 

عندما تتساءل عن سبب عدم عمل بعض العناصر الطافية كما هو متوقع ، يمكن أن يساعد عرض معلومات الهامش / الحشو على تشخيص المشكلة. 

  • الاسم - اسم ملف تعريف الارتباط. على سبيل المثال ، هناك اسم يحتوي على "remember_checked" له قيمة 1. من المرجح أن يوضح هذا ما إذا كان المستخدم قد فحص علامة اختيار "تذكرني" أثناء عملية تسجيل الدخول. 
  • القيمة - قيمة ملف تعريف الارتباط. بالنسبة إلى "_twitter_sess" المسمى ملف تعريف الارتباط ، يوجد معرف جلسة طويل مشفر للقيمة. 
  • المجال - نطاق ملف تعريف الارتباط. .twitter.com يسمح لأي نطاق فرعي على twitter.com. 
  • المسار - على غرار النطاق ، يوضح حقل المسار المسارات الصالحة. "/" يسمح لجميع المسارات. 
  • انتهاء الصلاحية - تاريخ حذف المتصفح لملف تعريف الارتباط. 
  • الحجم - حجم ملف تعريف الارتباط بالبايت. 
  • HTTP - فرض الوصول إلى ملف تعريف الارتباط فقط عبر بروتوكول HTTP. هذا يمنع الوصول إلى ملفات تعريف الارتباط عبر JavaScript ويمكن أن يساعد في مكافحة ملفات تعريف الارتباط سرقة من خلال البرمجة عبر الموقع. 
  • آمن - يرشد المتصفح إلى توصيل بيانات ملفات تعريف الارتباط فقط من خلال الاتصالات المشفرة مثل HTTPS 

يمكنك حذف ملف تعريف ارتباط بالنقر بزر الماوس الأيمن على ملف تعريف الارتباط وتحديد " حذف" من قائمة السياق. 

من المثير للاهتمام ملاحظة كيف تستخدم المتصفحات معلومات ملفات تعريف الارتباط لتحديد ما إذا كنت مستخدمًا معتمدًا أم لا.  أثناء تسجيل الدخول إلى Twitter ، يطالبنا حذف ملفات تعريف الارتباط "auth_token" و "_twitter_sess" بتسجيل الدخول بعد تحديث الصفحة. من المرجح أن يقوم تويتر بتخزين حالة تسجيل الدخول وغيرها من المعلومات الحساسة في ملفات تعريف الارتباط هذه. 

التخزين المحلي 

يعد تخزين وعرض أزواج المفاتيح / القيم في localStorage أمراً سهلاً إلى حد ما.بدلاً من تخزين مفاتيحنا الخاصة ، سنستخدم موقعًا حاليًا كمثال.  تعرض لقطة الشاشة التالية طريقة عرض التخزين المحلي لأحد تطبيقات Example Sink التي يتم إجراؤها باستخدام إطار تطبيق ويب الجوالSencha Touch. 

Viewing the local storage on a page

عند عرض الصفحة لأول مرة ، يقوم المتصفح بتقديم طلب لملف CSS. تحديث الصفحة يشعر الكثير من snappier لأن Sencha تخزين CSS في التخزين المحلي.   يحتوي تطبيق حوض المطبخ على بعض أزواج المفاتيح / القيمة المثيرة للاهتمام. على سبيل المثال ، يبدو مفتاح واحد مثل هذا: 

تبدأ قيمة هذا المفتاح بهذا: 

كتب ستيف سويدرز عن تخزين الأصول في التخزين المحلي ؛ إنه استخدام مثير للاهتمام ومثير للتخزين المحلي والذي يمكن أن يحسن الأداء - خاصة على الأجهزة المحمولة. 

ذاكرة التخزين المؤقت للتطبيق 

تخبر ذاكرة التخزين المؤقت للتطبيق المتصفح بالموارد التي يجب تخزينها مؤقتًا ، وتسمح لنا فئة ذاكرة التخزين المؤقت للتطبيق بعرض ما تم تخزينه مؤقتًا. 

the application cache view in the resources panel

هناك ثلاثة أعمدة بهذا العرض: 

  • الموارد - المسار الكامل للمورد. ملحقات الملفات هي عادة أصول وملفات HTML.أحد الموارد هو ملف البيان نفسه! 
  • نوع - يمكن أن تختلف. و" ظاهر نوع" هو نوع فريد من نوعه نظرا لملف البيان نفسه.نوع آخر صريح : الموارد التي يتم تعريفها بوضوح في ملف البيان.  يشير نوع الاحتياطي إلى مورد يعمل كخلفية لمورد آخر. و ماستر نوع هو المورد الذي بادر ذاكرة التخزين المؤقت: الصفحة نفسها. 
  • الحجم - حجم المورد بالكيلوبايت أو البايت. 

راجع هذا البرنامج التعليمي إذا لم تكن على دراية بتطبيق ذاكرة التخزين المؤقت لتطبيق HTML5. 


اراك قريبا 

نحن فقط بدأت. في الجزء الثاني ، سنلقي نظرة على مزيد من اللوحات مع التركيز البسيط على الأداء ، حتى يمكننا تقديم تجربة أفضل للمستخدم. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.