تم تصميم Google Chrome^{(Google Chrome)} ليس فقط لمستخدمي الإنترنت العاديين ولكن أيضًا لمطوري الويب ، الذين غالبًا ما يقومون بإنشاء موقع ويب أو تصميم مدونات وما إلى ذلك. يساعد خيار فحص العنصر^{(Inspect Element )} أو فحص في ^{(Inspect )}Google Chrome المستخدمين في العثور على بعض المعلومات حول موقع ويب مخفي عن العرض . فيما يلي بعض النصائح حول استخدام Inspect Element لمتصفح Google Chrome لأجهزة الكمبيوتر التي تعمل بنظام Windows^{(Windows PC)} .

فحص عنصر جوجل كروم

1] Find hidden JavaScript/Media files

تعرض العديد من مواقع الويب النوافذ المنبثقة إذا بقي الزائر على صفحة الويب لأكثر من 15 أو 20 ثانية. أو ، يتم فتح صورة أو إعلان أو رمز في كثير من الأحيان بعد النقر في مكان ما بشكل عشوائي. للعثور على هذه الملفات المخفية على صفحة ويب ، يمكنك الاستفادة من علامة التبويب " المصادر " في " ^(Sources)فحص العنصر^{(Inspect Element)} " . يعرض قائمة عرض شجرة على الجانب الأيسر يمكن استكشافها.

2] Get HEX/RGB color code in Chrome

في بعض الأحيان قد نحب اللون وقد نرغب في معرفة رمز اللون الخاص به. يمكنك بسهولة العثور على رمز اللون HEX أو RGB المستخدم في صفحة ويب معينة ، باستخدام الخيار الأصلي في Google Chrome . انقر بزر الماوس الأيمن فوق^{(Right-click)} اللون ، وانقر فوق فحص^(Inspect) . في معظم الأحيان ، ستحصل على رمز اللون على الجانب الأيمن مع CSS الأخرى . إذا لم تره ، حسنًا ، فقد تضطر إلى استخدام بعض برامج منتقي الألوان المجانية.

تلميح^(TIP) : ألق نظرة على أدوات Color Picker المتوفرة عبر الإنترنت^{(Color Picker online tools)} أيضًا.

3] احصل على نصائح لتحسين أداء صفحة الويب^{(3] Get web page performance improvement tips)}

يحب الجميع الوصول إلى موقع ويب يفتح بسرعة. إذا كنت تصمم موقع الويب الخاص بك ، فيجب أن تضع ذلك في الاعتبار دائمًا. هناك العديد من الأدوات للتحقق من سرعة تحميل الصفحة وتحسينها. ومع ذلك ، يأتي Google Chrome أيضًا مع أداة مدمجة تتيح للمستخدمين الحصول على نصائح لتحسين سرعة تحميل موقع الويب. للوصول إلى هذه الأدوات ، انتقل إلى علامة التبويب عمليات التدقيق^(Audits) ، وتأكد من تحديد استخدام^{(Network Utilization)} الشبكة وأداء صفحة الويب^{(Web Page Performance)} وإعادة تحميل الصفحة والتدقيق عند التحميل^{(Reload Page and Audit on Load)} . ثم اضغط على زر التشغيل^{(Run )} . سيعيد تحميل الصفحة ويعرض لك بعض المعلومات التي يمكن استخدامها لجعل الصفحة أسرع. على سبيل المثال ، يمكنك الحصول على جميع الموارد التي لا تحتوي على أي انتهاء صلاحية ذاكرة التخزين المؤقت ، JavaScriptيمكن دمجها في ملف واحد ، وهكذا.

4] تحقق من الاستجابة^{(4] Check responsiveness)}

إن جعل صفحة الويب تستجيب أمرًا بالغ الأهمية في الوقت الحاضر. هناك الكثير من الأدوات التي يمكنها التحقق مما إذا كان موقعك مستجيبًا تمامًا أم لا. ومع ذلك ، تساعد أداة Google Chrome هذه المستخدمين في معرفة ما إذا كان الموقع مستجيبًا أم لا وكذلك التحقق من الشكل الذي سيبدو عليه على جهاز محمول معين. افتح أي موقع ويب ، أو احصل على علامة التبويب " فحص العنصر^{(Inspect Element )} " ، أو انقر فوق زر الهاتف المحمول^{(mobile )} ، أو اضبط الدقة ، أو حدد الجهاز المطلوب لاختبار صفحة الويب.

5] تحرير الموقع المباشر^{(5] Edit live website)}

لنفترض أنك تقوم بإنشاء صفحة ويب ، لكنك محتار بشأن نظام الألوان أو حجم قائمة التنقل أو المحتوى أو نسبة الشريط الجانبي. يمكنك تعديل موقع الويب المباشر الخاص بك باستخدام خيار فحص العنصر في ^{(Inspect Element)}Google Chrome . على الرغم من أنه لا يمكنك حفظ التغييرات على موقع ويب مباشر ، إلا أنه يمكنك إجراء جميع عمليات التحرير بحيث يمكنك استخدامها بشكل أكبر. للقيام بذلك ، افتح Inspect Element ، وحدد خاصية HTML من الجانب الأيسر وقم بإجراء تغييرات على النمط على الجانب الأيمن. إذا قمت بإجراء أي تغيير في CSS ، فيمكنك النقر فوق ارتباط الملف ، ونسخ الرمز بالكامل ولصقه في الملف الأصلي.

يعد Inspect Element^{(Inspect Element)} من Google Chrome رفيقًا حقيقيًا لكل مطور ويب. لا يهم ما إذا كنت تطور موقعًا من صفحة واحدة أو موقعًا ديناميكيًا ، يمكنك بالتأكيد استخدام هذه النصائح.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular internet users but alsо for web developers, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome لا يستجيب، Relaunch الآن؟

• كيفية إصلاح أخطاء File Download على Google Chrome browser

• كيفية تغيير Default Print Settings في Google Chrome

• كيفية Destroy Profile على Browser Close في Google Chrome

• Anna Assistant هو مثالي voice assistant ل Google Chrome

• Fix ERR_CACHE_MISS error رسالة على Google Chrome

• Video Speed Controller ل Mozilla Firefox and Google Chrome

• كيفية تمكين Material Design UI الجديد ل Google Chrome browser

• Google Chrome التنزيلات الحصول على عالقة في 100٪

• Google Chrome لن يملح Browsing History and Data

• ساعتك قبل أو الخاص على مدار الساعة وراء خطأ على Google Chrome

• Fix ERR_SPDY_PROTOCOL_ERROR error في Google Chrome

• Best YouTube ملحقات ل Google Chrome لتحسين الخبرة

• كيفية استيراد أو تصدير الإشارات المرجعية Google Chrome إلى HTML file

• سيقوم Great Suspender تلقائيا بتعليق علامات التبويب على Google Chrome

• كيفية إصلاح AW، Snap! error message في Google Chrome browser

• Google Chrome vs Firefox Quantum ل Windows 10

• كيفية تغيير حجم الخط الافتراضي في Google Chrome browser

• يتيح لك Skype Extension ل Google Chrome الوصول إلى Skype ل Web وأكثر!

• كيفية تمكين وتعطيل Window Naming في Google Chrome