اگر متوجه شدید که به طور مکرر همان کد را در کنسول اجرا می کنید، به جای آن، کد را به عنوان یک قطعه ذخیره کنید. اسنیپت ها به زمینه جاوا اسکریپت صفحه دسترسی دارند. آنها جایگزینی برای بوک مارکلت ها هستند.
میتوانید قطعههایی را در پانل منابع بنویسید و آنها را در هر صفحه و در حالت ناشناس اجرا کنید.
به عنوان مثال، اسکرین شات زیر صفحه اصلی اسناد 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 قطعات شما را فهرست می کند. برای ویرایش یک قطعه، آن را به یکی از دو روش باز کنید:
به منابع > بروید > قطعه ها
از منوی فرمان :
- برای باز کردن Command Menu ، Control + Shift + P (ویندوز/لینوکس) یا Command + Shift + P (Mac) را فشار دهید.
- شروع به تایپ
Snippets
کنید، Show Snippets را انتخاب کنید و Enter را فشار دهید.
صفحه Sources > Snippets لیستی از قطعات ذخیره شده را به شما نشان می دهد که در این مثال خالی هستند.
قطعه ها را ایجاد کنید
میتوانید در قسمت Snippets یا با اجرای دستور مربوطه از Command Menu در هر نقطه از DevTools، قطعههایی ایجاد کنید.
بخش Snippets قطعات شما را به ترتیب حروف الفبا مرتب می کند.
یک قطعه در پنل Sources ایجاد کنید
- صفحه Snippets را باز کنید .
- کلیک کنید قطعه جدید .
یک نام برای قطعه خود وارد کنید و Enter را فشار دهید تا ذخیره شود.
یک قطعه از منوی فرمان ایجاد کنید
- مکان نما خود را در هر جایی از DevTools متمرکز کنید.
- برای باز کردن Command Menu ، Control + Shift + P (ویندوز/لینوکس) یا Command + Shift + P (Mac) را فشار دهید.
شروع به تایپ
Snippet
کنید، Create new snippet را انتخاب کنید، سپس Enter را فشار دهید تا دستور اجرا شود.
اگر میخواهید به قطعه جدید خود یک نام سفارشی بدهید، به تغییر نام قطعهها مراجعه کنید.
تکه ها را ویرایش کنید
- صفحه Snippets را باز کنید .
در قسمت Snippets ، روی نام قطعه ای که می خواهید ویرایش کنید کلیک کنید. پانل منابع آن را در ویرایشگر کد باز می کند.
از ویرایشگر کد برای ویرایش کد در قطعه خود استفاده کنید. ستاره در کنار نام قطعه به این معنی است که شما هنوز تغییرات خود را ذخیره نکرده اید.
برای ذخیره، Control + S (ویندوز/لینوکس) یا Command + S (Mac) را فشار دهید.
اجرای قطعه
مشابه ایجاد یک قطعه، میتوانید آن را هم در قسمت Snippets و هم از منوی فرمان اجرا کنید.
یک قطعه را در پنل Sources اجرا کنید
- صفحه Snippets را باز کنید .
- روی نام قطعه مورد نظر برای اجرا کلیک کنید. پانل منابع آن را در ویرایشگر کد باز می کند.
کلیک کنید در نوار عمل در پایین ویرایشگر اجرا کنید یا Control + Enter (ویندوز/لینوکس) یا Command + Enter (Mac) را فشار دهید.
یک قطعه از منوی فرمان را اجرا کنید
- مکان نما خود را در هر جایی از DevTools متمرکز کنید.
- برای باز کردن Command Menu ، Control + O (Windows/Linux) یا Command + O (Mac) را فشار دهید.
تایپ کنید
!
کاراکتری به دنبال آن نام قطعه ای که می خواهید اجرا کنید.برای اجرای قطعه کلید Enter را فشار دهید.
تغییر نام قطعات
- پنجره Snippets را باز کنید .
- روی نام قطعه کلیک راست کرده و Rename را انتخاب کنید.
پاره ها را حذف کنید
- پنجره Snippets را باز کنید .
- روی نام قطعه کلیک راست کرده و Remove را انتخاب کنید.