اگر از Chrome 111 یا جدیدتر استفاده می کنید، ممکن است قبلاً متوجه شده باشید که طراحی نوار کناری نقطه شکست خود را تغییر داده ایم. با کروم 113، نوار کناری جدید به طور کامل جایگزین طراحی قدیمی شده است. هدف ما از طراحی مجدد بهبود گردش کار نقطه شکست به وسیله:
ارائه نمای کلی بهتر در مورد تمام نقاط شکست تنظیم شده. ایجاد گردش کار مشترک کاربر با نقاط شکست برای دسترسی آسان تر و شهودی تر . قابل مشاهده کردن ویژگی های جالب نقطه شکست موجود .
این پست فرض می کند که شما قبلاً با اشکال زدایی با استفاده از نقاط شکست آشنا هستید. اگر قبلاً از نقاط شکست استفاده نکرده اید، به این نمای کلی در مورد نقاط شکست بروید و در مورد اینکه چگونه می توانید از نقاط شکست برای اشکال زدایی کد خود استفاده کنید بیشتر بیاموزید.
اکنون، بیایید نگاهی بیندازیم به آنچه که طراحی مجدد ارائه می دهد، و چگونه می توانید از نوار کناری جدید استفاده کنید! توجه داشته باشید که طراحی مجدد به جای افزودن ویژگی‌های جدید، بر روی ساده‌تر کردن استفاده از ویژگی‌های موجود و دسترسی آسان‌تر تمرکز دارد.
روی استثناها مکث کنید تا بررسی کنید که چرا کد شما خطا می دهد
آیا کد شما استثنایی ایجاد می کند؟ ناراحت نباش! Chrome DevTools به شما این امکان را می‌دهد که روی استثناها مکث کنید تا اجرا را در نقطه‌ای که استثنا شما پرتاب می‌کند متوقف کنید. این می تواند به شما در بررسی و درک بهتر شرایطی که در آن کد شما خطا می دهد کمک کند. می‌توانید با علامت زدن چک باکس‌های مربوطه در نوار کناری، انتخاب کنید که آیا می‌خواهید در مورد استثناهای گرفته شده، استثناهای کشف نشده یا هر دو، مکث کنید.
نقاط انفصال خود را مدیریت کنید: گروه های نقطه انفصال مربوطه را گسترش دهید و دیگران را جمع کنید تا بر موارد مرتبط تمرکز کنید
نقاط شکست ممکن است در چندین فایل پخش شود. نوار کناری نقطه شکست نقاط شکست را بر اساس فایلی که به آن تعلق دارند گروه بندی می کند. با گسترش گروه‌های نقطه شکست مربوطه و جمع‌کردن گروه‌های باقی‌مانده، تنها بر آن‌هایی تمرکز کنید که برای جلسه اشکال‌زدایی فعلی‌تان مهم هستند.
نقاط انفصال خود را مدیریت کنید: با یک کلیک برای کدنویسی، حذف یا فعال/غیرفعال کردن نقاط شکست
نوار کناری نقطه شکست به شما این امکان را می دهد که کارهای رایج را با یک کلیک انجام دهید. در اینجا مروری بر این است که چگونه می توانید ...
به مکان نقطه شکست در ویرایشگر کد بروید. یک نقطه شکست یا تمام نقاط شکست درون یک فایل را حذف کنید. یک نقطه شکست یا تمام نقاط شکست در یک فایل را فعال یا غیرفعال کنید.
و همه اینها با یک کلیک! البته این گزینه ها در منوی زمینه نیز موجود هستند:
با کلیک بر روی قطعه کد نقطه شکست به محل نقطه شکست بروید
آیا می خواهید بررسی کنید که نقطه شکست خود را در کجای کد تنظیم کرده اید و کدهای اطراف را تجزیه و تحلیل کنید؟ فقط روی قطعه کد یک نقطه شکست در نوار کناری کلیک کنید، و آن مکان کد را در ویرایشگر کد باز می کند.
با کلیک بر روی دکمه حذف، یک نقطه شکست یا تمام نقاط شکست درون یک فایل را حذف کنید
ماوس را روی یک نقطه شکست یا گروه نقطه انفصال نگه دارید تا یک دکمه حذف نمایان شود که یک یا همه نقاط شکست یک فایل را با کلیک حذف می کند.
یک یا همه نقاط شکست را در یک فایل غیرفعال کنید
برای فعال یا غیرفعال کردن آن، کادر کنار نقطه شکست را علامت بزنید یا علامت آن را بردارید.
برای فعال یا غیرفعال کردن تمام نقاط شکست در یک فایل، نشانگر را روی گروه نقطه شکست نگه دارید و کادر انتخابی که در کنار نام فایل ظاهر می‌شود را علامت بزنید یا علامت آن را بردارید.
از این ویژگی های کمتر شناخته شده نقطه شکست استفاده کنید: نقاط شکست شرطی و نقاط ورود
شرایط نقطه شکست را ویرایش کنید یا گزارش نقطه ورود خود را با ویرایش نقطه شکست تغییر دهید
با نگه داشتن ماوس روی نقطه انفصال و کلیک کردن روی دکمه ویرایش که ظاهر می شود، یک شرط نقطه انفصال یا گزارش را ویرایش کنید. این یک گفتگو برای تغییر نوع نقطه شکست و جزئیات نقطه شکست شما باز می کند.
همچنین، خط نقطه شکست را در ویرایشگر کد انتخاب کنید و Control + Alt + b را در لینوکس و Command + Alt + b را در مک تایپ کنید تا گفتگوی ویرایش نقطه شکست باز شود.
همچنین می‌توانید با نگه داشتن ماوس روی نقطه شکست در نوار کناری، وضعیت یا گزارش نقطه ورود خود را به سرعت بررسی کنید:
نتیجه
هدف ما از طراحی مجدد نوار کناری نقطه شکست، آسان‌تر کردن اشکال‌زدایی با نقاط شکست بود. مهم‌تر از همه، هدف ما این بود که چیزها را ساختارمندتر کنیم و دسترسی و درک آن را آسان‌تر کنیم. امیدواریم این بهبودها در جلسه رفع اشکال بعدی به شما کمک کند!
اگر پیشنهادی برای بهبود بیشتر دارید، با ثبت یک اشکال به ما اطلاع دهید!
کانال های پیش نمایش را دانلود کنید
استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان می‌دهند به جدیدترین ویژگی‌های DevTools دسترسی داشته باشید، APIهای پلت‌فرم وب پیشرفته را آزمایش کنید و قبل از اینکه کاربرانتان این کار را انجام دهند، مشکلات موجود در سایت خود را پیدا کنید!
تماس با تیم Chrome DevTools
از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید.
- پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
- با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید
> راهنما > گزارش مشکلات DevTools در DevTools. - توییت در @ChromeDevTools .
- نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.