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

Kayce Basques
Kayce Basques
X GitHub
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 เครื่องมือสำหรับนักพัฒนาเว็บจะอัปเดตหน้าเว็บเพื่อเรียกใช้โค้ดใหม่

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

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

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

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

หากต้องการให้การเปลี่ยนแปลง JavaScript มีผล ให้กด Command+S (Mac) หรือ Control+S (Windows, Linux) เครื่องมือสำหรับนักพัฒนาเว็บจะไม่เรียกใช้สคริปต์อีกครั้ง ดังนั้นการเปลี่ยนแปลง 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);

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

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

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

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

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

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

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

หยุดชั่วคราวที่เบรกพอยท์

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

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

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

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

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

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

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

ตั้งค่า Workspace

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

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