أهم الحيل التي يمكنك اكتشافها باستخدام Element Inspector في المتصفح

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

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

Table of Contents

1. تنزيل الصور

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

إما أن يقوم المطورون بتعطيل زر “حفظ الصورة” عن قصد، أو أنهم يستخدمون إطار عمل ويب لا يدعم الصور مثل هذه. هناك حل بديل أنيق لذلك في Element Inspector. يمكنك في الواقع الحصول على أي أصل صورة من موقع ويب، بالحجم الكامل، في ثلاث خطوات سهلة.

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

الخطوة 1

انقر بزر الماوس الأيمن في أي مكان على الصفحة وانقر فوق “فحص العنصر” أو “فحص”. يمكنك أيضًا العثور على اختصار لوحة المفاتيح المحدد للمفتش واستخدامه داخل المتصفح الخاص بك. يعمل F12 مع معظم المتصفحات وأنظمة التشغيل. أنا أستخدم Firefox لهذا العرض التوضيحي، لكن الخطوات متطابقة.

الخطوة 2

داخل نافذة فحص العنصر، انقر فوق علامة التبويب “الشبكة”. يجب أن تحتوي علامة التبويب “الشبكة” على “الصور” كواحدة من القوائم الفرعية. انقر فوق “الصور”.

أعد تحميل الصفحة الآن، بحيث تظهر جميع أصول الصور في علامة التبويب “الصور”. استخدم زر التحديث بجوار شريط العنوان في المتصفح الخاص بك أو اضغط على Ctrl+R.

إلى الخطوة 3

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

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

2. تنزيل مقاطع الفيديو

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

الخطوة 1

افتح نافذة فحص العنصر بالضغط على اختصار لوحة المفاتيح F12 (يجب أن يعمل هذا مع معظم الأنظمة). بدلاً من ذلك، يمكنك النقر بزر الماوس الأيمن في أي مكان على صفحة الويب وتحديد “فحص”. يجب أن تظهر نافذة فاحص العناصر.

الخطوة 2

انقر فوق علامة التبويب “الشبكة”، ثم انقر فوق “الوسائط” لتصفية كل شيء باستثناء ملفات الفيديو. أعد تحميل الصفحة. إما بالنقر فوق زر تحديث المتصفح أو الضغط على Ctrl+R.

إلى الخطوة 3.

يجب تحميل ملفات الفيديو في قائمة. لا يمكنك معاينتها على الفور، ولكن يمكنك النقر نقرًا مزدوجًا فوق ملف لفتحه في علامة تبويب جديدة. هنا، يمكنك ببساطة النقر بزر الماوس الأيمن وتنزيله.

3. التقاط لقطات شاشة للصفحة بأكملها

إذا كنت تريد حفظ صفحة ويب كاملة، يمكنك تنزيلها بسرعة كملف PDF أو HTML. ولكن ماذا لو كنت تريد التقاط لقطة شاشة عادية للصفحة بأكملها؟ إليك الطريقة.

يحتوي متصفح Firefox على أداة مخصصة لالتقاط لقطات الشاشة في قائمة السياق العادية، لذا سأوضح لك كيفية القيام بذلك في متصفح Google Chrome والمتصفحات الأخرى.

افتح أداة الفحص بالنقر بزر الماوس الأيمن في أي مكان على الصفحة أو الضغط على F12.

اضغط على Ctrl+Shift+P لفتح نافذة التشغيل. اكتب “التقاط لقطة شاشة بالحجم الكامل” في هذه النافذة. انقر عليها.

ستظهر لك على الفور نافذة “حفظ باسم” التي ستتيح لك حفظ لقطة الشاشة كاملة الصفحة بتنسيق JPG.

4. تظاهر بأنك تستخدم هاتفًا

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

في Chrome، افتح نافذة فحص العنصر من قائمة السياق التي تظهر عند النقر بزر الماوس الأيمن أو باستخدام F12. ثم انقر فوق أيقونة الكمبيوتر المحمول والهاتف الصغيرة في الزاوية العلوية اليسرى. يحتوي Firefox على زر مماثل يسمى وضع التصميم المستجيب (Ctrl+Shift+M).

ستحصل على قائمة بالأجهزة التي يمكنك محاكاتها، ويمكنك أيضًا ضبط حجم الشاشة يدويًا.

بمجرد اختيار جهاز محمول، ستلاحظ أن متصفحك يحاكي إيماءات اللمس أيضًا.

5. تحديد الخطوط

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

افتح أولاً أداة فحص العناصر. بعد ذلك، انقر فوق علامة التبويب “الشبكة” (قد تكون مخفية في قائمة الفائض) وحدد “الخط”.

ثم اضغط على Ctrl+R. سيتم تحميل الخطوط المعروضة في القائمة، على الأرجح بتنسيق WOFF. يمكنك تنزيلها مباشرةً بالنقر المزدوج على اسم الخط. على سبيل المثال، يستخدم How-To Geek خط Roboto كخط افتراضي.

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

6. تحرير النص على الصفحة (مؤقتًا)

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

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

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

يجب أن يظهر جزء النص ذي الصلة في علامة التبويب “العناصر”. ما عليك سوى النقر المزدوج فوقه واستبدال النص بأي شيء تريده.

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

7. حذف العناصر

تمامًا مثل تحرير النص، يمكنك أيضًا إزالة عناصر معينة من صفحة الويب. مرة أخرى، لا تدوم التغييرات إلا حتى تقوم بتحديث الصفحة.

انقر بزر الماوس الأيمن على العنصر الذي تريد إزالته، ثم انقر فوق “فحص” أو “فحص العنصر”.

مرر الماوس فوق علامتي “<div>” حتى يتم تمييز العنصر بالكامل. ثم اضغط على مفتاح الحذف.

هكذا، اختفى الأمر.

8. تحديد قيم الألوان

نصيحة أخرى للمبدعين: يمكنك سحب قيم RGB وHEX لأي لون على صفحة ويب باستخدام أداة القطارة التي ستجدها في فاحص العناصر.

انقر بزر الماوس الأيمن في أي مكان على الصفحة وافتح الفاحص. بشكل افتراضي، تفتح نافذة القواعد داخل علامة التبويب الفاحص. مرر لأسفل للعثور على أي خاصية تحمل علامة اللون.

يجب أن تحتوي خاصية اللون على دائرة أو مربع ملون بجوارها. انقر عليها لفتح أداة اختيار الألوان واضغط على أيقونة القطارة بجوارها.

يمكنك تحريك أداة القطارة هذه في أي مكان على الصفحة للبحث عن قيم الألوان. يؤدي النقر فوق أداة القطارة إلى ملء الخاصية تلقائيًا بقيمة اللون التي اخترتها للتو. ومن هنا يمكنك نسخها بسهولة.

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

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