يعد Google Chrome^{(Google Chrome)} أحد متصفحات الويب الشائعة لتطوير الويب ، نظرًا لميزاته المتقدمة. يمكن أن تكون أدوات مطوري Chrome^{(Chrome Developer Tools)} مفيدة جدًا أثناء تصحيح الأخطاء. يعلم معظمنا بالفعل أنه يمكننا تحرير CSS المباشر باستخدام Chrome Dev Tools ، ولكن هناك المزيد من النصائح التي سنشاركها معك اليوم.

نصائح حول أدوات تطوير Chrome

هناك العديد من الحيل غير المعروفة والمخفية لأدوات Chrome Dev^{(Chrome Dev Tools)} وسوف نبحث في أكثر الحيل المفيدة فيما بينها. لفتح أدوات المطور في Chrome ، اضغط على F12 على لوحة المفاتيح وجرب الحيل التالية.

1. ابحث عن أي ملف وافتحه

عندما نقوم بتطوير الويب ، نتعامل مع العديد من ملفات HTML و CSS و JS وغيرها من الملفات. عندما نريد تصحيح أي شيء ، نفتح أدوات Chrome Dev . يمكنك البحث والعثور بسرعة على ملف معين لتسهيل عملك. فقط^(Just) ، اضغط على Ctrl + P وابدأ في كتابة اسم الملف. يساعدك هذا في العثور على ملف معين من قائمة الملفات.

2. ابحث داخل الملف المصدر

في الحيلة السابقة ، توصلنا إلى معرفة كيفية البحث عن ملف معين. يمكنك حتى البحث عن سلسلة معينة في جميع الملفات المحملة. اضغط على Ctrl + Shift + F للبحث عن سلسلة في الملفات. كما يدعم التعبيرات العادية.

3. انتقل إلى سطر معين

بمجرد فتح أي ملف مصدر وتريد الانتقال إلى سطر معين ، اضغط على Ctrl + G وأدخل رقم السطر واضغط على Enter.

4. تحديد عناصر DOM في علامة التبويب وحدة التحكم^(Console)

تتيح لك أدوات Dev^{(Dev Tools)} أيضًا تحديد العناصر في وحدة التحكم.

• $() – إرجاع^(Returns) التواجد الأول لمحدد CSS المطابق.^(CSS)
• $$() – يُرجع مصفوفة العناصر المطابقة لمحدد CSS المحدد.

لمزيد من أوامر وحدة التحكم ، توجه إلى هذا المنشور.^{(this post.)}

5. الاستفادة من علامات الإقحام المتعددة

في بعض الأحيان ، تريد تعيين علامات الإقحام المتعددة في أماكن مختلفة ويمكنك القيام بذلك بسهولة في أدوات Chrome Dev بالضغط على مفتاح Ctrl والنقر في المكان الذي تريد وضعها فيه. ثم ابدأ الكتابة وسترى ما تم وضعه في أماكن مختلفة مختارة.

6. الاحتفاظ بالسجل

^(Preserve)يساعدك الاحتفاظ بالسجل على استمرار السجل حتى يتم تحميل الصفحة. حدد الخيار الموجود بجانب الاحتفاظ بالسجل^{(Preserve log )} في سجل وحدة التحكم^(Console) ويتم الاحتفاظ بالسجل. يظهر هذا السجل قبل الصفحة غير محملة ويساعد في التحقيق في الأخطاء.

7. استخدام مُجمل التعليمات البرمجية المدمج

تحتوي أدوات Chrome Dev Tools^{(Chrome Dev Tools)} على مُجمل الشفرة المدمج المسمى بـ pretty print "{}" . تعرض أداة المطور الكود المصغر وليس من السهل قراءته. انقر فوق^(Click) زر الطباعة الجميلة الذي يظهر في الجزء السفلي الأيسر من ملف المصدر المفتوح ، لإظهار الملف المصدر بتنسيق يمكن قراءته بواسطة الإنسان.

8. هل موقع الويب الخاص بك متوافق مع الجوّال؟ تحقق منه هنا

تتيح لنا أدوات Chrome Dev^{(Chrome Dev Tools)} أيضًا التحقق مما إذا كان موقع الويب مناسبًا للجوال أم لا. يمكنك التحقق من شكل موقع الويب الخاص بك على الأجهزة المختلفة. توجه إلى أدوات Chrome Dev وتحت علامة التبويب Emulation ، يمكنك تقديم أجهزة مختلفة. حدد الجهاز الذي تريده واختبر كيف يبدو موقع الويب الخاص بك على هذا الجهاز.

لمزيد من المعلومات ، قم بإلقاء نظرة على الفيديو التالي.

9. محاكاة أجهزة الاستشعار والموقع الجغرافي^{(Geographical Location)}

يمكنك حتى محاكاة أجهزة الاستشعار مثل شاشات اللمس ومقاييس التسارع. يمكنك حتى محاكاة الموقع الجغرافي. للقيام بذلك ، توجه إلى Emulation -> Sensors.

10. حدد التكرار التالي للكلمة الحالية

إذا كنت تريد استبدال الكلمة في كل تواجدها ، فحدد الكلمة واضغط على Ctrl + D لتحديد التكرار التالي للكلمة المحددة. بعد ذلك ، يمكنك تعديل هذه الكلمة في جميع تكراراتها في لقطة واحدة.

11. تعديل تنسيق اللون

ما عليك سوى استخدام Shift + Click معاينة اللون لتغيير التغييرات بين تنسيق rgba و hexadecimal و hsl.

12. إضافة^(Add) التغييرات إلى الملفات المحلية من خلال مساحة العمل

نحن قادرون على تحرير ملفات المصدر وإجراء بعض التغييرات في CSS وجافا سكريبت^(JavaScript) وملفات أخرى في أدوات Chrome Dev . لإضافة هذه التغييرات إلى الملفات المحلية ، فلا داعي لنسخ ولصق التغييرات من مساحة العمل إلى الملفات الموجودة على القرص. تتيح لك أدوات Chrome Dev^{(Chrome Dev)} مطابقة الملفات وتحديث الملف المحلي بالتغييرات التي أجريتها في أدوات التطوير. للقيام بذلك ، انقر بزر الماوس الأيمن على الملف المصدر على الجانب الأيسر في علامة التبويب المصادر^{(Sources )} وحدد إضافة مجلد إلى مساحة العمل.^{(Add Folder to workspace.)}

أتمنى أن يساعدك هذا.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrоme is one of the populаr 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

• كيف يمكنني استخدام Google Input Tools على جهاز الكمبيوتر الخاص بي Windows 10؟

• كيفية إيقاف Chrome الإخطارات على الروبوت: الدليل الكامل

• كيفية طباعة مقالة بدون إعلانات في جميع المتصفحات الرئيسية

• كيفية تغيير Your Name على Google Meet

• كيفية كتم علامة تبويب في Chrome و Firefox و Microsoft Edge و Opera

• Go incognito مع shortcut key في Chrome، Edge، Firefox، و Opera

• 15 أفضل VPN ل Google Chrome إلى Access Blocked Sites

• كيفية إصلاح رمز خطأ Netflix M7111-1101

• مسح Site Data لموقع معين في Chrome or Edge باستخدام Developer Tools

• Make InPrivate or Incognito shortcuts ل Firefox، Chrome، Edge، Opera، أو Internet Explorer

• كيفية إيقاف تشغيل إشعارات Chrome: كل ما تحتاج إلى معرفته

• إصلاح يوتيوب التشغيل التلقائي لا يعمل

• كيفية تغيير search engine على Chrome ل Windows، ماوس، Android، و iOS

• كيفية نشر الصور على Instagram من جهاز كمبيوتر

• كيفية الحصول على Rid من Yahoo Search في Chrome