هیچ وب سایتی به طور کامل ساخته نشده است. مانند تمام محصولات ساخته شده توسط انسان، خطاهای کد بخشی از فرآیند است. به همین دلیل مهم است که وب‌سایت جدیدی را که می‌سازید کاملاً آزمایش کنید تا مطمئن شوید که تا حد امکان عاری از خطا است تا بهترین تجربه ممکن را به کاربران خود ارائه دهید. 

شما نباید ابتدا یک وب سایت را بدون امتحان کردن کیت DevTools Google Chrome آزمایش کنید ^(DevTools). ^(Chrome)حالت برنامه‌نویس کروم^(Chrome) به شما امکان می‌دهد یک سایت جدید (یا یک سایت موجود) را برای یافتن و رفع اشکال‌ها امتحان کرده و به طور کامل آزمایش کنید. همچنین می‌تواند به شما بینشی در مورد نحوه اجرای سایر سایت‌ها، از جمله مشاهده کد منبع، بدهد. 

در اینجا همه چیزهایی که باید در مورد حالت برنامه نویس مرورگر گوگل کروم^{(Google Chrome)} ، ابزارهایی که دارد و نحوه استفاده موثر از آن بدانید، آورده شده است.

حالت برنامه نویس کروم چیست؟^{(What Is Chrome Developer Mode?)}

وقتی به حالت برنامه‌نویس Chrome اشاره می‌کنیم، در مورد ^(Chrome)همان حالت برنامه‌نویسی^{(same developer mode)} که در Chromebooks مشاهده می‌کنید صحبت نمی‌کنیم . آنچه ما به آن اشاره می کنیم ابزارهای توسعه گسترده کروم (به نام ^(Chrome)Google DevTools ) است که در خود مرورگر تعبیه شده است.

اینها ابزارهایی هستند که برای آزمایش، تجزیه و تحلیل و شکستن عمدی (در صورت نیاز) صفحه وب که در مرورگر Google Chrome برای اهداف آزمایشی بارگذاری کرده اید، طراحی شده اند. در سطح ابتدایی، می‌توانید از DevTools برای مشاهده کد منبع یک وب‌سایت استفاده کنید، که به شما امکان می‌دهد تا ببینید که یک سایت چگونه ساخته شده است و چقدر خوب اجرا می‌شود.

با این حال، Google DevTools^{(Google DevTools)} بیش از این را ارائه می دهد. می‌توانید از حالت برنامه‌نویس کروم^(Chrome) برای تغییر صفحه پس از بارگیری آن استفاده کنید، دستورات کنسول Google Chrome را برای کنترل و دستکاری صفحه اجرا کنید، همچنین تست‌های سرعت و شبکه را برای نظارت بر ترافیک وب اجرا کنید.

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

در حالی که هدف این ابزارها توسعه دهندگان یا آزمایش کنندگان وب حرفه ای است، برای کاربران استاندارد Chrome^(Chrome) نیز مفید است که راه خود را در مجموعه DevTools بدانند . اگر مشکلی در سایتی می‌بینید که نمی‌توانید آن را حل کنید، جابه‌جایی به حالت برنامه‌نویس Chrome می‌تواند به شما کمک کند ببینید آیا مشکل از سایت است یا مرورگر شما.

نحوه دسترسی به منوی ابزارهای توسعه دهنده گوگل کروم^{(How To Access Google Chrome DevTools Menu)}

بسته به ابزاری که می‌خواهید استفاده کنید ، چند راه وجود دارد که می‌توانید به منوی Google Chrome DevTools دسترسی پیدا کنید.^{(Google Chrome DevTools)}

ساده ترین روش برای انجام این کار از منوی گوگل کروم است. ^{(Google Chrome)}برای انجام این کار، روی نماد منوی سه نقطه^{(three-dots menu icon)} در بالا سمت راست کلیک کنید. از منوی ظاهر شده، روی More Tools > Developer Tools کلیک کنید .

با این کار کیت DevTools در منوی جدید در سمت راست برگه یا پنجره باز Chrome باز می شود.^(Chrome)

همچنین می توانید با استفاده از میانبرهای صفحه کلید این کار را انجام دهید. از رایانه شخصی ویندوز^(Windows) یا لینوکس^{(Linux PC)} ، مرورگر Chrome را باز کنید و کلید F12 را فشار دهید . همچنین می توانید Ctrl + Alt + J یا Ctrl + Alt + I را در برگه یا پنجره باز Chrome فشار دهید.^(Chrome)

در macOS، F12 را فشار دهید یا کلیدهای Option + Command + J یا Option + Command + I را فشار دهید تا به جای آن منوی Chrome DevTools باز شود. با این کار کنسول Chrome باز می‌شود و گزینه‌هایی برای انتقال به دیگر ابزارهای ^(Chrome)Chrome در بالای منوی DevTools وجود دارد.^(DevTools)

در صورت تمایل، می‌توانید کد منبع یک وب‌سایت (با باز کردن تب Elements از منوی ^(Elements)DevTools در فرآیند) در هر صفحه وب باز شده با کلیک راست و کلیک بر روی گزینه Inspect ، مشاهده کنید.

با استفاده از Chrome DevTools^{(Using Chrome DevTools)}

همانطور که به طور خلاصه به آن اشاره کردیم، می‌توانید از کیت Chrome DevTools برای مشاهده کد منبع یک وب‌سایت در زیر تب Elements استفاده کنید. این به شما امکان می‌دهد کد پشت صفحه‌ای را که بارگذاری کرده‌اید تجزیه و تحلیل کنید، و همچنین پیام‌های خطا (که نشان‌دهنده مشکلات مربوط به نحوه بارگیری سایت است) را در کنسول کروم در زیر تب ^(Chrome)Console مشاهده کنید.

همچنین می‌توانید منابع مختلف محتوای یک وب‌سایت را در زیر برگه منابع مشاهده کنید. ^(Sources)به عنوان مثال، اگر سایتی از شبکه تحویل محتوا (CDN) استفاده می کند^{(using a content delivery network (CDN))} ، رسانه های یک سایت به عنوان منبع دیگری در اینجا فهرست می شوند.

حالت برنامه‌نویس کروم^(Chrome) به شما امکان می‌دهد آن محتوا را مستقیماً دانلود کنید یا تجزیه و تحلیل پیچیده‌تری از محتوا انجام دهید.

اگر می‌خواهید نحوه عملکرد یک سایت را آزمایش کنید، می‌توانید استفاده از شبکه خود را در زبانه Network نظارت و ضبط کنید. ^(Network)این سرعت، اندازه و نوع درخواست های شبکه ای که بین مرورگر شما و سایت انجام شده را نشان می دهد.

به عنوان مثال، هنگامی که یک صفحه برای اولین بار بارگیری می شود، سایت خود محتوای صفحه را بارگیری می کند، اما ممکن است داده ها را از پایگاه های داده شخص ثالث نیز درخواست کند. به عنوان مثال، هنگامی که وارد سیستم می شوید، ممکن است پایگاه داده ای را که به عنوان یک درخواست شبکه در اینجا نشان داده می شود پرس و جو کند.

می‌توانید این مورد را در تب Performance بیشتر تجزیه و تحلیل کنید، جایی که می‌توانید استفاده از مرورگر کروم^(Chrome) خود را با عمق بیشتری ضبط کنید، از جمله ضبط تصاویر صفحه در نقاط مختلف. این نشان می دهد که چقدر طول می کشد تا سایت شما برای تجزیه و تحلیل بیشتر بارگذاری شود.

Google Chrome به سختی حافظه رایانه شخصی شما^{(being hard on your PC memory)} مشهور است ، بنابراین می توانید میزان استفاده از حافظه جاوا اسکریپت^(JavaScript) سایت خود را در برگه Memory آزمایش کنید. ^(Memory)نمایه‌های مختلف آزمایش Chrome^{(Different Chrome)} را می‌توان در اینجا استفاده کرد، و اطلاعات بیشتر درباره این آزمایش در صفحه مستندات Chrome DevTools^{(Chrome DevTools documentation page)} وجود دارد.

برای تجزیه و تحلیل عمیق تر محتوای سایت خود، و همچنین هر فضای ذخیره سازی مرورگر که ممکن است از آن استفاده کند (به عنوان مثال، برای ثبت داده ها)، می توانید از طریق برگه برنامه جستجو کنید. ^{(Application)}می‌توانید اطلاعات کوکی‌های سایت را در اینجا در بخش کوکی‌ها^(Cookies) مشاهده کنید ، یا با کلیک کردن روی گزینه پاک کردن فضای^{(Clear storage)} ذخیره‌سازی، فضای ذخیره‌سازی مورد استفاده را پاک کنید.

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

اگر می خواهید گزارشی در مورد عملکرد سایت خود تهیه کنید، از جمله اینکه آیا استانداردهای کاربر معمولی را برآورده می کند و اگر عملکرد سایت می تواند بر بهینه سازی موتور جستجو تأثیر بگذارد، می توانید روی تب Lighthouse کلیک کنید. این تنظیماتی را ارائه می دهد که می توانید گزارش خود را علامت بزنید یا علامت آن را بردارید— برای ایجاد گزارش برای مشاهده، روی ایجاد گزارش^{(Generate report)} کلیک کنید .

این به سختی سطح پتانسیل‌هایی را که حالت برنامه‌نویس کروم^(Chrome) می‌تواند برای توسعه‌دهندگان به ارمغان بیاورد، خراش می‌دهد. اگر می‌خواهید بیشتر بیاموزید، اسناد Chrome DevTools^{(Chrome DevTools documentation)} باید به شما در مورد ابزارها و ویژگی‌های ارائه شده، از جمله نحوه ساخت آزمایش‌های کاربر خود با آن کمک کند. 

ترفندهای پیشرفته گوگل کروم^{(Advanced Google Chrome Tricks)}

اکثر کاربران کروم هرگز نمی دانند که کیت 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 іs built perfectly. Like all productѕ made by humans, codе errorѕ are part оf the process. That’s why it’s important to thoroughly test anу new website you build to make sure that it’ѕ aѕ free оf errors as possible to give your users the best pоssible expеrience. 

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

• تکمیل خودکار گوگل کروم: راهنمای کامل

• 10 بهترین برنامه افزودنی حریم خصوصی برای Chrome (2022)

• از این 4 افزونه کروم برای رمزگذاری پیام های جیمیل خود استفاده کنید

• تنظیمات محتوای Google Chrome: راهنمای کامل

• بهترین سرویس تماس کنفرانس چیست – بهترین برنامه ها در مقایسه

• HDG توضیح می دهد: SQL، T-SQL، MSSQL، PL/SQL، و MySQL چیست؟

• چگونه DVD و Blu-Ray خود را بدون دردسر با MakeMKV پاره کنید

• نحوه استفاده از Windows Package Manager برای نصب برنامه های ویندوز

• دو ابزار رونویسی برای تبدیل صدا به متن

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

• بهترین 4 جایگزین برای Google Chromecast

• تست پیکسل مرده برای تعمیر پیکسل گیر کرده روی مانیتور شما

• 5 برنامه قابل حمل که قطعاً می خواهید روی USB Stick خود داشته باشید

• بهترین برنامه ها برای افزودن قابلیت های جدید به ویندوز 10

• 3 ابزار برای تشخیص و عیب یابی مشکلات مانیتور

• 5 بهترین برنامه فیلتر نور آبی برای ویندوز، مک و لینوکس

• مواردی که باید قبل از ایجاد ویکی خود در نظر بگیرید

• چت بات چیست و چگونه از آن در سایت خود استفاده کنید

• از یک وب کم قدیمی برای نظارت بر اموال خود به صورت رایگان استفاده کنید

• 5 ترفند Command Prompt برای جالب تر کردن CMD