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

Kayce Basques

Sofia Emelianova

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

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

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

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

این کد منبع قطعه است که برخی از پیام ها را ثبت می کند و بدنه 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 را فشار دهید.

   

صفحه Sources > 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 را فشار دهید تا دستور اجرا شود.

   

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

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

1. صفحه Snippets را باز کنید .

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

   

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

   

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

اجرای قطعه

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

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

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

3. کلیک در نوار عمل در پایین ویرایشگر اجرا کنید یا Control + Enter (ویندوز/لینوکس) یا Command + Enter (Mac) را فشار دهید.

   

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

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

3. تایپ کنید ! کاراکتری به دنبال آن نام قطعه ای که می خواهید اجرا کنید.

   

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

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

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

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

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