مرجع اشکال زدایی جاوا اسکریپت

Kayce Basques

Sofia Emelianova

با این مرجع جامع ویژگی‌های اشکال‌زدایی 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 در تصویر بالا با رنگ آبی مشخص شده است.

یک تابع (فریم) را در پشته تماس راه اندازی مجدد کنید

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

برای راه اندازی مجدد یک فریم:

1. توقف اجرای تابع در نقطه شکست . صفحه Call Stack ترتیب فراخوانی های تابع را ثبت می کند.

2. در قسمت 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() به نوبه خود آرگومان را افزایش می دهد.

سعی کنید فریم های هر دو تابع را به روش زیر راه اندازی مجدد کنید:

1. کد بالا را در یک قطعه جدید کپی کرده و اجرا کنید . اجرا در نقطه شکست خط کد debugger متوقف می شود.
2. توجه داشته باشید که دیباگر مقدار فعلی را در کنار اعلان تابع به شما نشان می دهد: value = 1 .
3. قاب bar() را مجددا راه اندازی کنید.
4. با فشار دادن F9 از بیانیه افزایش ارزش عبور کنید. توجه داشته باشید که مقدار فعلی افزایش می یابد: value = 2 .
5. در صورت تمایل، در قسمت Scope ، روی مقدار دوبار کلیک کنید تا آن را ویرایش کنید و مقدار مورد نظر را تنظیم کنید.

6. سعی کنید قاب bar() را مجدداً راه اندازی کنید و چندین بار دیگر از دستور increment عبور کنید. ارزش همچنان در حال افزایش است.

راه اندازی مجدد فریم، آرگومان ها را بازنشانی نمی کند. به عبارت دیگر، راه اندازی مجدد حالت اولیه را در هنگام فراخوانی تابع بازیابی نمی کند. در عوض، به سادگی نشانگر اجرا را به شروع تابع منتقل می کند.

بنابراین، مقدار آرگومان فعلی در طول راه اندازی مجدد همان تابع در حافظه باقی می ماند.

1. اکنون قاب foo() را در Call Stack مجددا راه اندازی کنید. توجه کنید که مقدار دوباره 0 است.

در جاوا اسکریپت، تغییرات در آرگومان‌ها در خارج از تابع قابل مشاهده نیستند. توابع تودرتو مقادیر را دریافت می کنند، نه مکان آنها را در حافظه. 1. برای تکمیل این آموزش، اجرای اسکریپت ( F8 ) را از سر بگیرید.

نمایش قاب های فهرست شده نادیده گرفته شود

به طور پیش‌فرض، صفحه Call Stack فقط فریم‌هایی را نشان می‌دهد که با کد شما مرتبط هستند و هر اسکریپت اضافه شده به آن را حذف می‌کند. تنظیمات > فهرست نادیده گرفته شود .

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

آن را در این صفحه نمایشی امتحان کنید:

1. در پانل منابع ، فایل src > app > app.component.ts را باز کنید.
2. یک نقطه شکست در تابع increment() تنظیم کنید.
3. در بخش 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 یک کتابخانه شخص ثالث است که شما به آن اعتماد دارید. اگر مطمئن هستید که مشکلی که در حال رفع اشکال هستید مربوط به کتابخانه شخص ثالث نیست، منطقی است که اسکریپت را نادیده بگیرید.

یک اسکریپت یا یک دایرکتوری از درخت فایل را نادیده بگیرید

برای نادیده گرفتن یک اسکریپت جداگانه یا کل فهرست:

1. در منابع > صفحه ، روی دایرکتوری یا فایل اسکریپت کلیک راست کنید.
2. برای نادیده گرفتن فهرست، افزودن فهرست/اسکریپت را انتخاب کنید.

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

در غیر این صورت، می توانید دایرکتوری ها و اسکریپت های پنهان و نادیده گرفته شده را از لیست حذف کنید تنظیمات > فهرست نادیده گرفته شود .

یک اسکریپت را از پنجره ویرایشگر نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از پنجره ویرایشگر :

1. فایل را باز کنید.
2. در هر نقطه راست کلیک کنید.
3. افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت از صفحه Call Stack را نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از صفحه Call Stack :

1. روی یک تابع از اسکریپت کلیک راست کنید.
2. افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت را از تنظیمات نادیده بگیرید

ببینید تنظیمات > فهرست نادیده گرفته شود .

تکه هایی از کد اشکال زدایی را از هر صفحه ای اجرا کنید

اگر متوجه می‌شوید که همان کد اشکال‌زدایی را بارها و بارها در کنسول اجرا می‌کنید، Snippets را در نظر بگیرید. Snippet ها اسکریپت های اجرایی هستند که شما آنها را می نویسید، ذخیره می کنید و در DevTools اجرا می کنید.

برای اطلاعات بیشتر به اجرای قطعه کد از هر صفحه مراجعه کنید.

مقادیر عبارات جاوا اسکریپت سفارشی را تماشا کنید

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

• روی Add Expression کلیک کنید برای ایجاد یک عبارت ساعت جدید
• روی Refresh کلیک کنید برای تازه کردن مقادیر تمام عبارات موجود. هنگام عبور از کد، مقادیر به طور خودکار بازخوانی می شوند.
• ماوس را روی یک عبارت نگه دارید و روی حذف عبارت کلیک کنید برای حذف آن

اسکریپت ها را بررسی و ویرایش کنید

هنگامی که یک اسکریپت را در صفحه صفحه باز می کنید، DevTools محتویات آن را در پنجره ویرایشگر به شما نشان می دهد. در قسمت ویرایشگر ، می توانید کد خود را مرور و ویرایش کنید.

علاوه بر این، می توانید محتویات را به صورت محلی لغو کنید یا یک فضای کاری ایجاد کنید و تغییراتی را که در DevTools ایجاد می کنید مستقیماً در منابع محلی خود ذخیره کنید.

یک فایل کوچک را خوانا کنید

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

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

بلوک های کد را تا کنید

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

برای باز کردن بلوک کد، روی {...} در کنار آن کلیک کنید.

برای پیکربندی این رفتار، نگاه کنید تنظیمات > تنظیمات > منابع .

یک اسکریپت را ویرایش کنید

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

برای ویرایش یک اسکریپت:

1. فایل را در قسمت ویرایشگر پنل Sources باز کنید.
2. تغییرات خود را در قسمت ویرایشگر انجام دهید.

3. برای ذخیره، Command + S (Mac) یا Ctrl + S (ویندوز، لینوکس) را فشار دهید. DevTools کل فایل JS را در موتور جاوا اسکریپت کروم وصله می کند.

   

   پنجره ویرایشگر در تصویر بالا با رنگ آبی مشخص شده است.

یک تابع متوقف شده را به صورت زنده ویرایش کنید

در حالی که اجرا متوقف می شود، می توانید عملکرد فعلی را ویرایش کنید و تغییرات را به صورت زنده با محدودیت های زیر اعمال کنید:

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

برای ویرایش زنده یک تابع:

1. اجرای را با نقطه شکست متوقف کنید .
2. تابع مکث شده را ویرایش کنید.
3. برای اعمال تغییرات، Command / Control + S را فشار دهید. دیباگر به طور خودکار عملکرد را مجدداً راه اندازی می کند .
4. اجرا را ادامه دهید.

برای یادگیری این گردش کار ویدیوی زیر را تماشا کنید.

در این مثال، متغیرهای addend1 و addend2 در ابتدا دارای یک نوع string نادرست هستند. بنابراین، به جای اضافه کردن اعداد، رشته ها به هم متصل می شوند. برای رفع آن، توابع parseInt() در طول ویرایش زنده اضافه می شوند.

جستجو و جایگزینی متن در یک اسکریپت

برای جستجوی متن در یک اسکریپت:

1. فایل را در قسمت ویرایشگر پنل Sources باز کنید.
2. برای باز کردن نوار جستجوی داخلی، Command + F (Mac) یا Ctrl + F (ویندوز، لینوکس) را فشار دهید.
3. در نوار، درخواست خود را وارد کنید. به صورت اختیاری، می توانید:
   • کلیک کنید با حروف بزرگ مطابقت دهید تا درخواست شما به حروف بزرگ و کوچک حساس شود.
   • کلیک کنید از Regular Expression برای جستجو با استفاده از عبارت RegEx استفاده کنید .
4. Enter را فشار دهید. برای رفتن به نتیجه جستجوی قبلی یا بعدی، دکمه بالا یا پایین را فشار دهید.

برای جایگزینی متنی که پیدا کردید:

1. در نوار جستجو، روی دکمه تعویض
2. متن مورد نظر برای جایگزینی را تایپ کنید، سپس روی Replace یا Replace all کلیک کنید.

جاوا اسکریپت را غیرفعال کنید

به غیرفعال کردن جاوا اسکریپت با ابزار توسعه کروم مراجعه کنید.

Kayce Basques

Sofia Emelianova

با این مرجع جامع ویژگی‌های اشکال‌زدایی 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 در تصویر بالا با رنگ آبی مشخص شده است.

یک تابع (فریم) را در پشته تماس راه اندازی مجدد کنید

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

برای راه اندازی مجدد یک فریم:

1. توقف اجرای تابع در نقطه شکست . صفحه Call Stack ترتیب فراخوانی های تابع را ثبت می کند.

2. در قسمت 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() به نوبه خود آرگومان را افزایش می دهد.

سعی کنید فریم های هر دو تابع را به روش زیر راه اندازی مجدد کنید:

1. کد بالا را در یک قطعه جدید کپی کرده و اجرا کنید . اجرا در نقطه شکست خط کد debugger متوقف می شود.
2. توجه داشته باشید که دیباگر مقدار فعلی را در کنار اعلان تابع به شما نشان می دهد: value = 1 .
3. قاب bar() را مجددا راه اندازی کنید.
4. با فشار دادن F9 از بیانیه افزایش ارزش عبور کنید. توجه داشته باشید که مقدار فعلی افزایش می یابد: value = 2 .
5. در صورت تمایل، در قسمت Scope ، روی مقدار دوبار کلیک کنید تا آن را ویرایش کنید و مقدار مورد نظر را تنظیم کنید.

6. سعی کنید قاب bar() را مجدداً راه اندازی کنید و چندین بار دیگر از دستور increment عبور کنید. ارزش همچنان در حال افزایش است.

راه اندازی مجدد فریم، آرگومان ها را بازنشانی نمی کند. به عبارت دیگر، راه اندازی مجدد حالت اولیه را در هنگام فراخوانی تابع بازیابی نمی کند. در عوض، به سادگی نشانگر اجرا را به شروع تابع منتقل می کند.

بنابراین، مقدار آرگومان فعلی در طول راه اندازی مجدد همان تابع در حافظه باقی می ماند.

1. اکنون قاب foo() را در Call Stack مجددا راه اندازی کنید. توجه کنید که مقدار دوباره 0 است.

در جاوا اسکریپت، تغییرات در آرگومان‌ها در خارج از تابع قابل مشاهده نیستند. توابع تودرتو مقادیر را دریافت می کنند، نه مکان آنها را در حافظه. 1. برای تکمیل این آموزش، اجرای اسکریپت ( F8 ) را از سر بگیرید.

نمایش قاب های فهرست شده نادیده گرفته شود

به طور پیش‌فرض، صفحه Call Stack فقط فریم‌هایی را نشان می‌دهد که با کد شما مرتبط هستند و هر اسکریپت اضافه شده به آن را حذف می‌کند. تنظیمات > فهرست نادیده گرفته شود .

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

آن را در این صفحه نمایشی امتحان کنید:

1. در پانل منابع ، فایل src > app > app.component.ts را باز کنید.
2. یک نقطه شکست در تابع increment() تنظیم کنید.
3. در بخش 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 یک کتابخانه شخص ثالث است که شما به آن اعتماد دارید. اگر مطمئن هستید که مشکلی که در حال رفع اشکال هستید مربوط به کتابخانه شخص ثالث نیست، منطقی است که اسکریپت را نادیده بگیرید.

یک اسکریپت یا یک دایرکتوری از درخت فایل را نادیده بگیرید

برای نادیده گرفتن یک اسکریپت جداگانه یا کل فهرست:

1. در منابع > صفحه ، روی دایرکتوری یا فایل اسکریپت کلیک راست کنید.
2. برای نادیده گرفتن فهرست، افزودن فهرست/اسکریپت را انتخاب کنید.

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

در غیر این صورت، می توانید دایرکتوری ها و اسکریپت های پنهان و نادیده گرفته شده را از لیست حذف کنید تنظیمات > فهرست نادیده گرفته شود .

یک اسکریپت را از پنجره ویرایشگر نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از پنجره ویرایشگر :

1. فایل را باز کنید.
2. در هر نقطه راست کلیک کنید.
3. افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت از صفحه Call Stack را نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از صفحه Call Stack :

1. روی یک تابع از اسکریپت کلیک راست کنید.
2. افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت را از تنظیمات نادیده بگیرید

ببینید تنظیمات > فهرست نادیده گرفته شود .

تکه هایی از کد اشکال زدایی را از هر صفحه ای اجرا کنید

اگر متوجه می‌شوید که همان کد اشکال‌زدایی را بارها و بارها در کنسول اجرا می‌کنید، Snippets را در نظر بگیرید. Snippet ها اسکریپت های اجرایی هستند که شما آنها را می نویسید، ذخیره می کنید و در DevTools اجرا می کنید.

برای اطلاعات بیشتر به اجرای قطعه کد از هر صفحه مراجعه کنید.

مقادیر عبارات جاوا اسکریپت سفارشی را تماشا کنید

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

• روی Add Expression کلیک کنید برای ایجاد یک عبارت ساعت جدید
• روی Refresh کلیک کنید برای تازه کردن مقادیر تمام عبارات موجود. هنگام عبور از کد، مقادیر به طور خودکار بازخوانی می شوند.
• ماوس را روی یک عبارت نگه دارید و روی حذف عبارت کلیک کنید برای حذف آن

اسکریپت ها را بررسی و ویرایش کنید

هنگامی که یک اسکریپت را در صفحه صفحه باز می کنید، DevTools محتویات آن را در پنجره ویرایشگر به شما نشان می دهد. در قسمت ویرایشگر ، می توانید کد خود را مرور و ویرایش کنید.

علاوه بر این، می توانید محتویات را به صورت محلی لغو کنید یا یک فضای کاری ایجاد کنید و تغییراتی را که در DevTools ایجاد می کنید مستقیماً در منابع محلی خود ذخیره کنید.

یک فایل کوچک را خوانا کنید

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

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

بلوک های کد را تا کنید

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

برای باز کردن بلوک کد، روی {...} در کنار آن کلیک کنید.

برای پیکربندی این رفتار، نگاه کنید تنظیمات > تنظیمات > منابع .

یک اسکریپت را ویرایش کنید

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

برای ویرایش یک اسکریپت:

1. فایل را در قسمت ویرایشگر پنل Sources باز کنید.
2. تغییرات خود را در قسمت ویرایشگر انجام دهید.

3. برای ذخیره، Command + S (Mac) یا Ctrl + S (ویندوز، لینوکس) را فشار دهید. DevTools کل فایل JS را در موتور جاوا اسکریپت کروم وصله می کند.

   

   پنجره ویرایشگر در تصویر بالا با رنگ آبی مشخص شده است.

یک تابع متوقف شده را به صورت زنده ویرایش کنید

در حالی که اجرای مکث است ، می توانید عملکرد فعلی را ویرایش کرده و تغییرات را با محدودیت های زیر به صورت زنده اعمال کنید:

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

برای زنده کردن یک تابع:

1. مکث اعدام را با یک نقطه شکست .
2. عملکرد مکث را ویرایش کنید.
3. برای اعمال تغییرات ، فرمان / کنترل + S را فشار دهید. اشکال زدایی عملکرد را به طور خودکار مجدداً راه اندازی می کند .
4. اعدام را ادامه دهید.

برای یادگیری این گردش کار ، ویدیوی زیر را تماشا کنید.

در این مثال ، متغیرهای addend1 و addend2 در ابتدا دارای یک نوع string نادرست هستند. بنابراین ، به جای اضافه کردن اعداد ، رشته ها به هم پیوسته اند. برای رفع آن ، توابع parseInt() در هنگام ویرایش زنده اضافه می شود.

متن را در یک اسکریپت جستجو و جایگزین کنید

برای جستجوی متن در یک اسکریپت:

1. پرونده را در صفحه ویرایشگر پانل منابع باز کنید.
2. برای باز کردن یک نوار جستجوی داخلی ، Command + F (Mac) یا Ctrl + F (ویندوز ، لینوکس) را فشار دهید.
3. در نوار ، پرس و جو خود را وارد کنید. به صورت اختیاری ، می توانید:
   • کلیک کنید مورد را برای حساسیت به پرس و جو مورد نظر خود قرار دهید .
   • کلیک کنید برای جستجو با استفاده از عبارت Regex از عبارت معمولی استفاده کنید .
4. Enter را فشار دهید. برای پرش به نتیجه جستجوی قبلی یا بعدی ، دکمه بالا یا پایین را فشار دهید.

برای جایگزینی متنی که پیدا کردید:

1. در نوار جستجو ، روی کلیک کنید دکمه را جایگزین کنید .
2. متن را برای جایگزینی تایپ کنید ، سپس روی جایگزین یا جایگزین کردن همه کلیک کنید.

جاوا اسکریپت را غیرفعال کنید

به غیرفعال کردن جاوا اسکریپت با Devtools Chrome مراجعه کنید.

Kayce Basques

Sofia Emelianova

با این مرجع جامع از ویژگی های اشکال زدایی Chrome Devtools ، گردش کار اشکال زدایی جدید را کشف کنید.

برای یادگیری اصول اولیه اشکال زدایی ، با اشکال زدایی JavaScript در Chrome Devtools شروع کنید .

کد مکث با نقاط شکست

یک نقطه شکست را تنظیم کنید تا بتوانید کد خود را در وسط اجرای آن مکث کنید. برای یادگیری نحوه تنظیم نقاط شکست ، به مکث کد خود با نقاط شکست مراجعه کنید.

مقادیر را هنگام مکث بررسی کنید

در حالی که اعدام متوقف می شود ، اشکال زدایی تمام متغیرها ، ثابت ها و اشیاء موجود در عملکرد فعلی را تا یک نقطه شکست ارزیابی می کند. اشکال زدایی مقادیر فعلی را در کنار اعلامیه های مربوطه نشان می دهد.

می توانید از کنسول برای پرس و جو از متغیرها ، ثابت ها و اشیاء ارزیابی شده استفاده کنید.

خصوصیات کلاس/عملکرد پیش نمایش در شناور

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

قدم از طریق کد

پس از مکث کد شما ، یک بار از طریق آن قدم بردارید ، یک عبارت در یک زمان ، بررسی جریان کنترل و مقادیر خاصیت در طول مسیر.

قدم بیش از خط کد

هنگامی که در یک خط کد حاوی تابعی مکث شده است که مربوط به مشکلی نیست که اشکال زدایی کنید ، روی مرحله روی کلیک کنید برای اجرای عملکرد بدون قدم گذاشتن در آن.

به عنوان مثال ، فرض کنید کد زیر را اشکال زدایی می کنید:

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 با فشار دادن مرحله ، DevTools تمام کد موجود در عملکردی را که از آن قدم می زنید ، اجرا می کند ، که B و C است. devtools سپس در D .

قدم به خط کد

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

به عنوان مثال ، فرض کنید کد زیر را اشکال زدایی می کنید:

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 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 DevTools با فشار دادن Step Out ، بقیه کد را در getName() اجرا می کند ، که فقط در این مثال B است و سپس در C مکث می کند.

تمام کد را تا یک خط خاص اجرا کنید

هنگام اشکال زدایی یک عملکرد طولانی ، ممکن است کد زیادی وجود داشته باشد که مربوط به مشکلی نیست که شما اشکال زدایی کنید.

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

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

از سرگیری اجرای اسکریپت

برای ادامه اجرای اسکریپت پس از مکث ، روی رزومه اجرای اسکریپت کلیک کنید . DevTools در صورت وجود ، اسکریپت را تا نقطه شکست بعدی اجرا می کند.

اجرای اسکریپت

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

تغییر زمینه موضوع

هنگام کار با کارگران وب یا کارگران سرویس ، روی زمینه ذکر شده در صفحه موضوعات کلیک کنید تا به آن زمینه تغییر دهید. نماد آبی فلش نشان دهنده کدام زمینه در حال حاضر انتخاب شده است.

صفحه نخ روی تصویر بالا به رنگ آبی بیان شده است.

به عنوان مثال ، فرض کنید که در یک اسکریپت اصلی و اسکریپت کارگر سرویس خود در یک نقطه شکست مکث شده اید. شما می خواهید ویژگی های محلی و جهانی را برای زمینه کارگران سرویس مشاهده کنید ، اما پانل منابع زمینه اصلی اسکریپت را نشان می دهد. با کلیک بر روی ورودی سرویس دهنده در صفحه Threads ، می توانید به آن زمینه تغییر دهید.

از طریق عبارات جدا از کاما قدم بردارید

قدم زدن از طریق عبارات جدا از کاما به شما امکان می دهد تا کد Minified را اشکال زدایی کنید. برای مثال کد زیر را در نظر بگیرید:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

هنگامی که کوچک شد ، حاوی یک foo(),foo(),42 بیان است: 42 بیان:

function foo(){}function bar(){return foo(),foo(),42}bar();

اشکال زدایی از طریق چنین عباراتی دقیقاً یکسان است.

بنابراین ، رفتار پله یکسان است:

• بین کد کوچک و نویسنده.
• هنگام استفاده از نقشه های منبع برای اشکال زدایی کد مینیسم شده از نظر کد اصلی. به عبارت دیگر ، وقتی قسمتهای نیمه را می بینید ، همیشه می توانید انتظار داشته باشید که حتی اگر منبع واقعی که اشکال زدایی می کنید ، از طریق آنها قدم بگذارید.

ویژگی های محلی ، بسته شدن و جهانی را مشاهده و ویرایش کنید

در حالی که در یک خط کد مکث شده است ، از صفحه دامنه برای مشاهده و ویرایش مقادیر خواص و متغیرها در دامنه های محلی ، بسته شدن و جهانی استفاده کنید.

• برای تغییر آن روی یک مقدار خاصیت دوبار کلیک کنید.
• خواص غیر قابل تحمل از بین می رود.

صفحه دامنه روی تصویر بالا به رنگ آبی بیان شده است.

پشته تماس فعلی را مشاهده کنید

در حالی که در یک خط کد مکث شده است ، از صفحه تماس پشته برای مشاهده پشته تماس که شما را به این نقطه رسانده است ، استفاده کنید.

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

صفحه Call Stack روی تصویر بالا به رنگ آبی بیان شده است.

یک تابع (قاب) را در یک پشته تماس بگیرید

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

برای راه اندازی مجدد یک قاب:

1. اجرای عملکرد مکث در یک نقطه شکست . صفحه پشته تماس ترتیب تماس عملکرد را ثبت می کند.

2. در صفحه Call Stack ، روی یک تابع راست کلیک کرده و از منوی کشویی Restart Frame را انتخاب کنید.

   

برای درک نحوه کار مجدد قاب ، کد زیر را در نظر بگیرید:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

عملکرد foo() 0 به عنوان یک آرگومان می گیرد ، آن را ثبت می کند و عملکرد bar() را فراخوانی می کند. عملکرد bar() ، به نوبه خود ، استدلال را افزایش می دهد.

سعی کنید فریم های هر دو کارکرد را به روش زیر مجدداً راه اندازی کنید:

1. کد بالا را در یک قطعه جدید کپی کرده و آن را اجرا کنید . اعدام در نقطه شکست خط debugger متوقف می شود.
2. توجه کنید که اشکال زدایی مقدار فعلی را در کنار اعلام عملکرد به شما نشان می دهد: value = 1 .
3. قاب bar() را مجدداً راه اندازی کنید.
4. با فشار دادن F9 از طریق بیانیه افزایش ارزش قدم بردارید. توجه کنید که مقدار فعلی افزایش می یابد: value = 2 .
5. به صورت اختیاری ، در صفحه دامنه ، روی مقدار بار کلیک کنید تا آن را ویرایش کنید و مقدار مورد نظر را تنظیم کنید.

6. قاب bar() را مجدداً راه اندازی کنید و چندین بار دیگر از طریق بیانیه افزایش دهید. مقدار همچنان افزایش می یابد.

راه اندازی مجدد قاب آرگومان ها را مجدداً تنظیم نمی کند. به عبارت دیگر ، راه اندازی مجدد حالت اولیه را در تماس با عملکرد بازیابی نمی کند. در عوض ، آن را به سادگی نشانگر اجرای را به شروع عملکرد منتقل می کند.

بنابراین ، مقدار استدلال فعلی در حافظه در راه اندازی مجدد همان عملکرد ادامه دارد.

1. اکنون قاب foo() را در پشته تماس مجدداً راه اندازی کنید. توجه کنید که مقدار دوباره 0 است.

در JavaScript ، تغییرات در آرگومان ها در خارج از عملکرد قابل مشاهده نیست (منعکس شده). توابع تو در تو مقادیر دریافت می کنند ، نه مکان آنها در حافظه. 1. از رزومه اجرای اسکریپت ( F8 ) برای تکمیل این آموزش.

نمایش فریم های فهرست شده

به طور پیش فرض ، صفحه پشته تماس فقط فریم هایی را نشان می دهد که مربوط به کد شما هستند و هر اسکریپت اضافه شده ای را حذف می کنند تنظیمات > لیست نادیده گرفتن .

برای مشاهده پشته تماس کامل از جمله قاب های شخص ثالث ، نمایش فریم های فهرست شده در زیر بخش Call Stack .

آن را در این صفحه نمایشی امتحان کنید:

1. در پانل منابع ، پرونده src > app > app.component.ts را باز کنید.
2. یک نقطه شکست را در عملکرد increment() تنظیم کنید.
3. در بخش Call Stack ، کادر انتخاب فریم های فهرست شده را نادیده گرفته یا پاک کنید و لیست مربوط یا کامل فریم های موجود در پشته تماس را مشاهده کنید.

مشاهده قاب های async

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

در این حالت ، پشته تماس کل سابقه تماس از جمله فریم های تماس Async را نشان می دهد.

کپی ردیابی پشته

بر روی هر نقطه در صفحه Call Stack کلیک راست کرده و Copy Stack Trace را برای کپی کردن پشته تماس فعلی در کلیپ بورد انتخاب کنید.

در زیر نمونه ای از خروجی:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

در درخت پرونده حرکت کنید

برای حرکت در درخت پرونده از صفحه صفحه استفاده کنید.

گروه های نویسنده و مستقر در درخت پرونده

هنگام تهیه برنامه های وب با استفاده از چارچوب ها (به عنوان مثال ، واکنش یا زاویه ای ) ، به دلیل فایلهای کوچک تولید شده توسط ابزارهای ساخت (به عنوان مثال ، Webpack یا Vite ) ، حرکت در منابع دشوار است.

برای کمک به شما در منابع ، منابع > صفحه می توانند پرونده ها را به دو دسته گروه بندی کنند:

• تألیف شده مشابه پرونده های منبعی که در IDE خود مشاهده می کنید. DevTools این پرونده ها را بر اساس نقشه های منبع تهیه شده توسط ابزارهای ساخت شما تولید می کند.
• مستقر پرونده های واقعی که مرورگر می خواند. معمولاً این پرونده ها کوچک می شوند.

برای فعال کردن گروه بندی ، فعال کردن > پرونده های گروهی توسط نویسنده/مستقر گزینه زیر منوی سه نقطه در بالای درخت پرونده.

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

برای کمک به شما فقط روی کدی که ایجاد می کنید تمرکز کنید ، منابع > صفحه صفحه همه اسکریپت ها یا دایرکتوری های اضافه شده به تنظیمات > لیست را به طور پیش فرض نادیده بگیرید .

برای پنهان کردن چنین اسکریپت ها ، منابع > صفحه را انتخاب کنید> > پنهان کردن منابع فهرست شده .

یک اسکریپت یا الگوی اسکریپت ها را نادیده بگیرید

یک فیلمنامه را نادیده بگیرید تا هنگام اشکال زدایی از آن پرش کنید. هنگامی که نادیده گرفته می شود ، یک اسکریپت در صفحه Call Stack مبهم می شود ، و شما هرگز وقتی از طریق کد خود قدم می زنید ، وارد کارکردهای اسکریپت نمی شوید.

به عنوان مثال ، فرض کنید از این کد قدم می زنید:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

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

یک اسکریپت یا دایرکتوری را از درخت پرونده نادیده بگیرید

برای نادیده گرفتن یک اسکریپت فردی یا یک دایرکتوری کامل:

1. در منابع > صفحه ، روی یک دایرکتوری یا یک پرونده اسکریپت راست کلیک کنید.
2. برای نادیده گرفتن لیست ، Add Directory/Script را انتخاب کنید.

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

در غیر این صورت ، می توانید دایرکتوری ها و اسکریپت های پنهان و نادیده گرفته شده را از لیست حذف کنید تنظیمات > لیست نادیده گرفتن .

فیلمنامه را از صفحه ویرایشگر نادیده بگیرید

برای نادیده گرفتن فیلمنامه از صفحه ویرایشگر :

1. فایل را باز کنید.
2. در هر کجا کلیک راست کنید.
3. اضافه کردن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت را از صفحه پشته تماس نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از صفحه Call Stack :

1. بر روی یک تابع از فیلمنامه کلیک راست کنید.
2. اضافه کردن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک فیلمنامه را از تنظیمات نادیده بگیرید

ببینید تنظیمات > لیست نادیده گرفتن .

قطعه های کد اشکال زدایی را از هر صفحه اجرا کنید

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

برای کسب اطلاعات بیشتر ، قطعه های کد را از هر صفحه مشاهده کنید.

مقادیر عبارات جاوا اسکریپت سفارشی را تماشا کنید

برای تماشای مقادیر عبارات سفارشی از صفحه Watch استفاده کنید. می توانید هر عبارت معتبر JavaScript را تماشا کنید.

• روی Add Expression کلیک کنید برای ایجاد یک عبارت ساعت جدید.
• روی Refresh کلیک کنید برای تازه کردن مقادیر تمام عبارات موجود. مقادیر به طور خودکار در حالی که از طریق کد قدم می زنند ، تازه می شوند.
• روی یک عبارت شناور شوید و روی Delete Expression کلیک کنید برای حذف آن

اسکریپت ها را بازرسی و ویرایش کنید

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

علاوه بر این ، می توانید محتویات را به صورت محلی نادیده بگیرید یا فضای کاری ایجاد کرده و تغییراتی را که در DevTools ایجاد می کنید مستقیماً در منابع محلی خود ذخیره کنید.

یک فایل کوچک را قابل خواندن کنید

به طور پیش فرض ، پانل منابع Pretty Prests Files Minified. هنگامی که چاپ زیبا باشد ، ویرایشگر ممکن است یک خط کد طولانی را در چندین خط نشان دهد ، با - نشان دهد که این ادامه خط است.

برای دیدن پرونده های Minified که در آن بارگذاری شده است ، در گوشه سمت چپ پایین ویرایشگر { } کلیک کنید.

بلوک های کد تاشو

برای جمع کردن یک بلوک کد ، روی شماره خط در ستون سمت چپ حرکت کنید و کلیک کنید فرو ریختن .

برای آشکار کردن بلوک کد ، روی {...} کنار آن کلیک کنید.

برای پیکربندی این رفتار ، ببینید تنظیمات > تنظیمات > منابع .

یک اسکریپت را ویرایش کنید

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

برای ویرایش یک فیلمنامه:

1. پرونده را در صفحه ویرایشگر پانل منابع باز کنید.
2. تغییرات خود را در صفحه ویرایشگر انجام دهید.

3. برای ذخیره Command + S (Mac) یا Ctrl + S (ویندوز ، لینوکس) را فشار دهید. DevTools کل پرونده JS را در موتور JavaScript Chrome قرار می دهد.

   

   صفحه ویرایشگر روی تصویر بالا به رنگ آبی بیان شده است.

یک تابع مکث را به صورت زنده ویرایش کنید

در حالی که اجرای مکث است ، می توانید عملکرد فعلی را ویرایش کرده و تغییرات را با محدودیت های زیر به صورت زنده اعمال کنید:

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

برای زنده کردن یک تابع:

1. مکث اعدام را با یک نقطه شکست .
2. عملکرد مکث را ویرایش کنید.
3. برای اعمال تغییرات ، فرمان / کنترل + S را فشار دهید. اشکال زدایی عملکرد را به طور خودکار مجدداً راه اندازی می کند .
4. اعدام را ادامه دهید.

برای یادگیری این گردش کار ، ویدیوی زیر را تماشا کنید.

در این مثال ، متغیرهای addend1 و addend2 در ابتدا دارای یک نوع string نادرست هستند. بنابراین ، به جای اضافه کردن اعداد ، رشته ها به هم پیوسته اند. برای رفع آن ، توابع parseInt() در هنگام ویرایش زنده اضافه می شود.

متن را در یک اسکریپت جستجو و جایگزین کنید

برای جستجوی متن در یک اسکریپت:

1. پرونده را در صفحه ویرایشگر پانل منابع باز کنید.
2. برای باز کردن یک نوار جستجوی داخلی ، Command + F (Mac) یا Ctrl + F (ویندوز ، لینوکس) را فشار دهید.
3. در نوار ، پرس و جو خود را وارد کنید. به صورت اختیاری ، می توانید:
   • کلیک کنید مورد را برای حساسیت به پرس و جو مورد نظر خود قرار دهید .
   • کلیک کنید برای جستجو با استفاده از عبارت Regex از عبارت معمولی استفاده کنید .
4. Enter را فشار دهید. برای پرش به نتیجه جستجوی قبلی یا بعدی ، دکمه بالا یا پایین را فشار دهید.

برای جایگزینی متنی که پیدا کردید:

1. در نوار جستجو ، روی کلیک کنید دکمه را جایگزین کنید .
2. متن را برای جایگزینی تایپ کنید ، سپس روی جایگزین یا جایگزین کردن همه کلیک کنید.

جاوا اسکریپت را غیرفعال کنید

به غیرفعال کردن جاوا اسکریپت با Devtools Chrome مراجعه کنید.

Kayce Basques

Sofia Emelianova

با این مرجع جامع از ویژگی های اشکال زدایی Chrome Devtools ، گردش کار اشکال زدایی جدید را کشف کنید.

برای یادگیری اصول اولیه اشکال زدایی ، با اشکال زدایی JavaScript در Chrome Devtools شروع کنید .

کد مکث با نقاط شکست

یک نقطه شکست را تنظیم کنید تا بتوانید کد خود را در وسط اجرای آن مکث کنید. برای یادگیری نحوه تنظیم نقاط شکست ، به مکث کد خود با نقاط شکست مراجعه کنید.

مقادیر را هنگام مکث بررسی کنید

در حالی که اعدام متوقف می شود ، اشکال زدایی تمام متغیرها ، ثابت ها و اشیاء موجود در عملکرد فعلی را تا یک نقطه شکست ارزیابی می کند. اشکال زدایی مقادیر فعلی را در کنار اعلامیه های مربوطه نشان می دهد.

می توانید از کنسول برای پرس و جو از متغیرها ، ثابت ها و اشیاء ارزیابی شده استفاده کنید.

خصوصیات کلاس/عملکرد پیش نمایش در شناور

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

قدم از طریق کد

پس از مکث کد شما ، یک بار از طریق آن قدم بردارید ، یک عبارت در یک زمان ، بررسی جریان کنترل و مقادیر خاصیت در طول مسیر.

قدم بیش از خط کد

هنگامی که در یک خط کد حاوی تابعی مکث شده است که مربوط به مشکلی نیست که اشکال زدایی کنید ، روی مرحله روی کلیک کنید برای اجرای عملکرد بدون قدم گذاشتن در آن.

به عنوان مثال ، فرض کنید کد زیر را اشکال زدایی می کنید:

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 با فشار دادن مرحله ، DevTools تمام کد موجود در عملکردی را که از آن قدم می زنید ، اجرا می کند ، که B و C است. devtools سپس در D .

قدم به خط کد

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

به عنوان مثال ، فرض کنید کد زیر را اشکال زدایی می کنید:

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 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 DevTools با فشار دادن Step Out ، بقیه کد را در getName() اجرا می کند ، که فقط در این مثال B است و سپس در C مکث می کند.

تمام کد را تا یک خط خاص اجرا کنید

هنگام اشکال زدایی یک عملکرد طولانی ، ممکن است کد زیادی وجود داشته باشد که مربوط به مشکلی نیست که شما اشکال زدایی کنید.

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

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

از سرگیری اجرای اسکریپت

برای ادامه اجرای اسکریپت پس از مکث ، روی رزومه اجرای اسکریپت کلیک کنید . DevTools در صورت وجود ، اسکریپت را تا نقطه شکست بعدی اجرا می کند.

اجرای اسکریپت

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

تغییر زمینه موضوع

هنگام کار با کارگران وب یا کارگران سرویس ، روی زمینه ذکر شده در صفحه موضوعات کلیک کنید تا به آن زمینه تغییر دهید. نماد آبی فلش نشان دهنده کدام زمینه در حال حاضر انتخاب شده است.

صفحه نخ روی تصویر بالا به رنگ آبی بیان شده است.

به عنوان مثال ، فرض کنید که در یک اسکریپت اصلی و اسکریپت کارگر سرویس خود در یک نقطه شکست مکث شده اید. شما می خواهید ویژگی های محلی و جهانی را برای زمینه کارگران سرویس مشاهده کنید ، اما پانل منابع زمینه اصلی اسکریپت را نشان می دهد. با کلیک بر روی ورودی سرویس دهنده در صفحه Threads ، می توانید به آن زمینه تغییر دهید.

از طریق عبارات جدا از کاما قدم بردارید

قدم زدن از طریق عبارات جدا از کاما به شما امکان می دهد تا کد Minified را اشکال زدایی کنید. برای مثال کد زیر را در نظر بگیرید:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

هنگامی که کوچک شد ، حاوی یک foo(),foo(),42 بیان است: 42 بیان:

function foo(){}function bar(){return foo(),foo(),42}bar();

اشکال زدایی از طریق چنین عباراتی دقیقاً یکسان است.

بنابراین ، رفتار پله یکسان است:

• بین کد کوچک و نویسنده.
• هنگام استفاده از نقشه های منبع برای اشکال زدایی کد مینیسم شده از نظر کد اصلی. به عبارت دیگر ، وقتی قسمتهای نیمه را می بینید ، همیشه می توانید انتظار داشته باشید که حتی اگر منبع واقعی که اشکال زدایی می کنید ، از طریق آنها قدم بگذارید.

ویژگی های محلی ، بسته شدن و جهانی را مشاهده و ویرایش کنید

در حالی که در یک خط کد مکث شده است ، از صفحه دامنه برای مشاهده و ویرایش مقادیر خواص و متغیرها در دامنه های محلی ، بسته شدن و جهانی استفاده کنید.

• برای تغییر آن روی یک مقدار خاصیت دوبار کلیک کنید.
• خواص غیر قابل تحمل از بین می رود.

صفحه دامنه روی تصویر بالا به رنگ آبی بیان شده است.

پشته تماس فعلی را مشاهده کنید

در حالی که در یک خط کد مکث شده است ، از صفحه تماس پشته برای مشاهده پشته تماس که شما را به این نقطه رسانده است ، استفاده کنید.

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

صفحه Call Stack روی تصویر بالا به رنگ آبی بیان شده است.

یک تابع (قاب) را در یک پشته تماس بگیرید

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

برای راه اندازی مجدد یک قاب:

1. اجرای عملکرد مکث در یک نقطه شکست . صفحه پشته تماس ترتیب تماس عملکرد را ثبت می کند.

2. در صفحه Call Stack ، روی یک تابع راست کلیک کرده و از منوی کشویی Restart Frame را انتخاب کنید.

   

برای درک نحوه کار مجدد قاب ، کد زیر را در نظر بگیرید:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

عملکرد foo() 0 به عنوان یک آرگومان می گیرد ، آن را ثبت می کند و عملکرد bar() را فراخوانی می کند. عملکرد bar() ، به نوبه خود ، استدلال را افزایش می دهد.

سعی کنید فریم های هر دو کارکرد را به روش زیر مجدداً راه اندازی کنید:

1. کد بالا را در یک قطعه جدید کپی کرده و آن را اجرا کنید . اعدام در نقطه شکست خط debugger متوقف می شود.
2. توجه کنید که اشکال زدایی مقدار فعلی را در کنار اعلام عملکرد به شما نشان می دهد: value = 1 .
3. قاب bar() را مجدداً راه اندازی کنید.
4. با فشار دادن F9 از طریق بیانیه افزایش ارزش قدم بردارید. توجه کنید که مقدار فعلی افزایش می یابد: value = 2 .
5. به صورت اختیاری ، در صفحه دامنه ، روی مقدار بار کلیک کنید تا آن را ویرایش کنید و مقدار مورد نظر را تنظیم کنید.

6. قاب bar() را مجدداً راه اندازی کنید و چندین بار دیگر از طریق بیانیه افزایش دهید. مقدار همچنان افزایش می یابد.

راه اندازی مجدد قاب آرگومان ها را مجدداً تنظیم نمی کند. به عبارت دیگر ، راه اندازی مجدد حالت اولیه را در تماس با عملکرد بازیابی نمی کند. در عوض ، آن را به سادگی نشانگر اجرای را به شروع عملکرد منتقل می کند.

بنابراین ، مقدار استدلال فعلی در حافظه در راه اندازی مجدد همان عملکرد ادامه دارد.

1. اکنون قاب foo() را در پشته تماس مجدداً راه اندازی کنید. توجه کنید که مقدار دوباره 0 است.

در JavaScript ، تغییرات در آرگومان ها در خارج از عملکرد قابل مشاهده نیست (منعکس شده). توابع تو در تو مقادیر دریافت می کنند ، نه مکان آنها در حافظه. 1. از رزومه اجرای اسکریپت ( F8 ) برای تکمیل این آموزش.

نمایش فریم های فهرست شده

به طور پیش فرض ، صفحه پشته تماس فقط فریم هایی را نشان می دهد که مربوط به کد شما هستند و هر اسکریپت اضافه شده ای را حذف می کنند تنظیمات > لیست نادیده گرفتن .

برای مشاهده پشته تماس کامل از جمله قاب های شخص ثالث ، نمایش فریم های فهرست شده در زیر بخش Call Stack .

آن را در این صفحه نمایشی امتحان کنید:

1. در پانل منابع ، پرونده src > app > app.component.ts را باز کنید.
2. یک نقطه شکست را در عملکرد increment() تنظیم کنید.
3. در بخش Call Stack ، کادر انتخاب فریم های فهرست شده را نادیده گرفته یا پاک کنید و لیست مربوط یا کامل فریم های موجود در پشته تماس را مشاهده کنید.

مشاهده قاب های async

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

در این حالت ، پشته تماس کل سابقه تماس از جمله فریم های تماس Async را نشان می دهد.

کپی ردیابی پشته

بر روی هر نقطه در صفحه Call Stack کلیک راست کرده و Copy Stack Trace را برای کپی کردن پشته تماس فعلی در کلیپ بورد انتخاب کنید.

در زیر نمونه ای از خروجی:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

در درخت پرونده حرکت کنید

برای حرکت در درخت پرونده از صفحه صفحه استفاده کنید.

گروه های نویسنده و مستقر در درخت پرونده

هنگام تهیه برنامه های وب با استفاده از چارچوب ها (به عنوان مثال ، واکنش یا زاویه ای ) ، به دلیل فایلهای کوچک تولید شده توسط ابزارهای ساخت (به عنوان مثال ، Webpack یا Vite ) ، حرکت در منابع دشوار است.

برای کمک به شما در منابع ، منابع > صفحه می توانند پرونده ها را به دو دسته گروه بندی کنند:

• تألیف شده مشابه پرونده های منبعی که در IDE خود مشاهده می کنید. DevTools این پرونده ها را بر اساس نقشه های منبع تهیه شده توسط ابزارهای ساخت شما تولید می کند.
• مستقر پرونده های واقعی که مرورگر می خواند. معمولاً این پرونده ها کوچک می شوند.

برای فعال کردن گروه بندی ، فعال کردن > پرونده های گروهی توسط نویسنده/مستقر گزینه زیر منوی سه نقطه در بالای درخت پرونده.

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

برای کمک به شما فقط روی کدی که ایجاد می کنید تمرکز کنید ، منابع > صفحه صفحه همه اسکریپت ها یا دایرکتوری های اضافه شده به تنظیمات > لیست را به طور پیش فرض نادیده بگیرید .

برای پنهان کردن چنین اسکریپت ها ، منابع > صفحه را انتخاب کنید> > پنهان کردن منابع فهرست شده .

یک اسکریپت یا الگوی اسکریپت ها را نادیده بگیرید

یک فیلمنامه را نادیده بگیرید تا هنگام اشکال زدایی از آن پرش کنید. هنگامی که نادیده گرفته می شود ، یک اسکریپت در صفحه Call Stack مبهم می شود ، و شما هرگز وقتی از طریق کد خود قدم می زنید ، وارد کارکردهای اسکریپت نمی شوید.

به عنوان مثال ، فرض کنید از این کد قدم می زنید:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

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

یک اسکریپت یا دایرکتوری را از درخت پرونده نادیده بگیرید

برای نادیده گرفتن یک اسکریپت فردی یا یک دایرکتوری کامل:

1. در منابع > صفحه ، روی یک دایرکتوری یا یک پرونده اسکریپت راست کلیک کنید.
2. برای نادیده گرفتن لیست ، Add Directory/Script را انتخاب کنید.

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

در غیر این صورت ، می توانید دایرکتوری ها و اسکریپت های پنهان و نادیده گرفته شده را از لیست حذف کنید تنظیمات > لیست نادیده گرفتن .

فیلمنامه را از صفحه ویرایشگر نادیده بگیرید

برای نادیده گرفتن فیلمنامه از صفحه ویرایشگر :

1. فایل را باز کنید.
2. در هر کجا کلیک راست کنید.
3. اضافه کردن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک اسکریپت را از صفحه پشته تماس نادیده بگیرید

برای نادیده گرفتن یک اسکریپت از صفحه Call Stack :

1. بر روی یک تابع از فیلمنامه کلیک راست کنید.
2. اضافه کردن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید.

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

یک فیلمنامه را از تنظیمات نادیده بگیرید

ببینید تنظیمات > لیست نادیده گرفتن .

قطعه های کد اشکال زدایی را از هر صفحه اجرا کنید

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

برای کسب اطلاعات بیشتر ، قطعه های کد را از هر صفحه مشاهده کنید.

مقادیر عبارات جاوا اسکریپت سفارشی را تماشا کنید

برای تماشای مقادیر عبارات سفارشی از صفحه Watch استفاده کنید. می توانید هر عبارت معتبر JavaScript را تماشا کنید.

• روی Add Expression کلیک کنید برای ایجاد یک عبارت ساعت جدید.
• روی Refresh کلیک کنید برای تازه کردن مقادیر تمام عبارات موجود. Values automatically refresh while stepping through code.
• Hover over an expression and click Delete Expression to delete it.

Inspect and edit scripts

When you open a script in the Page pane, DevTools shows you its contents in the Editor pane. In the Editor pane, you can browse and edit your code.

Additionally, you can override the contents locally or create a workspace and save the changes you make in DevTools directly to your local sources.

Make a minified file readable

By default, the Sources panel pretty-prints minified files. When pretty-printed, the Editor may show a single long code line in multiple lines, with - to indicate that it's the line continuation.

To see the minified filed as it was loaded, click { } in the bottom left corner of the Editor .

Fold code blocks

To fold a code block, hover over the line number in the left column and click فرو ریختن .

To unfold the code block, click {...} next to it.

To configure this behavior, see Settings > Preferences > Sources .

یک اسکریپت را ویرایش کنید

When fixing a bug, you often want to test out some changes to your JavaScript code. You don't need to make the changes in an external browser and then reload the page. You can edit your script in DevTools.

To edit a script:

1. Open the file in the Editor pane of the Sources panel.
2. Make your changes in the Editor pane.

3. Press Command + S (Mac) or Ctrl + S (Windows, Linux) to save. DevTools patches the entire JS file into Chrome's JavaScript engine.

   

   The Editor pane on the screenshot above is outlined in blue.

Edit a paused function live

While the execution is paused, you can edit the current function and apply changes live with the following limitations:

• You can edit only the top-most function in the Call Stack .
• There must be no recursive calls to the same function further down the stack.

To live-edit a function:

1. Pause the execution with a breakpoint .
2. Edit the paused function.
3. Press Command / Control + S to apply changes. The debugger restarts the function automatically.
4. Continue the execution.

Watch the video below to learn this workflow.

In this example, the addend1 and addend2 variables initially have an incorrect string type. So, instead of adding numbers, the strings are concatenated. To fix it, the parseInt() functions are added during live editing.

Search and replace text in a script

To search for text in a script:

1. Open the file in the Editor pane of the Sources panel.
2. To open a built-in search bar, press Command + F (Mac) or Ctrl + F (Windows, Linux).
3. In the bar, enter your query. Optionally, you can:
   • کلیک کنید Match Case to make your query case-sensitive.
   • کلیک کنید Use Regular Expression to search using a RegEx expression.
4. Enter را فشار دهید. To jump to previous or next search result, press the up or down button.

To replace the text you found:

1. On the search bar, click the Replace button.
2. Type the text to replace with, then click Replace or Replace all .

جاوا اسکریپت را غیرفعال کنید

See Disable JavaScript With Chrome DevTools .