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