ภาพรวมแผงแหล่งที่มา

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

ใช้แผงแหล่งที่มาเพื่อดูและแก้ไขทรัพยากรของเว็บไซต์ เช่น สไตล์ชีต, ไฟล์ JavaScript และรูปภาพ

ภาพรวม

แผงแหล่งที่มาช่วยให้คุณทำสิ่งต่อไปนี้ได้

เปิดแผงแหล่งที่มา

หากต้องการเปิดแผงแหล่งที่มา ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. เปิดเมนูคำสั่งโดยกดปุ่มต่อไปนี้
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. เริ่มพิมพ์ sources เลือกแสดงแผงแหล่งที่มา แล้วกด Enter

หรือเลือก more_vert ที่มุมขวาบน ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > แหล่งที่มา

ดูไฟล์

คลิกแท็บหน้าเพื่อดูทรัพยากรทั้งหมดที่หน้าดังกล่าวโหลดไว้

แท็บหน้าเว็บ

วิธีจัดระเบียบแท็บหน้า

  • ระดับบนสุด เช่น top บนภาพหน้าจอด้านบน จะแสดงถึงเฟรม HTML คุณจะเห็น top ในทุกหน้าที่เข้าชม top แสดงเฟรมเอกสารหลัก
  • ส่วนระดับที่ 2 เช่น developers.google.com ในภาพหน้าจอด้านบนแสดงถึงต้นทาง
  • ส่วนระดับที่ 3, 4 และอื่นๆ จะแสดงไดเรกทอรีและทรัพยากรที่โหลดจากต้นทางนั้น ตัวอย่างเช่น ในภาพหน้าจอด้านบน เส้นทางแบบเต็มไปยังทรัพยากร devsite-googler-button คือ developers.google.com/_static/19aa27122b/css/devsite-googler-button

คลิกไฟล์ในแท็บหน้าเว็บเพื่อดูเนื้อหาในแท็บเครื่องมือแก้ไข คุณสามารถดูไฟล์ประเภทใดก็ได้ สำหรับรูปภาพ คุณจะเห็นตัวอย่างรูปภาพ

ดูไฟล์ในแท็บเครื่องมือแก้ไข

แก้ไข CSS และ JavaScript

คลิกแท็บตัวแก้ไขเพื่อแก้ไข CSS และ JavaScript เครื่องมือสำหรับนักพัฒนาเว็บจะอัปเดตหน้าเว็บเพื่อเรียกใช้โค้ดใหม่

เครื่องมือแก้ไขยังช่วยแก้ไขข้อบกพร่องได้ด้วย เช่น ขีดเส้นใต้และแสดงเคล็ดลับเครื่องมือข้อผิดพลาดในบรรทัดถัดจากข้อผิดพลาดทางไวยากรณ์และปัญหาอื่นๆ เช่น คำสั่ง @import และ url() ของ CSS ที่ไม่สำเร็จ และแอตทริบิวต์ href ของ HTML ที่มี URL ไม่ถูกต้อง

เคล็ดลับเครื่องมือข้อผิดพลาดทางไวยากรณ์แบบอินไลน์

หากแก้ไข background-color ขององค์ประกอบ การเปลี่ยนแปลงจะมีผลทันที

การแก้ไข CSS ในแท็บเครื่องมือแก้ไข

หากต้องการให้การเปลี่ยนแปลงของ JavaScript มีผล ให้กด Command+S (Mac) หรือ Control+S (Windows, Linux) เครื่องมือสำหรับนักพัฒนาเว็บจะไม่เรียกใช้สคริปต์ซ้ำ ดังนั้นการเปลี่ยนแปลง JavaScript เพียงอย่างเดียวที่จะมีผลจึงเป็นการเปลี่ยนแปลงที่คุณดำเนินการภายในฟังก์ชัน ตัวอย่างเช่น โปรดสังเกตว่า console.log('A') ไม่ทํางาน แต่ console.log('B') ทํางาน

การแก้ไข JavaScript ในแท็บเครื่องมือแก้ไข

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

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

สร้าง บันทึก และเรียกใช้ข้อมูลโค้ด

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

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

แต่จะบันทึกโค้ดนี้ในข้อมูลโค้ด และเรียกใช้ด้วยการคลิกปุ่มเพียงไม่กี่ครั้งได้ทุกเมื่อที่ต้องการ DevTools จะบันทึกข้อมูลโค้ดลงในระบบไฟล์ ตัวอย่างเช่น ตรวจสอบข้อมูลโค้ดที่แทรกไลบรารี jQuery ลงในหน้าเว็บ

ข้อมูลโค้ดที่แทรกไลบรารี jQuery ลงในหน้าเว็บ

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

  • เปิดไฟล์ในแท็บข้อมูลโค้ด แล้วคลิกเรียกใช้ ปุ่มเรียกใช้ ในแถบการดำเนินการด้านล่าง
  • เปิดเมนูคำสั่ง ลบอักขระ > พิมพ์ ! พิมพ์ชื่อข้อมูลโค้ด แล้วกด Enter

ดูข้อมูลเพิ่มเติมที่เรียกใช้ข้อมูลโค้ดจากหน้าเว็บใดๆ

แก้ไขข้อบกพร่องของ JavaScript

แทนที่จะใช้ console.log() เพื่ออนุมานว่า JavaScript ทำงานผิดพลาดตรงไหน ให้ลองใช้เครื่องมือแก้ไขข้อบกพร่องของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แทน แนวคิดทั่วไปคือการตั้งค่าเบรกพอยท์ ซึ่งเป็นการหยุดโค้ดโดยเจตนา แล้วทำขั้นตอนการใช้งานโค้ดทีละบรรทัด

กำลังหยุดอยู่ที่จุดพักชั่วคราว

โดยคุณจะดูและเปลี่ยนแปลงค่าของพร็อพเพอร์ตี้และตัวแปรที่กําหนดไว้ทั้งหมดในปัจจุบัน เรียกใช้ JavaScript ในคอนโซล และอื่นๆ ได้ขณะเลื่อนดูโค้ด

ดูเริ่มต้นการแก้ไขข้อบกพร่อง JavaScript เพื่อเรียนรู้พื้นฐานเกี่ยวกับการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บ

มุ่งเน้นที่โค้ดของคุณเท่านั้น

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณมุ่งเน้นเฉพาะโค้ดที่คุณเขียน โดยการกรองเสียงรบกวนที่เกิดขึ้นจากเฟรมเวิร์กและสร้างเครื่องมือที่คุณใช้ประโยชน์เมื่อสร้างเว็บแอปพลิเคชัน

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะทําสิ่งต่อไปนี้เพื่อให้คุณได้รับประสบการณ์การแก้ไขข้อบกพร่องเว็บที่ทันสมัย

นอกจากนี้ หากเฟรมเวิร์กรองรับ สแต็กการโทรในโปรแกรมแก้ไขข้อบกพร่องและสแต็กเทรซในคอนโซลจะแสดงประวัติทั้งหมดของการดำเนินการแบบไม่พร้อมกัน

ดูข้อมูลเพิ่มเติมได้ที่

ตั้งค่า Workspace

โดยค่าเริ่มต้น เมื่อคุณแก้ไขไฟล์ในแผงแหล่งที่มา การเปลี่ยนแปลงเหล่านั้นจะสูญหายไปเมื่อคุณโหลดหน้าเว็บซ้ำ พื้นที่ทํางานช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บลงในระบบไฟล์ได้ โดยพื้นฐานแล้ว การดำเนินการนี้จะช่วยให้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเป็นเครื่องมือแก้ไขโค้ดได้

โปรดดูหัวข้อแก้ไขไฟล์ด้วยพื้นที่ทำงานเพื่อเริ่มต้นใช้งาน