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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

ใช้แผงแหล่งที่มาของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เพื่อทําสิ่งต่อไปนี้

ดูไฟล์

ใช้แผงหน้าเพื่อดูทรัพยากรทั้งหมดที่หน้าดังกล่าวโหลดขึ้น

แผงหน้า

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

  • ระดับบนสุด เช่น 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 ไปยังคอนโซล

เครื่องมือสำหรับนักพัฒนาเว็บจะลบการเปลี่ยนแปลงใน 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);

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

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

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

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

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

ดีบัก JavaScript

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

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

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

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

โฟกัสที่โค้ดเท่านั้น

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

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

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

ดูข้อมูลเพิ่มเติมได้จากหัวข้อต่อไปนี้

ตั้งค่าพื้นที่ทำงาน

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

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