เรียกใช้ข้อมูลโค้ด JavaScript

หากคุณพบว่าตนเองเรียกใช้โค้ดเดียวกันในคอนโซลซ้ำๆ ลองบันทึกโค้ดเป็นข้อมูลโค้ดแทน ข้อมูลโค้ดมีสิทธิ์เข้าถึงบริบท JavaScript ของหน้าเว็บ เป็นอีกทางเลือกหนึ่งนอกเหนือจากบุ๊กมาร์กเล็ต

คุณเขียนตัวอย่างข้อมูลในแผงแหล่งที่มา และเรียกใช้ในหน้าใดก็ได้และในโหมดไม่ระบุตัวตน

ตัวอย่างเช่น ภาพหน้าจอด้านล่างแสดงหน้าแรกของเอกสารประกอบของเครื่องมือสำหรับนักพัฒนาเว็บทางด้านซ้าย และซอร์สโค้ดของข้อมูลโค้ดบางส่วนในแผงแหล่งที่มา > ตัวอย่างข้อมูลทางด้านขวา

นี่คือซอร์สโค้ดของข้อมูลโค้ดที่บันทึกข้อความบางส่วนและแทนที่เนื้อหา HTML ของหน้าแรกด้วยองค์ประกอบ <p> ที่มีข้อความดังกล่าว

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

เมื่อคุณคลิกปุ่มเรียกใช้ ลิ้นชักคอนโซลจะปรากฏขึ้นเพื่อแสดงข้อความ Hello, Snippets! ที่ตัวอย่างข้อมูลบันทึก และเนื้อหาของหน้าเว็บมีการเปลี่ยนแปลง

เปิดแผงข้อมูลโค้ด

แผงข้อมูลโค้ดจะแสดงข้อมูลโค้ดของคุณ ในการแก้ไขข้อมูลโค้ด ให้เปิดข้อมูลโค้ดด้วยวิธีใดวิธีหนึ่งต่อไปนี้

1. ไปที่แหล่งที่มา > > ตัวอย่าง

   

2. จากเมนูคำสั่ง ให้ทำดังนี้

   1. กด Control+Shift+P (Windows/Linux) หรือ Command+Shift+P (Mac) เพื่อเปิด เมนูคำสั่ง
   2. เริ่มพิมพ์ Snippets เลือกแสดงตัวอย่าง แล้วกด Enter

   

แผงแหล่งที่มา>ตัวอย่างข้อมูลจะแสดงรายการของข้อมูลโค้ดที่คุณบันทึกไว้สำหรับตัวอย่างนี้ ซึ่งว่างเปล่า

สร้างข้อมูลเพิ่มเติม

คุณสร้างข้อมูลโค้ดในแผงข้อมูลโค้ดหรือเรียกใช้คำสั่งที่เกี่ยวข้องจากเมนูคำสั่งที่ใดก็ได้ในเครื่องมือสำหรับนักพัฒนาเว็บ

แผงตัวอย่างข้อมูลจะจัดเรียงตัวอย่างข้อมูลตามลำดับตัวอักษร

สร้างข้อมูลโค้ดในแผงแหล่งที่มา

1. เปิดแผงข้อมูลโค้ด
2. คลิก ข้อมูลโค้ดใหม่

3. ป้อนชื่อสำหรับข้อมูลโค้ดและกด Enter เพื่อบันทึก

   

สร้างข้อมูลโค้ดจากเมนูคำสั่ง

1. โฟกัสเคอร์เซอร์ที่ใดก็ได้ภายในเครื่องมือสำหรับนักพัฒนาเว็บ
2. กด Control+Shift+P (Windows/Linux) หรือ Command+Shift+P (Mac) เพื่อเปิด เมนูคำสั่ง

3. เริ่มพิมพ์ Snippet แล้วเลือกสร้างข้อมูลโค้ดใหม่ แล้วกด Enter เพื่อเรียกใช้คำสั่ง

   

ดูเปลี่ยนชื่อข้อมูลโค้ดหากต้องการตั้งชื่อที่กำหนดเองให้กับข้อมูลโค้ดใหม่

แก้ไขตัวอย่าง

1. เปิดแผงข้อมูลโค้ด

2. ในแผงข้อมูลโค้ด ให้คลิกชื่อข้อมูลโค้ดที่ต้องการแก้ไข แผงแหล่งที่มาจะเปิดขึ้นในตัวแก้ไขโค้ด

   

3. ใช้ตัวแก้ไขโค้ดเพื่อแก้ไขโค้ดในข้อมูลโค้ด เครื่องหมายดอกจันที่อยู่ติดกับชื่อข้อมูลโค้ดหมายความว่า คุณยังไม่ได้บันทึกการเปลี่ยนแปลงของคุณ

   

4. กด Control+S (Windows/Linux) หรือ Command+S (Mac) เพื่อบันทึก

เรียกใช้ข้อมูลโค้ด

เช่นเดียวกับการสร้างข้อมูลโค้ด คุณสามารถเรียกใช้ได้ทั้งในแผงข้อมูลโค้ดและจากเมนูคำสั่ง

เรียกใช้ข้อมูลโค้ดในแผงแหล่งที่มา

1. เปิดแผงข้อมูลโค้ด
2. คลิกชื่อของข้อมูลโค้ดที่ต้องการเรียกใช้ แผงแหล่งที่มาจะเปิดขึ้นในตัวแก้ไขโค้ด

3. คลิก เรียกใช้ในแถบการทำงานที่ด้านล่างของเครื่องมือแก้ไข หรือกด Control+Enter (Windows/Linux) หรือ Command+Enter (Mac)

   

เรียกใช้ข้อมูลโค้ดจากเมนูคำสั่ง

1. โฟกัสเคอร์เซอร์ที่ใดก็ได้ภายในเครื่องมือสำหรับนักพัฒนาเว็บ
2. กด Control+O (Windows/Linux) หรือ Command+O (Mac) เพื่อเปิด เมนูคำสั่ง

3. พิมพ์อักขระ ! ตามด้วยชื่อของข้อมูลโค้ดที่ต้องการเรียกใช้

   

4. กด Enter เพื่อเรียกใช้ข้อมูลโค้ด

เปลี่ยนชื่อตัวอย่าง

1. เปิดแผงข้อมูลโค้ด
2. คลิกขวาที่ชื่อข้อมูลโค้ด แล้วเลือกเปลี่ยนชื่อ

ลบข้อมูลโค้ด

1. เปิดแผงข้อมูลโค้ด
2. คลิกขวาที่ชื่อข้อมูลโค้ด แล้วเลือกนำออก