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

Sofia Emelianova
Sofia Emelianova

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

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

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

หน้าแรกของเอกสารประกอบของเครื่องมือสำหรับนักพัฒนาเว็บก่อนเรียกใช้ข้อมูลโค้ด มีการไฮไลต์ปุ่มเรียกใช้

นี่คือซอร์สโค้ดของข้อมูลโค้ดที่บันทึกข้อความบางส่วนและแทนที่เนื้อหา 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! ว่าข้อมูลโค้ดบันทึกและเนื้อหาในหน้ามีการเปลี่ยนแปลง

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

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

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

  1. ไปที่แหล่งที่มา &gt; แท็บเพิ่มเติม &gt; ข้อมูลโค้ด

    เมนูแท็บเพิ่มเติมในแผงแหล่งที่มา

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

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

    เลือก &quot;แสดงตัวอย่างข้อมูล&quot; จากเมนูคำสั่ง

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

แผงข้อมูลโค้ดที่ว่างเปล่า

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

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

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

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

  1. เปิดแผงข้อมูลโค้ด
  2. คลิก ข้อมูลโค้ดใหม่ ข้อมูลโค้ดใหม่
  3. ป้อนชื่อของข้อมูลโค้ดและกด Enter เพื่อบันทึก

    การตั้งชื่อข้อมูลโค้ด

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

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

    เลือก &quot;สร้างข้อมูลโค้ดใหม่&quot; จากเมนูคำสั่ง

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

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

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

    ข้อมูลโค้ดเปิดขึ้นในตัวแก้ไขโค้ด

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

    เครื่องหมายดอกจันข้างชื่อข้อมูลโค้ดซึ่งระบุโค้ดที่ไม่ได้บันทึก

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

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

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

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

  1. เปิดแผงข้อมูลโค้ด
  2. คลิกชื่อของข้อมูลโค้ดที่คุณต้องการเรียกใช้ แผงแหล่งที่มาจะเปิดขึ้นในตัวแก้ไขโค้ด
  3. คลิก Run เรียกใช้ในแถบการดำเนินการที่ด้านล่างของเครื่องมือแก้ไข หรือกด Control+Enter (Windows/Linux) หรือ Command+Enter (Mac)

    ปุ่มเรียกใช้

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

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

    การเรียกใช้ข้อมูลโค้ดจากเมนูเปิด

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

เปลี่ยนชื่อตัวอย่างข้อมูล

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

ลบตัวอย่าง

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