استخدامات مفيدة للـ CONSOLE على جوجل كروم 🔥

1٬683

 2018-07-10

العديد من المبرمجين يستخدمون الـ CONSOLE  الخاصة بمتصفح جوجل كروم إستخدامات محدودة تتجلى في تتبع أكواد المصدر و الأخطاء ، بينما يمكنك إستخدام هذه الأخيرة كسلاح فتاك في مجال برمجة الويب فكل ما عليك فعله الأن هو فتح متصفح جوجل كروم و الضغط على زر F12 و متابعة ما يلي .

إستخدم متصفحك كمحرر للنصوص أو الأكواد :

 

 

إعتدنا في عملية تغيير لنص موجود في ملف HTML على الدخول للكود المصدر و كتابة النص ، الأن يمكنك فقط التوجه للـ Console  و أدخل الكود التالي و سيتم تغير محتوى صفحة الويب بما تكتبه :





 

document.body.contentEditable=true
 

 

إذا كنت تستخدم إضافة مثل LiveReload  فيمكن لتغيير أن يتم حفظه بشكل تزامني في كود المصدر الخاص بك – و ليس في الموقع الأصلي 🙂 .

 

إلتقاط سكرين شوت للصفحة كاملة أو جزء من الصفحة :

 

 

في هذه العملية يمكنك الإعتماد على Dev Console  للإلتقاط صورة كاملة لموقعك  أو جزء من الموقع بجودة عالية و بدون الإستعانة إلى الإضافات خارجية للمتصفح كل ما عليك فعله هو الضغط على ctrl+Shift+p  و كتابة  capture ScreenShot  في صندوق البحث .



 

راقب و راجع أداء موقعك :

 

 

سرعة تحميل موقعك مهمة و خصوصا لدى الزائر ، من خلال  الـ Dev Console   يمكنك متابعة أداء موقعك عبر الـ DOM  و تحميل الـ frames  و الملفات ، و عبره يمكنك تحليل renders  أيضا .

 

حالة العناصر :

 

من خلال Dev Console  يمكنك الضغط على حال العنصر عبر الضغط على الزر الأيمن للعنصر و إختيار Force Element State   أو من خلال  الـPropreties  الجانبية ، بما في ذلك _:active_, _:hover_, _:focus_, و _:visited ._  .

 

شاركنا في التعليقات الأساليب الأخرى التي تستعملها في أداة جوجل للمطورين !

Free Download WordPress Themes
Download Premium WordPress Themes Free
Download Premium WordPress Themes Free
Free Download WordPress Themes
online free course