ใช้แผงแหล่งที่มาของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เพื่อทําสิ่งต่อไปนี้
- ดูไฟล์
- แก้ไข CSS และ JavaScript
- สร้างและบันทึกข้อมูลโค้ดของ JavaScript ซึ่งคุณสามารถเรียกใช้ในหน้าใดก็ได้ ตัวอย่างข้อมูลจะคล้ายกับ bookmarklet
- แก้ไขข้อบกพร่อง JavaScript
- ตั้งค่าพื้นที่ทำงานเพื่อบันทึกการเปลี่ยนแปลงที่คุณทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังโค้ดในระบบไฟล์
ดูไฟล์
ใช้แผงหน้าเพื่อดูทรัพยากรทั้งหมดที่หน้าดังกล่าวโหลดขึ้น
วิธีจัดระเบียบแผงหน้า
- ระดับบนสุด เช่น
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
ขององค์ประกอบ คุณจะเห็นว่าการเปลี่ยนแปลงมีผลทันที
หากต้องการให้การเปลี่ยนแปลง JavaScript มีผล ให้กด Command+S (Mac) หรือ Control+S (Windows, Linux) เครื่องมือสำหรับนักพัฒนาเว็บจะไม่เรียกใช้สคริปต์ซ้ำ ดังนั้นการเปลี่ยนแปลง JavaScript เดียวที่จะมีผลคือการเปลี่ยนแปลงที่คุณทำภายในฟังก์ชัน ตัวอย่างเช่น บันทึกวิธีที่ console.log('A')
ไม่ทำงาน ในขณะที่ console.log('B')
ทำงาน
หากเครื่องมือสำหรับนักพัฒนาเว็บเรียกใช้สคริปต์ทั้งหมดอีกครั้งหลังจากทำการเปลี่ยนแปลง ระบบจะบันทึกข้อความ 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 ในหน้าเว็บ
วิธีเรียกใช้ข้อมูลโค้ด
- เปิดไฟล์ในแผงตัวอย่างข้อมูล แล้วคลิกเรียกใช้ ในแถบการดำเนินการด้านล่าง
- เปิดเมนูคำสั่ง ลบอักขระ
>
พิมพ์!
พิมพ์ชื่อของข้อมูลโค้ด แล้วกด Enter
ดูเรียกใช้ข้อมูลโค้ดจากหน้าใดก็ได้เพื่อเรียนรู้เพิ่มเติม
ดีบัก JavaScript
แทนที่จะใช้ console.log()
เพื่ออนุมานว่า JavaScript ของคุณผิดพลาดตรงไหน ให้พิจารณาใช้เครื่องมือแก้ไขข้อบกพร่องของ Chrome DevTools แทน แนวคิดทั่วไปคือการกำหนดเบรกพอยท์ ซึ่งเป็นจุดที่ตั้งใจสิ้นสุดในโค้ด จากนั้นทำตามขั้นตอนการดำเนินการของโค้ดทีละบรรทัด
ขณะดูโค้ด คุณจะดูและเปลี่ยนค่าของพร็อพเพอร์ตี้และตัวแปรที่กําหนดไว้ทั้งหมด เรียกใช้ JavaScript ในคอนโซล และอื่นๆ ได้
โปรดดูเริ่มต้นใช้งาน JavaScript ในการดีบัก เพื่อเรียนรู้พื้นฐานการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บ
โฟกัสที่โค้ดเท่านั้น
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณโฟกัสที่โค้ดที่คุณเขียนเท่านั้นโดยการกรองเสียงรบกวนที่เกิดจากเฟรมเวิร์กและสร้างเครื่องมือที่คุณใช้ประโยชน์จากเมื่อสร้างเว็บแอปพลิเคชัน
เครื่องมือสำหรับนักพัฒนาเว็บจะมอบประสบการณ์การแก้ไขข้อบกพร่องเว็บที่ทันสมัยให้คุณทำสิ่งต่อไปนี้
- แยกโค้ดที่เขียนแล้วและโค้ดที่ทำให้ใช้งานได้แล้ว เพื่อช่วยให้คุณพบโค้ดได้เร็วขึ้น แผงแหล่งที่มาจะแยกโค้ดที่คุณสร้างขึ้นออกจากโค้ดที่จัดกลุ่มและลดขนาด
- ไม่สนใจโค้ดที่รู้จักของบุคคลที่สาม
นอกจากนี้ หากเฟรมเวิร์กรองรับ กลุ่มการเรียกใช้ในโปรแกรมแก้ไขข้อบกพร่องและสแต็กเทรซในคอนโซลจะแสดงประวัติทั้งหมดของการดำเนินการแบบอะซิงโครนัส
ดูข้อมูลเพิ่มเติมได้จากหัวข้อต่อไปนี้
- การแก้ไขข้อบกพร่องของเว็บสมัยใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- กรณีศึกษา: การแก้ไขข้อบกพร่อง Angular ที่ดียิ่งขึ้นด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
ตั้งค่าพื้นที่ทำงาน
โดยค่าเริ่มต้น เมื่อคุณแก้ไขไฟล์ในแผงแหล่งที่มา การเปลี่ยนแปลงเหล่านั้นจะหายไปเมื่อคุณโหลดหน้าเว็บซ้ำ พื้นที่ทำงานช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังระบบไฟล์ได้ โดยพื้นฐานแล้ว วิธีนี้จะช่วยให้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเป็นเครื่องมือแก้ไขโค้ดได้
โปรดดูหัวข้อแก้ไขไฟล์ด้วยพื้นที่ทำงานเพื่อเริ่มต้นใช้งาน