ترجیحات

سوفیا املیانوا
Sofia Emelianova

ظاهر و رفتار DevTools و پانل های آن را با استفاده از آن پیکربندی کنید تنظیمات. تنظیمات > تنظیمات برگزیده این برگه هم گزینه های سفارشی سازی عمومی و هم گزینه های خاص پانل را فهرست می کند.

برای تنظیم تنظیمات برگزیده، باز کنید تنظیمات. تنظیمات > تنظیمات برگزیده و به یکی از بخش هایی که در ادامه توضیح داده شده است بروید.

قسمت Appearance در تب Preferences.

برای اینکه بدانید هر تنظیم چه کاری انجام می دهد، در این صفحه نام تنظیمات را جستجو کنید و توضیحات آن را گسترش دهید.

این مرجع تنظیمات مختلف را با نمادهای زیر نشان می دهد:

  • چک باکس. چک باکس ها
  • لیست های کشویی کشویی.
  • منسوخ شده است. منسوخ شده است

برای بازیابی تنظیمات پیش‌فرض، به انتهای برگه Preferences بروید و روی Restore defaults and reload کلیک کنید.

ظاهر

این بخش گزینه هایی را فهرست می کند که ظاهر DevTools را سفارشی می کنند.

موضوعات: تغییر تم DevTools از ترجیح سیستم به تیره به روشن.
  • اولویت سیستم
  • نور
  • تاریک

بر Elements > Styles و تب های خواهر، و Sources > Pane Debugger تأثیر می گذارد. گزینه auto باعث می شود که چیدمان به عرض DevTools بستگی داشته باشد.

چیدمان پنل: تغییر طرح پانل عنصر از افقی به عمودی.
  • افقی
  • عمودی
  • خودکار

برای اعمال این تنظیم، DevTools را دوباره بارگیری کنید.

زبان: پانل تنظیمات به زبان چینی.
  • زبان رابط کاربری مرورگر
  • یکی از گزینه های محلی، در این مثال، چینی است

این ویدیو نحوه جابجایی بین برگه ها را با استفاده از میانبرهای صفحه کلید مربوطه نشان می دهد.

منابع

این بخش گزینه هایی را فهرست می کند که پنل منابع را سفارشی می کند.

این ویدئو نشان می دهد که چگونه با فعال بودن این گزینه، پانل Sources فایل های موجود در درخت ناوبری را هنگام جابجایی بین برگه ها انتخاب می کند.

پانل منابع پیوندی به فایل کوچک شده در نوار وضعیت نشان می دهد.

نیاز به بارگیری مجدد DevTools دارد.

این ویدیو ابتدا کاراکترهای Tab را نشان می دهد که با کلید Tab درج شده اند. سپس وقتی این گزینه را فعال می‌کنید و DevTools را مجدداً بارگیری می‌کنید، کلید Tab تمرکز را تغییر می‌دهد.

نیاز به بارگیری مجدد DevTools دارد.

این ویدیو ابتدا تورفتگی پیش فرض هشت فاصله را نشان می دهد. سپس وقتی این گزینه را فعال می‌کنید، تورفتگی پیش‌فرض روی فایل منبع لغو می‌شود.

این ویدیو ابتدا هیچ پیشنهادی را نشان نمی دهد. سپس هنگامی که این گزینه را فعال می کنید، ویرایشگر پیشنهادهایی را برای تکمیل دستور نشان می دهد.

این ویدیو تایپ براکت های باز را قبل و بعد از فعال کردن بسته شدن خودکار براکت نشان می دهد.

نیاز به بارگیری مجدد DevTools دارد.

این ویدیو نحوه تا زدن بلوک های کد را با فعال کردن این گزینه نشان می دهد.

نیاز به بارگیری مجدد DevTools دارد. گزینه ها موارد زیر را انجام می دهند:

  • همه همه کاراکترهای فضای خالی را به صورت نقطه ( ... ) نشان می دهد. علاوه بر این، ویرایشگر کاراکتر Tab را به عنوان یک خط ( ) نشان می دهد.
  • دنباله کاراکترهای فضای خالی در انتهای خطوط را با رنگ قرمز روشن برجسته می کند.
نمایش کاراکترهای فضای خالی: گزینه های انتخاب شده: همه و دنباله.
  • هیچ کدام
  • همه ( ... )
  • دنباله دار

این ویدیو ابتدا پانل منابع را در زمانی که در نقطه شکست متوقف می شود، خارج از فوکوس نشان می دهد. سپس وقتی این گزینه را فعال می کنید، DevTools ویرایشگر را در پنل Sources باز می کند و خط کد را با نقطه شکست به شما نشان می دهد.

هنگامی که به زیبایی چاپ می شود ، ویرایشگر ممکن است یک خط کد طولانی را در چند خط نشان دهد که قبل از - نشان می دهد که ادامه خط است.

کد بسیار زیبا در پنل منابع چاپ شده است.
پانل Sources فایل های .scss را در بخش Authored درخت ناوبری نشان می دهد. صفحه Styles در پانل Elements پیوندهایی به منابع .scss را در کنار قوانین CSS نشان می دهد.

این ویدیو به شما نشان می دهد که چگونه با فعال کردن این گزینه، از انتهای فایل عبور کنید.

اگر DevTools غیرفعال باشد، به پیام‌های Console شبیه به موارد زیر وارد می‌شود:

پیامی در کنسول مبنی بر اینکه بارگیری از مسیر فایل راه دور به دلایل امنیتی ممنوع است.
تورفتگی پیش فرض: غیرفعال کردن گزینه‌های بازدارنده و تغییر تورفتگی پیش‌فرض از دو فاصله به هشت و سپس به کلید Tab.
  • 2 فضا
  • 4 فضا
  • 8 فضا
  • کاراکتر برگه

این مثال نشان می دهد که چگونه می توان ابتدا تورفتگی پیش فرض را روی هشت فاصله و سپس به یک کاراکتر Tab تنظیم کرد.

عناصر

این بخش گزینه هایی را فهرست می کند که پنل Elements را سفارشی می کند.

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

شبکه

این بخش گزینه هایی را فهرست می کند که پنل شبکه را سفارشی می کند. اکثر گزینه ها مانند تنظیمات پنل هستند.

Preserve log در پنل Network است. درخواست ها را در بارگذاری صفحه ذخیره می کند.

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

ورود شبکه را در پنل Network ضبط کنید. ضبط درخواست ها را در گزارش شبکه شروع یا متوقف می کند.

دکمه ثبت گزارش شبکه در پانل شبکه.

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

Disable cache در پنل Network است. کش مرورگر را غیرفعال می کند.

چک باکس Disable Cache.

گروه بر فریم در پنل شبکه است. این گزینه درخواست های آغاز شده توسط فریم های درون خطی را گروه بندی می کند.

گزارش درخواست شبکه با درخواست هایی که بر اساس فریم های درون خطی گروه بندی شده اند.

تبلیغات شناسایی شده در صفحه را در زمانی که DevTools باز است مسدود می کند.

یک درخواست شبکه مرتبط با آگهی که در پانل شبکه با فعال بودن فیلتر درخواست‌های مسدود شده نشان داده می‌شود.

عملکرد

این بخش گزینه هایی را فهرست می کند که پنل Performance را سفارشی می کنند.

عملکرد چرخ ماوس نمودار شعله: تغییر عملکرد چرخ ماوس از اسکرول به زوم برای نمودار شعله.
  • اسکرول کنید
  • بزرگنمایی ضربه بزنید؛

این مثال هر دو عملکرد چرخ ماوس اسکرول و زوم را بر روی نمودار شعله در پانل عملکرد نشان می دهد.

کنسول

این بخش گزینه هایی را فهرست می کند که کنسول را سفارشی می کند. اکثر گزینه ها مانند تنظیمات کنسول هستند.

گزینه های مشابه در کنسول و در تنظیمات.

این ویدیو نحوه پنهان کردن پیام های شبکه را با این گزینه در هر دو نشان می دهد تنظیمات. تنظیمات و در تنظیمات کنسول .

این ویدیو نحوه فعال کردن این گزینه را در هر دو نشان می دهد تنظیمات. تنظیمات و در کنسول > تنظیمات و زمینه را در کنسول انتخاب کنید.

این ویدیو نحوه فعال کردن این گزینه را در هر دو نشان می دهد تنظیمات. Settings and Console > Settings را وارد کنید و پیام‌های XHR finished loading در کنسول وارد کنید.

خطاهای CORS را که ثبت کرده است نشان دهد.

می‌توانید همین گزینه را در Console > Settings پیدا کنید.

کنسول خطاهای CORS را نشان می دهد.

می‌توانید همین گزینه را در Console > Settings پیدا کنید.

این ویدئو پیش نمایش های مختلف خروجی را نشان می دهد.

به عبارت دیگر، پس از ارزیابی، navigator.userActivation.isActive را روی true قرار می دهد. می‌توانید همین گزینه را در Console > Settings پیدا کنید.

این ویدیو نتیجه ارزیابی navigator.userActivation.isActive را قبل و بعد از فعال کردن این گزینه نشان می دهد.

پسوند

این بخش گزینه هایی را فهرست می کند که مدیریت پیوند را برای برنامه های افزودنی Chrome DevTools سفارشی می کند.

مدیریت لینک: انتخاب گزینه ای برای باز کردن پیوندها با.
  • خودکار فایل ها را به طور پیش فرض در پنل منابع باز می کند.
  • گزینه دلخواه که می تواند توسط افزونه DevTools اضافه شود.

ماندگاری

این بخش گزینه هایی را فهرست می کند که چگونه DevTools تغییراتی را که انجام می دهید ذخیره می کند.

اشکال زدا

این بخش گزینه هایی را فهرست می کند که رفتار Debugger را کنترل می کنند.

جاوا اسکریپت غیرفعال است ببینید صفحه وب شما چگونه به نظر می رسد و چگونه رفتار می کند.

صفحه را دوباره بارگیری کنید تا ببینید آیا و چگونه صفحه به جاوا اسکریپت در حین بارگیری بستگی دارد یا خیر.

وقتی جاوا اسکریپت غیرفعال است، کروم موارد مربوطه را نشان می دهد جاوا اسکریپت غیرفعال شد. نماد در نوار آدرس و DevTools یک هشدار نشان می دهد هشدار. نماد کنار منابع

یک نماد در نوار آدرس و یک نماد هشدار در کنار Sources در DevTools.

به طور پیش‌فرض، اگر چارچوبی که شما استفاده می‌کنید از چنین ردیابی پشتیبانی می‌کند، Debugger تلاش می‌کند تا عملیات ناهمگام را ردیابی کند.

عملیات همگام سازی در پشته تماس.

برای اطلاعات بیشتر، مشاهده ردیابی پشته ناهمگام را ببینید.

جهانی

این بخش گزینه هایی را فهرست می کند که جلوه های جهانی در DevTools دارند.

این ویدیو ابتدا نحوه کلیک روی یک پیوند و باز کردن یک برگه جدید *بدون* ابزار DevTools را نشان می دهد. سپس وقتی این گزینه را فعال می کنید، یک تب جدید *با* DevTools باز می شود.

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

این ویدیو ابتدا نشان می‌دهد که چگونه DevTools هنگام تایپ یک عبارت جستجو، «پرش» می‌کند. سپس هنگامی که این گزینه را فعال می کنید، DevTools شما را با فشار دادن Enter به اولین نتیجه می برد.

همگام سازی

این بخش به شما امکان می دهد همگام سازی تنظیمات را بین دستگاه ها تنظیم کنید.