با این مرجع جامع ویژگی‌های اشکال‌زدایی Chrome DevTools، گردش‌های کار اشکال‌زدایی جدید را کشف کنید.
برای آشنایی با اصول اشکال زدایی ، به شروع با اشکال زدایی جاوا اسکریپت در ابزار توسعه کروم مراجعه کنید.
یک نقطه شکست تنظیم کنید تا بتوانید کد خود را در میانه اجرای آن مکث کنید. برای یادگیری نحوه تنظیم نقاط شکست، به مکث کد خود با نقاط شکست مراجعه کنید.
در حالی که اجرا متوقف می شود، دیباگر تمام متغیرها، ثابت ها و اشیاء را در تابع فعلی تا یک نقطه شکست ارزیابی می کند. دیباگر مقادیر فعلی را به صورت خطی در کنار اعلان های مربوطه نشان می دهد.
می توانید از کنسول برای پرس و جو کردن متغیرها، ثابت ها و اشیاء ارزیابی شده استفاده کنید.
در حالی که اجرا متوقف شده است، ماوس را روی نام یک کلاس یا تابع نگه دارید تا ویژگی های آن را پیش نمایش کنید.
هنگامی که کد شما متوقف شد، یک عبارت در یک زمان از آن عبور کنید و در طول مسیر، جریان کنترل و مقادیر ویژگی را بررسی کنید.
هنگامی که روی خط کدی که حاوی تابعی است که به مشکلی که در حال رفع اشکال شما نیست، مکث می‌کنید، روی Step over کلیک کنید. 
برای اجرای تابع بدون ورود به آن.
به عنوان مثال، فرض کنید کد زیر را دیباگ می کنید:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
شما روی A مکث کرده اید. با فشردن Step over ، DevTools تمام کدهای تابعی را که در حال عبور از آن هستید، یعنی B و C اجرا می کند. DevTools سپس روی D مکث می کند.
هنگامی که در یک خط کد حاوی فراخوانی تابع مربوط به مشکلی که در حال رفع اشکال است، مکث می کنید، روی Step into کلیک کنید. 
برای بررسی بیشتر آن عملکرد
به عنوان مثال، فرض کنید کد زیر را دیباگ می کنید:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
شما روی A مکث کرده اید. با فشار دادن Step into ، DevTools این خط کد را اجرا می کند، سپس روی B مکث می کند.
هنگامی که در داخل تابعی که به مشکلی که در حال رفع اشکال آن هستید، مکث می کنید، بر روی قدم بیرون کلیک کنید 
برای اجرای بقیه کد تابع.
به عنوان مثال، فرض کنید کد زیر را دیباگ می کنید:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
شما روی A مکث کرده اید. با فشار دادن Step out ، DevTools بقیه کد موجود در getName() را که در این مثال فقط B است، اجرا می کند و سپس در C مکث می کند.
هنگام اشکال زدایی یک تابع طولانی، ممکن است کدهای زیادی وجود داشته باشد که به مشکلی که شما اشکال زدایی می کنید مربوط نباشد.
شما می توانید از تمام خطوط عبور کنید، اما این می تواند خسته کننده باشد. می توانید یک نقطه انفصال خط کد را در خطی که به آن علاقه دارید تنظیم کنید و سپس اجرای اسکریپت از سرگیری را فشار دهید. 
، اما یک راه سریعتر وجود دارد.
روی خط کدی که به آن علاقه دارید کلیک راست کرده و Continue to here را انتخاب کنید. DevTools تمام کدها را تا آن نقطه اجرا می کند و سپس در آن خط مکث می کند.
برای ادامه اجرای اسکریپت خود پس از یک مکث، روی Resume Script Execution کلیک کنید 
. DevTools اسکریپت را تا نقطه شکست بعدی، در صورت وجود، اجرا می کند.
برای نادیده گرفتن تمام نقاط شکست و مجبور کردن اسکریپت خود به از سرگیری اجرا، روی Resume Script Execution کلیک کنید و نگه دارید 
و سپس Force script execution را انتخاب کنید 
.
هنگام کار با کارگران وب یا سرویس‌دهندگان، روی زمینه‌ای که در قسمت Threads فهرست شده است کلیک کنید تا به آن زمینه بروید. نماد فلش آبی نشان می دهد که کدام زمینه در حال حاضر انتخاب شده است.
صفحه Threads در تصویر بالا با رنگ آبی مشخص شده است.
برای مثال، فرض کنید که در یک نقطه شکست هم در اسکریپت اصلی و هم در اسکریپت سرویس‌کار خود متوقف شده‌اید. می‌خواهید ویژگی‌های محلی و سراسری را برای زمینه سرویس‌کار مشاهده کنید، اما پانل Sources زمینه اسکریپت اصلی را نشان می‌دهد. با کلیک بر روی مدخل service worker در قسمت Threads، می‌توانید به آن زمینه بروید.
عبور از عبارات جدا شده با کاما به شما امکان می دهد کدهای کوچک شده را اشکال زدایی کنید. برای مثال کد زیر را در نظر بگیرید:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
وقتی کوچک می شود، حاوی یک عبارت foo(),foo(),42 جدا شده با کاما است:
function foo(){}function bar(){return foo(),foo(),42}bar();
Debugger از طریق چنین عباراتی دقیقاً به همین ترتیب قدم می گذارد.
بنابراین، رفتار پلکانی یکسان است:
- بین کد کوچک شده و تالیف شده.
- هنگام استفاده از نقشه های منبع برای اشکال زدایی کد کوچک شده از نظر کد اصلی. به عبارت دیگر، وقتی نقطه ویرگول را می‌بینید، همیشه می‌توانید انتظار داشته باشید که از آنها عبور کنید، حتی اگر منبع واقعی که اشکال‌زدایی می‌کنید کوچک شده باشد.
در حالی که در یک خط کد مکث می کنید، از پنجره Scope برای مشاهده و ویرایش مقادیر خصوصیات و متغیرها در محدوده محلی، بسته شدن و سراسری استفاده کنید.
- برای تغییر مقدار خاصیت دوبار کلیک کنید.
- ویژگی های غیرقابل شمارش خاکستری می شوند.
صفحه Scope در تصویر بالا با رنگ آبی مشخص شده است.
در حالی که روی یک خط کد مکث می کنید، از صفحه Call Stack برای مشاهده پشته تماسی که شما را به این نقطه رسانده استفاده کنید.
روی یک ورودی کلیک کنید تا به خط کدی که آن تابع فراخوانی شده است بروید. نماد پیکان آبی نشان می دهد که کدام عملکرد DevTools در حال حاضر برجسته می شود.
صفحه Call Stack در تصویر بالا با رنگ آبی مشخص شده است.
برای مشاهده رفتار یک تابع و اجرای مجدد آن بدون نیاز به راه اندازی مجدد کل جریان اشکال زدایی، می توانید اجرای یک تابع واحد را هنگامی که این تابع متوقف شده است مجدداً راه اندازی کنید. به عبارت دیگر، می توانید فریم تابع را در پشته تماس مجددا راه اندازی کنید.
برای راه اندازی مجدد یک فریم:
- توقف اجرای تابع در نقطه شکست . صفحه Call Stack ترتیب فراخوانی های تابع را ثبت می کند.
در قسمت Call Stack ، روی یک تابع کلیک راست کرده و از منوی کشویی Restart frame را انتخاب کنید.
برای درک نحوه کار Restart Frame ، کد زیر را در نظر بگیرید:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
تابع foo() 0 به عنوان آرگومان می گیرد، آن را ثبت می کند و تابع bar() را فراخوانی می کند. تابع bar() به نوبه خود آرگومان را افزایش می دهد.
سعی کنید فریم های هر دو تابع را به روش زیر راه اندازی مجدد کنید:
- کد بالا را در یک قطعه جدید کپی کرده و اجرا کنید . اجرا در نقطه شکست خط کد
debuggerمتوقف می شود. - توجه داشته باشید که دیباگر مقدار فعلی را در کنار اعلان تابع به شما نشان می دهد:
value = 1.
- قاب
bar()را مجددا راه اندازی کنید.
- با فشار دادن
F9از بیانیه افزایش ارزش عبور کنید.
توجه داشته باشید که مقدار فعلی افزایش می یابد: value = 2. - در صورت تمایل، در قسمت Scope ، روی مقدار دوبار کلیک کنید تا آن را ویرایش کنید و مقدار مورد نظر را تنظیم کنید.
سعی کنید قاب
bar()مجدداً راه اندازی کنید و چندین بار دیگر از دستور increment عبور کنید. ارزش همچنان در حال افزایش است.
راه اندازی مجدد فریم، آرگومان ها را بازنشانی نمی کند. به عبارت دیگر، راه اندازی مجدد حالت اولیه را در هنگام فراخوانی تابع بازیابی نمی کند. در عوض، به سادگی نشانگر اجرا را به شروع تابع منتقل می کند.
بنابراین، مقدار آرگومان فعلی در طول راه اندازی مجدد همان تابع در حافظه باقی می ماند.
- اکنون قاب
foo()را در Call Stack مجددا راه اندازی کنید.
توجه کنید که مقدار دوباره 0است.
در جاوا اسکریپت، تغییرات در آرگومان‌ها در خارج از تابع قابل مشاهده نیستند. توابع تودرتو مقادیر را دریافت می کنند، نه مکان آنها را در حافظه. 1. برای تکمیل این آموزش، اجرای اسکریپت ( F8 ) را از سر بگیرید.
به طور پیش‌فرض، صفحه Call Stack فقط فریم‌هایی را نشان می‌دهد که با کد شما مرتبط هستند و هر اسکریپت اضافه شده به آن را حذف می‌کند. 
تنظیمات > فهرست نادیده گرفته شود .
برای مشاهده کل پشته تماس از جمله فریم های شخص ثالث، نمایش فریم های فهرست شده نادیده گرفته شده را در قسمت پشته تماس فعال کنید.
آن را در این صفحه نمایشی امتحان کنید:
- در پانل منابع ، فایل
src>app>app.component.tsرا باز کنید. - یک نقطه شکست در تابع
increment()تنظیم کنید. - در بخش Call Stack ، چک باکس Show ignore-listed frames را علامت بزنید یا پاک کنید و فهرست مربوطه یا کامل فریم ها را در پشته تماس مشاهده کنید.
اگر توسط چارچوبی که استفاده می‌کنید پشتیبانی می‌شود، DevTools می‌تواند با پیوند دادن هر دو بخش کد async به یکدیگر، عملیات‌های همگام‌سازی را ردیابی کند.
در این حالت، پشته تماس کل تاریخچه تماس از جمله فریم های تماس غیرهمگام را نشان می دهد.
در هر نقطه از قسمت Call Stack کلیک راست کرده و Copy stack trace را انتخاب کنید تا پشته تماس فعلی در کلیپ بورد کپی شود.
در زیر نمونه ای از خروجی را مشاهده می کنید:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
از صفحه Page برای پیمایش درخت فایل استفاده کنید.
هنگام توسعه برنامه‌های کاربردی وب با استفاده از فریم‌ورک‌ها (به عنوان مثال، React یا Angular )، به دلیل فایل‌های کوچک‌سازی شده تولید شده توسط ابزارهای ساخت (به عنوان مثال، وب‌پک یا Vite )، پیمایش در منابع ممکن است دشوار باشد.
برای کمک به شما در پیمایش منابع، صفحه Sources > Page می تواند فایل ها را به دو دسته گروه بندی کند:
تألیف شده است . مشابه فایل های منبعی که در IDE خود مشاهده می کنید. DevTools این فایل ها را بر اساس نقشه های منبع ارائه شده توسط ابزار ساخت شما تولید می کند. 
مستقر شد . فایل های واقعی که مرورگر می خواند. معمولا این فایل ها Minified هستند.
برای فعال کردن گروه بندی، را فعال کنید 
> گروه بندی فایل ها توسط نویسنده / مستقر 
گزینه زیر منوی سه نقطه در بالای درخت فایل.
برای اینکه به شما کمک کند فقط روی کدی که ایجاد می کنید تمرکز کنید، صفحه Sources > Page همه اسکریپت ها یا دایرکتوری های اضافه شده به خاکستری را نشان می دهد. 
Settings > Ignore List به طور پیش فرض.
برای مخفی کردن کامل چنین اسکریپتی، منابع > صفحه > را انتخاب کنید 
> مخفی کردن منابع فهرست شده نادیده گرفته شده 
.
یک اسکریپت را نادیده بگیرید تا هنگام اشکال زدایی از آن بگذرید. هنگامی که یک اسکریپت نادیده گرفته می شود، در صفحه Call Stack پنهان می شود، و وقتی از کد خود عبور می کنید، هرگز وارد عملکردهای اسکریپت نمی شوید.
برای مثال، فرض کنید در حال عبور از این کد هستید:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A یک کتابخانه شخص ثالث است که شما به آن اعتماد دارید. اگر مطمئن هستید که مشکلی که در حال رفع اشکال هستید مربوط به کتابخانه شخص ثالث نیست، منطقی است که اسکریپت را نادیده بگیرید.
برای نادیده گرفتن یک اسکریپت جداگانه یا کل فهرست:
- در منابع > صفحه ، روی دایرکتوری یا فایل اسکریپت کلیک راست کنید.
- برای نادیده گرفتن فهرست، افزودن فهرست/اسکریپت را انتخاب کنید.
اگر منابع فهرست‌شده را پنهان نکرده‌اید، می‌توانید چنین منبعی را در درخت فایل و در 
بنر هشدار، روی حذف از لیست نادیده گرفته شده یا پیکربندی کلیک کنید.
در غیر این صورت، می توانید دایرکتوری ها و اسکریپت های پنهان و نادیده گرفته شده را از لیست حذف کنید 
تنظیمات > فهرست نادیده گرفته شود .
برای نادیده گرفتن یک اسکریپت از پنجره ویرایشگر :
- فایل را باز کنید.
- در هر نقطه راست کلیک کنید.
- افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.
می توانید یک اسکریپت را از لیست نادیده گرفته شده حذف کنید 
تنظیمات > فهرست نادیده گرفته شود .
برای نادیده گرفتن یک اسکریپت از صفحه Call Stack :
- روی یک تابع از اسکریپت کلیک راست کنید.
- افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.
می توانید یک اسکریپت را از لیست نادیده گرفته شده حذف کنید 
تنظیمات > فهرست نادیده گرفته شود .
ببینید 
تنظیمات > فهرست نادیده گرفته شود .
اگر متوجه می‌شوید که همان کد اشکال‌زدایی را بارها و بارها در کنسول اجرا می‌کنید، Snippets را در نظر بگیرید. Snippet ها اسکریپت های اجرایی هستند که شما آنها را می نویسید، ذخیره می کنید و در DevTools اجرا می کنید.
برای اطلاعات بیشتر به اجرای قطعه کد از هر صفحه مراجعه کنید.
از پنجره Watch برای تماشای مقادیر عبارات سفارشی استفاده کنید. شما می توانید هر عبارت معتبر جاوا اسکریپت را تماشا کنید.
- روی Add Expression کلیک کنید
برای ایجاد یک بیان ساعت جدید - روی Refresh کلیک کنید
برای تازه کردن مقادیر تمام عبارات موجود. هنگام عبور از کد، مقادیر به طور خودکار بازخوانی می شوند. - ماوس را روی یک عبارت نگه دارید و روی حذف عبارت کلیک کنید
برای حذف آن
هنگامی که یک اسکریپت را در صفحه صفحه باز می کنید، DevTools محتویات آن را در پنجره ویرایشگر به شما نشان می دهد. در قسمت ویرایشگر ، می توانید کد خود را مرور و ویرایش کنید.
علاوه بر این، می توانید محتویات را به صورت محلی لغو کنید یا یک فضای کاری ایجاد کنید و تغییراتی را که در DevTools ایجاد می کنید مستقیماً در منابع محلی خود ذخیره کنید.
به‌طور پیش‌فرض، پنل Sources فایل‌های کوچک‌شده را به زیبایی چاپ می‌کند. هنگامی که به زیبایی چاپ می شود، ویرایشگر ممکن است یک خط کد طولانی را در چندین خط نشان دهد، با - نشان می دهد که ادامه خط است.
برای مشاهده فایل کوچک‌سازی شده هنگام بارگیری، روی { } در گوشه سمت چپ پایین ویرایشگر کلیک کنید.
برای تا کردن یک بلوک کد، نشانگر را روی شماره خط در ستون سمت چپ نگه دارید و کلیک کنید 
فرو ریختن .
برای باز کردن بلوک کد، روی {...} در کنار آن کلیک کنید.
برای پیکربندی این رفتار، نگاه کنید 
تنظیمات > تنظیمات > منابع .
هنگام رفع یک باگ، اغلب می خواهید تغییراتی را در کد جاوا اسکریپت خود آزمایش کنید. نیازی نیست تغییرات را در یک مرورگر خارجی انجام دهید و سپس صفحه را بارگیری مجدد کنید. می توانید اسکریپت خود را در DevTools ویرایش کنید.
برای ویرایش یک اسکریپت:
- فایل را در قسمت ویرایشگر پنل Sources باز کنید.
- تغییرات خود را در قسمت ویرایشگر انجام دهید.
برای ذخیره، Command + S (Mac) یا Ctrl + S (ویندوز، لینوکس) را فشار دهید. DevTools کل فایل JS را در موتور جاوا اسکریپت کروم وصله می کند.
پنجره ویرایشگر در تصویر بالا با رنگ آبی مشخص شده است.
در حالی که اجرا متوقف می شود، می توانید عملکرد فعلی را ویرایش کنید و تغییرات را به صورت زنده با محدودیت های زیر اعمال کنید:
- شما می توانید تنها بالاترین عملکرد را در پشته تماس ویرایش کنید.
- نباید هیچ تماس بازگشتی برای همان تابع در پایین‌تر پشته وجود داشته باشد.
برای ویرایش زنده یک تابع:
- اجرای را با نقطه شکست متوقف کنید .
- تابع مکث شده را ویرایش کنید.
- برای اعمال تغییرات، Command / Control + S را فشار دهید. دیباگر به طور خودکار عملکرد را مجدداً راه اندازی می کند .
- اجرا را ادامه دهید.
برای یادگیری این گردش کار ویدیوی زیر را تماشا کنید.
در این مثال، متغیرهای addend1 و addend2 در ابتدا دارای یک نوع string نادرست هستند. بنابراین، به جای اضافه کردن اعداد، رشته ها به هم متصل می شوند. برای رفع آن، توابع parseInt() در طول ویرایش زنده اضافه می شوند.
برای جستجوی متن در یک اسکریپت:
- فایل را در قسمت ویرایشگر پنل Sources باز کنید.
- برای باز کردن نوار جستجوی داخلی، Command + F (Mac) یا Ctrl + F (ویندوز، لینوکس) را فشار دهید.
- در نوار، درخواست خود را وارد کنید.
به صورت اختیاری، می توانید:- کلیک کنید
با حروف بزرگ مطابقت دهید تا درخواست شما به حروف بزرگ و کوچک حساس شود. - کلیک کنید
از Regular Expression برای جستجو با استفاده از عبارت RegEx استفاده کنید .
- کلیک کنید
- Enter را فشار دهید. برای رفتن به نتیجه جستجوی قبلی یا بعدی، دکمه بالا یا پایین را فشار دهید.
برای جایگزینی متنی که پیدا کردید:
- در نوار جستجو، روی
دکمه تعویض 
- متن مورد نظر برای جایگزینی را تایپ کنید، سپس روی Replace یا Replace all کلیک کنید.
به غیرفعال کردن جاوا اسکریپت با ابزار توسعه کروم مراجعه کنید.