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

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 ไปยัง Console

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

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

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

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

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

ดีบัก JavaScript

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

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

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

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

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

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

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

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

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

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

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

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