گوگل کروم^{(Google Chrome)} یکی از محبوب ترین مرورگرهای وب برای توسعه وب به دلیل ویژگی های پیشرفته ای است که دارد. ابزارهای برنامه‌نویس کروم^{(Chrome Developer Tools)} می‌توانند هنگام اشکال‌زدایی بسیار مفید باشند. بسیاری از ما از قبل می‌دانیم که می‌توانیم CSS زنده را با استفاده از Chrome Dev Tools ویرایش کنیم ، اما نکات بیشتری وجود دارد که امروز با شما به اشتراک می‌گذاریم.

نکات ابزار توسعه کروم

بسیاری از ترفندهای ناشناخته و پنهان ابزار توسعه کروم^{(Chrome Dev Tools)} وجود دارد که ما به دنبال مفیدترین ترفندها در میان آنها خواهیم بود. برای باز کردن ابزارهای توسعه دهنده در کروم^(Chrome) ، F12 را روی صفحه کلید خود فشار دهید و ترفندهای زیر را امتحان کنید.

1. هر فایلی را پیدا کرده و باز کنید

هنگامی که ما در حال توسعه وب هستیم، با بسیاری از فایل های HTML ، CSS ، JS و سایر فایل ها سروکار داریم. وقتی می‌خواهیم هر چیزی را اشکال‌زدایی کنیم، ابزار Chrome Dev را باز می‌کنیم . می توانید به سرعت فایل خاص را جستجو و پیدا کنید تا کار خود را آسان تر کنید. فقط ^(Just)Ctrl + P را فشار دهید و شروع به تایپ نام فایل کنید. این به شما کمک می کند تا فایل خاصی را از لیست فایل ها پیدا کنید.

2. در فایل منبع جستجو کنید

در ترفند قبلی با نحوه جستجوی یک فایل خاص آشنا شدیم. حتی می توانید یک رشته خاص را در تمام فایل های بارگذاری شده جستجو کنید. Ctrl + Shift + F را برای جستجوی رشته در فایل ها فشار دهید. همچنین از عبارات منظم پشتیبانی می کند.

3. به یک خط خاص بروید

وقتی فایل منبعی را باز کردید و می‌خواهید به یک خط خاص بروید، Ctrl + G را فشار دهید و شماره خط را بدهید و اینتر را بزنید.

4. انتخاب عناصر DOM در تب Console

Dev Tools همچنین به شما امکان می دهد عناصر موجود در کنسول را انتخاب کنید.

• $() – رخداد^(Returns) انتخابگر CSS منطبق را برمی‌گرداند.
• $$() – آرایه ای از عناصر مطابق با انتخابگر CSS داده شده را برمی گرداند.^(CSS)

برای دستورات بیشتر کنسول، به این پست سر بزنید.^{(this post.)}

5. از چند گاریت استفاده کنید

گاهی اوقات، می‌خواهید چندین کارت را در مکان‌های مختلف تنظیم کنید و می‌توانید این کار را به راحتی در ابزارهای Chrome Dev با نگه داشتن کلید ^{(Chrome Dev)}Ctrl و کلیک کردن روی جایی که می‌خواهید آنها را قرار دهید، انجام دهید. سپس شروع به نوشتن کنید و خواهید دید که در مکان های مختلف انتخاب شده قرار می گیرد.

6. ثبت گزارش را حفظ کنید

حفظ^(Preserve) گزارش به شما کمک می کند تا حتی صفحه بارگیری شده را نیز حفظ کنید. گزينه كنار Preserve log در Console log را علامت بزنيد و لاگ حفظ شود. این گزارش را قبل از بارگیری صفحه نشان می دهد و برای بررسی اشکالات مفید است.

7. از زیباکننده کد داخلی استفاده کنید

Chrome Dev Tools دارای یک کد زیباساز داخلی به نام چاپ زیبا "{}"^{(pretty print “{}”)} است. ابزار توسعه دهنده کد کوچک شده را نشان می دهد و خواندن آن چندان آسان نیست. روی^(Click) دکمه چاپ زیبا که در پایین سمت چپ در فایل منبع باز نشان داده شده است کلیک کنید تا فایل منبع در قالب قابل خواندن توسط انسان نمایش داده شود.

8. آیا وب سایت شما موبایل فرندلی است؟ اینجا را بررسی کنید

Chrome Dev Tools همچنین به ما امکان می دهد بررسی کنیم که آیا یک وب سایت سازگار با موبایل است یا خیر. می توانید بررسی کنید که وب سایت شما در دستگاه های مختلف چگونه به نظر می رسد. به ابزارهای Chrome Dev بروید و در تب ^{(Chrome Dev)}Emulation ، می‌توانید دستگاه‌های مختلف را فایل کنید. دستگاه مورد نظر خود را انتخاب کنید و بررسی کنید که وب سایت شما در آن دستگاه چگونه به نظر می رسد.

برای اطلاعات بیشتر، ویدیوی زیر را ببینید.

9. سنسورها و موقعیت جغرافیایی را شبیه سازی کنید^{(Geographical Location)}

حتی می توانید حسگرهایی مانند صفحه نمایش لمسی و شتاب سنج را شبیه سازی کنید. حتی می توانید موقعیت جغرافیایی را تقلید کنید. برای انجام این کار، به Emulation -> Sensors.

10. وقوع بعدی کلمه فعلی را انتخاب کنید

اگر می‌خواهید کلمه را جایگزین کنید، کلمه را انتخاب کنید و Ctrl + D را فشار دهید تا تکرار بعدی کلمه انتخاب شده انتخاب شود. سپس، می توانید آن کلمه را در همه موارد آن در یک شات ویرایش کنید.

11. تغییر فرمت رنگ

فقط از Shift + Click بر روی پیش نمایش رنگ برای تغییر در قالب بندی rgba، هگزادسیمال و hsl استفاده کنید.

12. از طریق فضای کاری تغییرات را به فایل های محلی اضافه کنید^(Add)

ما قادر به ویرایش فایل‌های منبع و ایجاد برخی تغییرات در CSS ، جاوا اسکریپت^(JavaScript) و سایر فایل‌ها در ابزارهای Chrome Dev هستیم. ^{(Chrome Dev)}برای افزودن این تغییرات به فایل‌های محلی، دیگر نیازی به کپی پیست کردن تغییرات از فضای کاری به فایل‌های روی دیسک نیست. ابزارهای Chrome Dev^{(Chrome Dev)} به شما این امکان را می دهند که فایل ها را مطابقت دهید و فایل محلی را با تغییراتی که در ابزار توسعه انجام داده اید به روز کنید. برای انجام این کار روی فایل منبع در سمت چپ در تب Sources کلیک راست کرده و ^{(Sources )}Add Folder to Workspace را انتخاب کنید.^{(Add Folder to workspace.)}

امیدوارم این کمک کند.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one оf the popular web browsers for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• بهترین Google Chrome Tips and Tricks برای کاربران Windows PC

• 3 نکته و ترفند مفید برای استفاده از یادداشت های چسبناک

• چگونه برای دانلود Font از Website با استفاده از Developer Tools

• Restart Chrome، Edge or Firefox بدون از دست دادن زبانه ها در Windows 11/10

• نکات در استفاده از Inspect Element از Google Chrome browser

• چگونه به رفع 403 Forbidden Error در Google Chrome

• Put Chrome و سایر مرورگرهای دیگر در صفحه کامل (Edge، Firefox و Opera)

• رفع مشکل: Google Chrome هنگام بازدید از یک وب سایت از پردازنده (CPU) زیادی استفاده می کند

• چگونه می توان در Chrome، Firefox، Edge و Opera پیگیری نکنید

• Combine همه Your Email Accounts به یکی Gmail Inbox

• گوگل کروم برای مک: چگونه آن را دریافت کنیم!

• چگونه برای قرار دادن Google Chrome در Dark Mode

• DNS در جستجوی HTTPS یا Secure DNS چیست؟ آن را در گوگل کروم فعال کنید!

• چگونه می توانم استفاده کنم Google Input Tools در من ویندوز 10 کامپیوتر؟

• چگونه به خار چیدن Adobe Flash Player در Google Chrome

• نحوه رفع کد خطای Netflix M7111-1101

• Make InPrivate or Incognito shortcuts برای Firefox، Chrome، Edge، Opera یا Internet Explorer

• چگونه می Rid از Yahoo Search در Chrome

• سوالات ساده: کوکی ها چیست و چه کاری انجام می دهند؟

• Identify فونت در Chrome، Edge and Firefox با استفاده از Developer Tools