^{(Google Chrome)}Google ^{(Google Chrome)}Chrome نه تنها برای کاربران معمولی اینترنت، بلکه برای توسعه دهندگان وب نیز طراحی شده است، که اغلب یک وب سایت ایجاد می کنند، وبلاگ طراحی می کنند^{(Inspect Element )} و غیره .^{(Inspect )} . در اینجا چند نکته در مورد استفاده از Inspect Element مرورگر ^{(Inspect Element)}Google Chrome برای رایانه شخصی ویندوز آورده^{(Windows PC)} شده است.

عنصر Google Chrome را بررسی کنید

1] Find hidden JavaScript/Media files

اگر بازدیدکننده بیش از 15 یا 20 ثانیه در صفحه وب بماند، بسیاری از وب سایت ها پنجره های بازشو را نشان می دهند. یا، بسیاری از اوقات یک تصویر، تبلیغ یا نماد پس از کلیک کردن در جایی به طور تصادفی باز می شود. برای پیدا کردن این فایل‌های مخفی در یک صفحه وب، می‌توانید از برگه Sources در ^(Sources)Inspect Element استفاده کنید. فهرستی از نمای درختی در سمت چپ نشان می دهد که می توان آن را کاوش کرد.

2] Get HEX/RGB color code in Chrome

گاهی ممکن است رنگی را دوست داشته باشیم و بخواهیم کد رنگ آن را بدانیم. با استفاده از گزینه بومی در Google Chrome ، می‌توانید کد رنگ ^{(Google Chrome)}HEX یا RGB مورد استفاده در یک صفحه وب خاص را به راحتی پیدا کنید . بر روی رنگ کلیک راست^{(Right-click)} کرده و بر روی Inspect کلیک کنید . بیشتر اوقات، کد رنگ را در سمت راست با CSS های دیگر دریافت می کنید. اگر آن را نمی بینید، خوب، ممکن است مجبور شوید از نرم افزار انتخاب رنگ رایگان استفاده کنید.

نکته : به این ^(TIP)ابزارهای آنلاین انتخاب رنگ^{(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 Google Chrome یک همراه واقعی هر توسعه دهنده وب است . فرقی نمی کند که یک وب سایت تک صفحه ای ایجاد می کنید یا یک وب سایت پویا، مطمئناً می توانید از این نکات استفاده کنید.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular internet users but also for web developers, who often create a website, desіgn blogs, etc. Τhe 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 است

• چگونه برای فعال کردن و غیر فعال کردن Window Naming در Google Chrome

• چگونه برای تغییر اندازه فونت پیش فرض در Google Chrome browser

• چگونه برای فعال کردن و استفاده از Reading List در Google Chrome

• Skype Extension برای Google Chrome به شما امکان دسترسی به Skype برای Web و بیشتر!

• Google Chrome است منتظر حافظه پنهان - چه کار کنم؟

• Profile Manager غیر فعال کردن در Google Chrome در Windows 10

• چگونه Material Design UI جدید را برای Google Chrome browser فعال کنیم

• ساعت شما جلو است یا ساعت شما عقب است خطا در Google Chrome

• چگونه برای فعال کردن و استفاده از Commander feature در Google Chrome

• چگونه برای حذف Global Media Control button از Google Chrome toolbar

• جعبه Fix Blurry File Open dialog در Google Chrome and Microsoft Edge

• Google Chrome Browsing History and Data را روشن نخواهد کرد

• چگونه به طور خودکار Spell Checker را در Google Chrome روشن کنید

• Best YouTube پسوند برای Google Chrome برای بهبود تجربه

• Google Chrome برنامه های افزودنی در Windows 10 کار نمی کنند