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

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) DevTools จะไม่เรียกใช้สคริปต์ซ้ำ ดังนั้นการเปลี่ยนแปลง JavaScript เพียงอย่างเดียวที่มีผลคือการเปลี่ยนแปลงที่คุณทำภายในฟังก์ชัน ตัวอย่างเช่น โปรดสังเกตว่า console.log('A') ไม่ทํางาน แต่ console.log('B') ทํางาน

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

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

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

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

ข้อมูลโค้ดคือสคริปต์ที่คุณเรียกใช้ได้ในทุกหน้า สมมติว่าคุณพิมพ์โค้ดต่อไปนี้ในคอนโซลซ้ำๆ เพื่อแทรกไลบรารี 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);

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

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

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

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

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

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

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

หยุดชั่วคราวที่จุดพัก

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

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

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

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

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

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

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

ตั้งค่า Workspace

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

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