6 أشياء مفيدة يمكنك القيام بها عبر أداة فحص العنصر فى متصفح كروم

أداة فحص العنصر أو Inspect Element أو أدوات المطور هي مسميات مختلفة للأداة المدمجة فى متصفحات الإنترنت جميعًا، والتى تساعد بشكل خاص مطوري الويب على تصميم المواقع وبرمجتها بطريقة أفضل، حيث تتيح إمكانية معاينة التغييرات على الموقع قبل تطبيقها فعليًا. لكن هناك أوقات تكون فيها أداة فحص العنصر مفيدة ايضًا لمُستخدم الإنترنت العادي وليس مطوري الويب فقط؛ دعني أخبرك أنه يمكنك تجاوز حجب المواقع، ومعرفة كود اللون، وإجراء عمليات حسابية، وآخذ لقطة شاشة كاملة للمواقع...و أكثر من ذلك بكثير مباشرًة من أداة فحص العنصر. لكن خذ بعين الإعتبار أن قدرات هذه الأداة تختلف من متصفح لآخر، لذا قد تجد مزايا فى أداة فحص العنصر بفايرفوكس لا تتواجد فى جوجل كروم، والعكس. وفي هذه المقالة، سنسلط الضوء على الأشياء المفيدة التي يمكنك القيام بها باستخدام أداة فحص العنصر الخاصة بمتصفح جوجل كروم.

قبل أن نبدأ فى أي شيء، إذا كنت لا تعرف كيف تقوم بفتح أداة فحص العنصر فى متصفح جوجل كروم. كل ما عليك هو فتح المتصفح ثم النقر على زر (⋮) في الزاوية اليمنى للمتصفح (أو اليسرى إذا كان المتصفح باللغة العربية) ثم تقوم بتوجيه مؤشر الماوس نحو More tools ثم تضغط من القائمة الفرعية على Developer tools. بدلًا من ذلك، يمكنك الضغط كليك يمين فى أى مكان داخل المتصفح، ثم اضغط على خيار "Inspect" من القائمة. لكن الطريقة الأسرع بالتأكيد هي النقر على زر "F12" في لوحة المفاتيح. إفتراضيًا، ستظهر لك نافذة فحص العنصر على الجهة اليُمني للمتصفح، لكن إذا ضغطت على زر (⋮) المتواجد بأعلى النافذة، ستجد خيارًا يتيح لك تغيير مكانها إلى الأسفل وهو ما أراه أفضل. الآن دعونا نسرد إليكم الأشياء المفيدة التى يمكنك القيام بها من خلال هذه النافذة...

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

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

كما تلاحظ دائمًا عند تسجيل الدخول فى أي موقع أو إنشاء حساب أن أي شيء يتم كتابته فى حقل Password يكون مخفي على هيئة نجوم بمعدل * لكل حرف أو رقم. لكن ماذا لو كنت تريد عرض المحتوى الحقيقي بدلًا من هذه النجوم ؟ بعض المواقع توفر لك زر "Show" داخل هذا الحقل؛ فإذا ضغطت عليه يتم عرض كلمة السر المخفية فورًا. بينما توجد هناك طريقة اخرى فى حالة عدم وجود هذا الزر وهي تتمثل فى إجراء تغيير برمجي بسيط على شروط حقل Password من خلال أداة فحص العنصر. كل ما تحتاج أن تقوم به هو الضغط كليك يمين داخل حقل كتابة كلمة المرور، ثم اضغط على خيار Inspect Element من القائمة. وفى نافذة فحص العنصر، استبدل كلمة "password" الموجودة أمام password-type بأي كلمة إنجليزية أخرى ولتكن "text" ثم اضغط Enter. سيتم بعد ذلك كشف كلمة المرور المخفية على هيئة نجوم، وتستطيع الآن كتابة الباسورد مع رؤية ما تكتبه لحظة بلحظة.

أي نظام تشغيل تستخدم متصفح جوجل كروم عليه سيكون مدعمًا بأداة أو أكثر لأخذ لقطة شاشة (Screenshot) بأوضاع مختلفة مثل أداة Snipping Tool في ويندوز. وإذا كنت لا ترغب فى استخدامها، ستجد عددًا من الإضافات المتوفرة لفعل الشيء نفسه بكل سلاسة. لكن في الواقع، يتضمن متصفح جوجل كروم خيارًا مدمجًا لأخذ لقطة شاشة سواء لجزء محدد فى صفحة الويب أو للصفحة بالكامل من الـ Header للـ Footer دون الحاجة لاستخدام أدوات خارجية.

يتم ذلك من خلال فتح أداة فحص العنصر ثم النقر على أزرار Ctrl + Shift+P ثم كتابة كلمة "Screenshot" فى حقل البحث الذي سيظهر لك داخل النافذة. ستظهر لك ثلاثة نتائج هي "Capture full size" و "Capture node" و "Capture" حيث أن الأول لحفظ سكرين شوت لصفحة ويب بأكملها، والثاني لآخذ صورة من عنصر محدد في صفحة الويب، والثالث لآخذ صورة من الجزء المعروض على الشاشة حاليًا. وبالضغط على أي نتيجة ستقوم بتحديد مكان حفظ الصورة وتضغط Save.

عادة ما يحتاج العاملون فى مجال التصميم إلى معرفة كود اللون المستخدم فى صورة أو فى عنصر مُعين على صفحة الويب التي يتصفحونها حتى يكون بوسعهم استخدام هذا اللون بالتحديد فى تصميماتهم القادمة سواء كان ذلك الكود معرف بـ RGB أو HEX. هناك إضافات عديدة يمكن تثبيتها على متصفح جوجل كروم لمعرفة هذا الكود، لكنك فى غنى عن استخدامها.

إذا رأيت لون يلفت انتباهك، فبإمكانك فتح أداة فحص العنصر، وفى الجانب الأيسر أسفل علامة تبويب "Style" اضغط على المربع الصغير بجوار ":Color". إن لم تعثر على هذا المربع، اضغط على زر (⋮) أسفل "element.style" ثم اضغط على زر "Add color". فى كلا الحالتين، ستظهر لك أداة Color Picker حيث يمكنك النقر فوق أي عنصر تريد معرفة لونه فى صفحة الويب، وستقوم الأداة بإعطائك الرمز أو الكود الخاص باللون. ببساطة قم بنسخ هذا الرمز ولصقه فى برنامج فوتوشوب أو برنامج تحرير الصور لاستخدامه فى التصميم.

أي موقع ويب يكتشف المكان الذي تتصفحه منه من خلال طريقتين: الأولي عبر عنوان الـ IP الخاص بك، والثانية من خلال الموقع الجغرافي. الآن إذا كان هناك موقع محجوب فى بلدك وكان هذا الموقع يتعامل بالطريقة الاولى فى التعرف على المُستخدمين، يمكنك بسهولة تجاوز الحجب بتغيير عنوان الـ IP بإستخدام خدمة VPN أو بروكسي. بينما إذا كان الموقع يتعامل بالطريقة الثانية، فإن الحل ببساطة هو تغيير الموقع الجغرافي الحقيقي بموقع وهمي، بمعنى أن تقوم بإيهام الموقع انك تتصفحه من الولايات المتحدة بينما فى الواقع تتصفحه من السعودية!.

لن تحتاج إلى برامج أو إضافات طرف ثالث لتؤدي هذه المهمة، فقط خطوات بسيطة عليك القيام بها عبر أداة فحص العنصر فى متصفح جوجل كروم. ستقوم فى البداية بالنقر على  زر (⋮) في الشريط العلوي لنافذة فحص العنصر، ومن القائمة المنسدلة اضغط على More tools ثم اضغط على خيار "Sensors". سيتم فتح نافذة جديدة في النصف السفلي من نافذة فحص العنصر، حيث ستقوم بفتح قائمة Geolocation لتحديد أي مدينة كموقعك الجغرافي مثل: سان فرانسيسكو، أو طوكيو..، ما عليك سوى تحديث صفحة الويب الآن لتجد أنه قد تم تجاوز الحظر بعدما أعتقد الموقع انك تتصفحه من المدينة المحددة.

هذه الطريقة تم تجربتها وهي ناجحة تمامًا، فقد تم اختبارها عن طريق موقع ?Where am I now الذي يعرض تفاصيل موقعك الجغرافي حاليًا. فعند زيارة الموقع لأول مرة ظهر العنوان الحقيقي الخاص بي فى خانة Your Address ولكن بعد تغيير الأبعاد الجغرافية بالخطوات المذكورة أعلاه، ظهر عنوان آخر مختلف تمامًا، حيث يقع فى مدينة "برلين" كما حددت من قائمة Geolocation. وبالتأكيد سيظهر عنوان الـ IP كما هو.

إذا كنت تريد إجراء عمليات حسابية بسيطة بشكل سريع، فلن تحتاج إلى الخروج من متصفح جوجل كروم واستخدام تطبيق الآلة الحاسبة الخاص بنظام التشغيل. كل ما عليك هو فتح أداة فحص العنصر والانتقال إلى علامة تبويب "Console" ومن هناك قم بإدخال تفاصيل العملية الحسابية وبالضغط على زر Enter يتم عرض النتيجة فورًا. لاحظ أنه يمكنك النقر كليك يمين داخل النافذة والضغط على Save as لحفظ هذه العمليات الحسابية في ملف نصي.