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