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

يجب ألا تختبر موقع ويب دون تجربة مجموعة أدوات DevTools^(DevTools) من Google Chrome أولاً. يتيح لك وضع مطور Chrome^(Chrome) تجربة واختبار موقع جديد (أو موقع حالي) للعثور على الأخطاء وإصلاحها. يمكن أن يمنحك أيضًا نظرة ثاقبة حول كيفية تشغيل المواقع الأخرى ، بما في ذلك عرض شفرة المصدر. 

إليك كل ما تحتاج لمعرفته حول وضع مطور متصفح Google Chrome ، والأدوات الموجودة به ، وكيفية استخدامه بفعالية.

ما هو وضع مطور Chrome؟^{(What Is Chrome Developer Mode?)}

عندما نشير إلى وضع مطور Chrome ، فإننا لا نتحدث عن نفس وضع المطور^{(same developer mode)} الذي ستراه على أجهزة Chromebook^{(Chromebooks)} . ما نشير إليه هو أدوات تطوير Chrome الشاملة (تسمى Google DevTools ) المضمنة في المتصفح نفسه.

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

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

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

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

كيفية الوصول إلى قائمة Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

هناك عدة طرق يمكنك من خلالها الوصول إلى قائمة Google Chrome DevTools ، اعتمادًا على الأداة التي ترغب في استخدامها.

أسهل طريقة للقيام بذلك هي من قائمة Google Chrome . للقيام بذلك ، انقر فوق رمز القائمة المكون من ثلاث نقاط^{(three-dots menu icon)} في أعلى اليمين. من القائمة التي تظهر ، انقر فوق More Tools > Developer Tools .

سيؤدي هذا إلى فتح مجموعة أدوات DevTools في قائمة جديدة على الجانب الأيمن من علامة تبويب أو نافذة Chrome المفتوحة.^(Chrome)

يمكنك أيضًا القيام بذلك باستخدام اختصارات لوحة المفاتيح. من جهاز كمبيوتر يعمل بنظام Windows^(Windows) أو Linux^{(Linux PC)} ، افتح متصفح Chrome واضغط على مفتاح F12 . يمكنك أيضًا الضغط على Ctrl + Alt + J أو Ctrl + Alt + I في علامة تبويب أو نافذة Chrome مفتوحة .

في نظام macOS ، اضغط على F12 أو اضغط على Option + Command + J أو Option + Command + I لفتح قائمة Chrome DevTools بدلاً من ذلك. سيؤدي هذا إلى فتح وحدة تحكم Chrome ، مع خيارات للانتقال إلى أدوات Chrome الأخرى أعلى قائمة DevTools .

إذا كنت ترغب في ذلك ، يمكنك عرض التعليمات البرمجية المصدر لموقع ويب (فتح علامة التبويب العناصر في قائمة ^(Elements)DevTools في العملية) على أي صفحة ويب مفتوحة عن طريق النقر بزر الماوس الأيمن فوق الخيار ^(DevTools)فحص^{(Inspect )} والنقر عليه .

باستخدام Chrome DevTools^{(Using Chrome DevTools)}

كما تطرقنا لفترة وجيزة ، يمكنك استخدام مجموعة أدوات Chrome DevTools لمعرفة كود المصدر لموقع ويب ضمن علامة التبويب العناصر . ^(Elements)سيتيح لك تحليل الكود الموجود خلف الصفحة التي قمت بتحميلها ، بالإضافة إلى عرض رسائل الخطأ (التي تشير إلى المشكلات المتعلقة بكيفية تحميل الموقع) في وحدة تحكم Chrome ضمن علامة التبويب وحدة التحكم .^(Console)

يمكنك أيضًا عرض المصادر المختلفة للمحتوى من موقع ويب ضمن علامة التبويب المصادر . ^(Sources)على سبيل المثال ، إذا كان أحد المواقع يستخدم شبكة توصيل المحتوى (CDN)^{(using a content delivery network (CDN))} ، فسيتم إدراج الوسائط من أحد المواقع كمصدر مختلف هنا.

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

إذا كنت ترغب في اختبار كيفية أداء موقع ما ، فيمكنك مراقبة استخدام الشبكة وتسجيله ضمن علامة التبويب "الشبكة"^(Network) . سيعرض هذا السرعة والحجم ونوع طلبات الشبكة التي يتم إجراؤها بين المتصفح والموقع.

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

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

يشتهر Google Chrome بكونه صعبًا على ذاكرة جهاز الكمبيوتر الخاص بك^{(being hard on your PC memory)} ، لذا يمكنك اختبار استخدام ذاكرة JavaScript لموقعك ضمن علامة تبويب الذاكرة . ^(Memory)يمكن استخدام ملفات تعريف اختبار Chrome المختلفة هنا ، مع مزيد من المعلومات حول هذا الاختبار في ^{(Different Chrome)}صفحة وثائق Chrome DevTools^{(Chrome DevTools documentation page)} .

لمزيد من التحليل المتعمق لمحتوى موقعك ، بالإضافة إلى أي تخزين للمستعرض قد يستخدمه (على سبيل المثال ، لتسجيل البيانات) ، يمكنك البحث من خلال علامة التبويب التطبيق . ^{(Application)}يمكنك عرض معلومات ملف تعريف ارتباط الموقع هنا ضمن قسم ملفات تعريف الارتباط^(Cookies) ، أو مسح التخزين المستخدم بالنقر فوق خيار مسح التخزين^{(Clear storage)} .

إذا كنت قلقًا بشأن أمان موقعك ، فيمكنك التحقق من مدى أدائه ضمن علامة التبويب " الأمان^{(Security )} " . سيعطيك هذا نظرة عامة سريعة على تحليل أمان Chrome لصفحة ، بما في ذلك ما إذا كانت الصفحة تحتوي على شهادة SSL صحيحة وموثوقة أم لا.^(SSL)

إذا كنت ترغب في إنشاء تقرير عن أداء موقعك ، بما في ذلك ما إذا كان يفي بمعايير المستخدم النموذجية وإذا كان أداء الموقع قد يؤثر على تحسين محرك البحث ، فيمكنك النقر فوق علامة التبويب Lighthouse . يوفر هذا إعدادات يمكنك التحقق منها أو إلغاء تحديدها لتقريرك — انقر فوق " إنشاء تقرير^{(Generate report)} " لإنشاء التقرير لعرضه.

هذا بالكاد يخدش سطح الإمكانات التي يمكن أن يوفرها وضع مطور Chrome للمطورين. ^(Chrome)إذا كنت تريد معرفة المزيد ، فيجب أن تساعدك وثائق Chrome DevTools^{(Chrome DevTools documentation)} في الأدوات والميزات المعروضة ، بما في ذلك كيفية إنشاء اختبارات المستخدم الخاصة بك باستخدامها. 

حيل جوجل كروم المتقدمة^{(Advanced Google Chrome Tricks)}

لن يعرف معظم مستخدمي Chrome أبدًا أن مجموعة أدوات Google Chrome DevTools موجودة في متصفحهم ، ولكن بالنسبة للمستخدمين المحترفين ، تظل طريقة مفيدة بشكل استثنائي لاختبار مواقع الويب وتحليلها. هناك أيضًا ملحقات Chrome لجهات خارجية لمطوري الويب^{(Chrome extensions for web developers)} متاحة للمساعدة في اختبار موقعك بشكل أكبر.

إذا كنت تقوم بإنشاء موقع ويب أساسي^{(building a basic website)} ، فقد يساعدك التبديل إلى وضع مطور Chrome في اكتشاف الأخطاء في موقعك والتي لا تظهر على الفور. لا يمكنك القيام بذلك إلا إذا كان Chrome يعمل بشكل صحيح ، لذلك إذا كنت تعاني من تعطل Chrome^{(struggling with Chrome crashes)} ، فقد تحتاج إلى إعادة تعيين متصفحك أو إعادة تثبيته أولاً.

What Is Chrome Developer Mode & What Are Its Uses?

No website iѕ built perfectly. Like all products made by humans, code errors are part of the prоcess. That’s why it’s important to thoroughly test any new website you build to make sure that it’s as free of errors as possible to give your users thе bеst possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Google Chrome Autofill: دليل كامل

• أفضل 10 إضافات للخصوصية لمتصفح Chrome (2022)

• استخدم 4 ملحقات كروم لتشفير رسائل Gmail الخاصة بك

• إعدادات محتوى Google Chrome: دليل كامل

• ما هي أفضل خدمة اتصال جماعي - أفضل التطبيقات مقارنة

• هل يعمل استرداد ملفات Windows من Microsoft؟ اختبرناها.

• 4 أفضل تطبيقات برامج إعادة توجيه المنافذ وكيفية استخدامها

• 5 تطبيقات محمولة تريد بالتأكيد الحصول عليها على USB Stick

• أفضل 7 أدوات لإزالة Bloatware لنظام التشغيل Windows

• أفضل التطبيقات لمراقبة استخدام الإنترنت

• أشياء يجب مراعاتها قبل إنشاء الويكي الخاص بك

• أفضل 4 بدائل لـ Google Chromecast

• 7 طرق لفتح ملف MDB بدون Microsoft Access

• ما هو Microsoft Power Automate والقوالب المجانية للتنزيل

• أفضل 11 برنامج لقطة شاشة مجانية لنظام التشغيل Windows

• أفضل البرامج لإضافة وظائف جديدة إلى Windows 10

• 9 طرق لتسجيل اللعب على جهاز الكمبيوتر الخاص بك

• أفضل محرري Markdown: جميع المنصات وعبر الإنترنت

• 4 أدوات رائعة لإنشاء حزم Windows Installer

• 5 أفضل مواقع تنزيل APK آمنة لتطبيقات Android