قطعات جاوا اسکریپت را اجرا کنید

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

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

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

به عنوان مثال، اسکرین شات زیر صفحه اصلی اسناد DevTools را در سمت چپ و برخی از کد منبع قطعه را در قسمت Sources > Snippets در سمت راست نشان می دهد.

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

این کد منبع قطعه است که برخی از پیام ها را ثبت می کند و بدنه HTML صفحه اصلی را با عنصر <p> که حاوی پیام است جایگزین می کند:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

وقتی روی اجرا کنید. دکمه Run ، کشوی کنسول برای نمایش Hello, Snippets! پیامی مبنی بر اینکه قطعه ثبت می شود و محتوای صفحه تغییر می کند.

صفحه اصلی پس از اجرای قطعه.

پنجره Snippets را باز کنید

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

  1. به منابع > بروید برگه های بیشتر > قطعه ها

    منوی برگه‌های بیشتر در صفحه منابع.

  2. از منوی فرمان :

    1. برای باز کردن Command Menu ، Control + Shift + P (ویندوز/لینوکس) یا Command + Shift + P (Mac) را فشار دهید.
    2. شروع به تایپ Snippets کنید، Show Snippets را انتخاب کنید و Enter را فشار دهید.

    انتخاب Show Snippets از منوی فرمان.

صفحه Sources > Snippets لیستی از قطعات ذخیره شده را به شما نشان می دهد که در این مثال خالی هستند.

یک صفحه Snippets خالی.

قطعه ها را ایجاد کنید

می‌توانید در قسمت Snippets یا با اجرای دستور مربوطه از Command Menu در هر نقطه از DevTools، قطعه‌هایی ایجاد کنید.

بخش Snippets قطعات شما را به ترتیب حروف الفبا مرتب می کند.

یک قطعه در پنل Sources ایجاد کنید

  1. صفحه Snippets را باز کنید .
  2. کلیک کنید قطعه جدید. قطعه جدید .
  3. یک نام برای قطعه خود وارد کنید و Enter را فشار دهید تا ذخیره شود.

    نام گذاری یک قطعه

یک قطعه از منوی فرمان ایجاد کنید

  1. مکان نما خود را در هر جایی از DevTools متمرکز کنید.
  2. برای باز کردن Command Menu ، Control + Shift + P (ویندوز/لینوکس) یا Command + Shift + P (Mac) را فشار دهید.
  3. شروع به تایپ Snippet کنید، Create new snippet را انتخاب کنید، سپس Enter را فشار دهید تا دستور اجرا شود.

    از منوی فرمان Create new snippet را انتخاب کنید.

اگر می‌خواهید به قطعه جدید خود یک نام سفارشی بدهید، به تغییر نام قطعه‌ها مراجعه کنید.

تکه ها را ویرایش کنید

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

    یک قطعه در ویرایشگر کد باز شد.

  3. از ویرایشگر کد برای ویرایش کد در قطعه خود استفاده کنید. ستاره در کنار نام قطعه به این معنی است که شما هنوز تغییرات خود را ذخیره نکرده اید.

    یک ستاره در کنار نام قطعه که کد ذخیره نشده را نشان می دهد.

  4. برای ذخیره، Control + S (ویندوز/لینوکس) یا Command + S (Mac) را فشار دهید.

اجرای قطعه

مشابه ایجاد یک قطعه، می‌توانید آن را هم در قسمت Snippets و هم از منوی فرمان اجرا کنید.

یک قطعه را در پنل Sources اجرا کنید

  1. صفحه Snippets را باز کنید .
  2. روی نام قطعه مورد نظر برای اجرا کلیک کنید. پانل منابع آن را در ویرایشگر کد باز می کند.
  3. کلیک کنید اجرا کنید. در نوار عمل در پایین ویرایشگر اجرا کنید یا Control + Enter (ویندوز/لینوکس) یا Command + Enter (Mac) را فشار دهید.

    دکمه Run.

یک قطعه از منوی فرمان را اجرا کنید

  1. مکان نما خود را در هر جایی از DevTools متمرکز کنید.
  2. برای باز کردن Command Menu ، Control + O (Windows/Linux) یا Command + O (Mac) را فشار دهید.
  3. تایپ کنید ! کاراکتری به دنبال آن نام قطعه ای که می خواهید اجرا کنید.

    اجرای یک قطعه از منوی باز.

  4. برای اجرای قطعه کلید Enter را فشار دهید.

تغییر نام قطعات

  1. پنجره Snippets را باز کنید .
  2. روی نام قطعه کلیک راست کرده و Rename را انتخاب کنید.

پاره ها را حذف کنید

  1. پنجره Snippets را باز کنید .
  2. روی نام قطعه کلیک راست کرده و Remove را انتخاب کنید.