ใช้แผงแหล่งที่มาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำสิ่งต่อไปนี้
- ดูไฟล์
- แก้ไข CSS และ JavaScript
- สร้างและบันทึกข้อมูลโค้ดของ JavaScript ซึ่งเรียกใช้ในหน้าเว็บใดก็ได้ ตัวอย่างจะ คล้ายกับบุ๊กมาร์กเล็ต
- แก้ไขข้อบกพร่อง 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
ไปยัง
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 ลงในหน้าเว็บ
ในการเรียกใช้ข้อมูลโค้ด ให้ทำดังนี้
- เปิดไฟล์ในแผงข้อมูลโค้ด แล้วคลิกเรียกใช้
ในแถบการดำเนินการด้านล่าง
- เปิดเมนูคำสั่ง ลบอักขระ
>
พิมพ์!
พิมพ์ชื่อ ข้อมูลโค้ด แล้วกด Enter
ดูข้อมูลเพิ่มเติมที่เรียกใช้ข้อมูลโค้ดจากหน้าเว็บใดๆ
ดีบัก JavaScript
แทนที่จะใช้ console.log()
เพื่ออนุมานตำแหน่งที่ JavaScript ทำงานผิดพลาด ให้พิจารณาใช้
แทนเครื่องมือแก้ไขข้อบกพร่องของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แทน แนวคิดทั่วไปคือการกำหนดเบรกพอยท์ ซึ่งเป็น
ที่ตั้งใจจะหยุดการทำงานของโค้ด แล้วเข้าสู่การทำงานของโค้ด ทีละบรรทัด
ในขณะที่คุณเลื่อนดูโค้ด คุณสามารถดูและเปลี่ยนแปลงค่าต่างๆ ที่กำหนดไว้ในปัจจุบันทั้งหมดได้ พร็อพเพอร์ตี้และตัวแปรต่างๆ ให้เรียกใช้ JavaScript ในคอนโซล และอื่นๆ
โปรดดูเริ่มต้นใช้งานการดีบัก JavaScript เพื่อเรียนรู้พื้นฐานการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บ
โฟกัสที่โค้ดเท่านั้น
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณมุ่งเน้นเฉพาะโค้ดที่คุณเขียน โดยการกรองเสียงรบกวนที่เกิดขึ้นจากเฟรมเวิร์กและสร้างเครื่องมือที่คุณใช้ประโยชน์เมื่อสร้างเว็บแอปพลิเคชัน
เครื่องมือสำหรับนักพัฒนาเว็บจะทำสิ่งต่อไปนี้เพื่อมอบประสบการณ์การแก้ไขข้อบกพร่องของเว็บที่ทันสมัย
- แยกโค้ดที่เขียนขึ้นและโค้ดที่ทำให้ใช้งานได้แล้ว แผงแหล่งที่มาจะแยกโค้ดที่คุณสร้างออกจากโค้ดที่ลดขนาดลงและชุดโค้ด เพื่อช่วยให้คุณค้นหาโค้ดได้เร็วขึ้น
- ไม่สนใจโค้ดของบุคคลที่สามที่รู้จัก:
นอกจากนี้ หากเฟรมเวิร์กรองรับ สแต็กการโทรในโปรแกรมแก้ไขข้อบกพร่องและสแต็กเทรซในคอนโซลจะแสดงประวัติทั้งหมดของการดำเนินการแบบไม่พร้อมกัน
ดูข้อมูลเพิ่มเติมได้ที่
- การแก้ไขข้อบกพร่องเว็บสมัยใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- กรณีศึกษา: การแก้ไขข้อบกพร่อง Angular ที่ดีขึ้นด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
ตั้งค่าพื้นที่ทำงาน
โดยค่าเริ่มต้น เมื่อคุณแก้ไขไฟล์ในแผงแหล่งที่มา การเปลี่ยนแปลงเหล่านั้นจะสูญหายไปเมื่อคุณโหลดซ้ำ หน้าเว็บ พื้นที่ทำงานช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังไฟล์ได้ ระบบ โดยพื้นฐานแล้ว ซึ่งจะช่วยให้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเป็นตัวแก้ไขโค้ดได้
โปรดดูหัวข้อแก้ไขไฟล์ด้วยพื้นที่ทำงานเพื่อเริ่มต้นใช้งาน