บันทึกการเปลี่ยนแปลงที่คุณทำในเครื่องมือสำหรับนักพัฒนาเว็บกลับไปยังไฟล์ต้นฉบับในคอมพิวเตอร์โดยการตั้งค่าพื้นที่ทำงาน คุณสามารถเชื่อมต่อโฟลเดอร์พื้นที่ทำงานกับเครื่องมือสำหรับนักพัฒนาเว็บโดยอัตโนมัติด้วยการแสดงไฟล์การกำหนดค่า หรือจะเพิ่มตำแหน่งพื้นที่ทำงานด้วยตนเองในแผงแหล่งที่มาก็ได้
ภาพรวม
การเชื่อมต่ออัตโนมัติ (หรือด้วยตนเอง) กับโฟลเดอร์พื้นที่ทำงานช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บลงในสำเนาในเครื่องของไฟล์เดียวกันในคอมพิวเตอร์ได้ ตัวอย่างเช่น สมมติว่า
- คุณมีซอร์สโค้ดของเว็บไซต์ในเดสก์ท็อป
- คุณกำลังเรียกใช้เว็บเซิร์ฟเวอร์ในเครื่องจากไดเรกทอรีซอร์สโค้ด เพื่อให้เข้าถึงเว็บไซต์ได้ที่
localhost:PORTและยังแสดงไฟล์ JSON แบบง่ายที่มีข้อมูลเมตา (อธิบายในภายหลัง) ด้วย - คุณเปิด
localhost:PORTใน Google Chrome และใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปลี่ยน CSS ของเว็บไซต์
เมื่อเชื่อมต่อโฟลเดอร์พื้นที่ทำงานแล้ว ระบบจะบันทึกการเปลี่ยนแปลงที่คุณทำในแผงแหล่งที่มาลงในไฟล์ CSS, HTML และ JavaScript ในซอร์สโค้ดบนคอมพิวเตอร์ อย่างไรก็ตาม เครื่องมือสำหรับนักพัฒนาเว็บจะไม่บันทึกการเปลี่ยนแปลง DOM ที่คุณทำในแผงองค์ประกอบ
นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บมักจะจับคู่โค้ดที่เพิ่มประสิทธิภาพกลับไปยังซอร์สโค้ดต้นฉบับได้ด้วยความช่วยเหลือจากแผนที่แหล่งที่มา
สร้างข้อมูลเมตาสำหรับการเชื่อมต่อ
หากต้องการให้เครื่องมือสำหรับนักพัฒนาเว็บค้นพบโฟลเดอร์พื้นที่ทำงานโดยอัตโนมัติ ให้สร้าง UUID เวอร์ชัน 4 แบบสุ่มและใส่ไว้ในไฟล์ JSON ต่อไปนี้
{
"workspace": {
"uuid": "UUID",
"root": "path/to/project/root/folder"
}
}
จากนั้นวางไฟล์ JSON ใน path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json
สุดท้าย ให้เรียกใช้เซิร์ฟเวอร์ HTTP ในเครื่องและตรวจสอบว่าได้แสดงไฟล์ JSON ด้วย
หรือจะข้ามขั้นตอนนี้และตั้งค่าการเชื่อมต่อโฟลเดอร์ด้วยตนเองก็ได้
เชื่อมต่อโฟลเดอร์พื้นที่ทำงาน
วิธีเชื่อมต่อโฟลเดอร์
- ใน Chrome ให้ไปที่หน้าเว็บที่โฮสต์ในเครื่อง (ในตัวอย่างนี้คือ
localhost:8000) แล้วเปิดเครื่องมือสำหรับนักพัฒนาเว็บ ในแหล่งที่มา > Workspace ให้คลิกเชื่อมต่อข้างโฟลเดอร์
เมื่อได้รับข้อความแจ้ง ให้คลิกแก้ไขไฟล์เพื่ออนุญาตให้เครื่องมือสำหรับนักพัฒนาเว็บเข้าถึงโฟลเดอร์ของคุณ
เมื่อเชื่อมต่อแล้ว คุณจะเปิดโฟลเดอร์ได้ในแท็บพื้นที่ทำงาน
แท็บพื้นที่ทำงานจะแสดงจุดสีเขียวข้างไฟล์ HTML, CSS และ JavaScript จุดสีเขียวเหล่านี้หมายความว่าเครื่องมือสำหรับนักพัฒนาเว็บได้สร้างการแมประหว่างทรัพยากรเครือข่ายของหน้าเว็บกับไฟล์ในโฟลเดอร์แล้ว
บันทึกการเปลี่ยนแปลงกลับไปยังโฟลเดอร์ต้นทาง
คุณสามารถบันทึกการเปลี่ยนแปลงในไฟล์ CSS, HTML และ JavaScript ในโฟลเดอร์ Workspace ที่เชื่อมต่อได้
บันทึกการเปลี่ยนแปลงใน CSS
วิธีบันทึกการเปลี่ยนแปลงใน CSS
- เปิดไฟล์ CSS จากโฟลเดอร์พื้นที่ทำงานที่เชื่อมต่อในแหล่งที่มา > พื้นที่ทำงาน
ทำการเปลี่ยนแปลง CSS
บันทึกการเปลี่ยนแปลง เช่น โดยการกด Ctrl / Cmd + S แล้วดูการเปลี่ยนแปลงที่ใช้ในไฟล์ต้นฉบับ แผงแหล่งที่มาจะแสดงจุดสีเขียวข้างชื่อไฟล์
ดูวิดีโอเพื่อเรียนรู้เวิร์กโฟลว์
บันทึกการเปลี่ยนแปลงใน HTML
วิธีบันทึกการเปลี่ยนแปลงใน HTML
- เปิดไฟล์ HTML จากโฟลเดอร์พื้นที่ทำงานที่เชื่อมต่อในแหล่งที่มา > พื้นที่ทำงาน
ทำการเปลี่ยนแปลง HTML
บันทึกการเปลี่ยนแปลง เช่น โดยการกด Ctrl / Cmd + S แล้วดูการเปลี่ยนแปลงที่ใช้ในไฟล์ต้นฉบับ แผงแหล่งที่มาจะแสดงจุดสีเขียวข้างชื่อไฟล์
โหลดหน้านี้ซ้ำเพื่อดูการเปลี่ยนแปลงที่มีผล
ดูวิดีโอเพื่อเรียนรู้เวิร์กโฟลว์
ทำไมคุณจึงเปลี่ยน HTML จากแผงองค์ประกอบไม่ได้
- แผนผังโหนดที่คุณเห็นในแผงองค์ประกอบแสดงถึง DOM ของหน้าเว็บ
- ในการแสดงหน้าเว็บ เบราว์เซอร์จะดึงข้อมูล HTML ผ่านเครือข่าย แยกวิเคราะห์ HTML แล้วแปลงเป็นโครงสร้างต้นไม้ของโหนด DOM
- หากหน้าเว็บมี JavaScript อยู่ JavaScript นั้นอาจเพิ่ม ลบ หรือเปลี่ยนแปลงโหนด DOM CSS ยังเปลี่ยน DOM ได้ด้วยพร็อพเพอร์ตี้
content - ในที่สุดเบราว์เซอร์จะใช้ DOM เพื่อกำหนดเนื้อหาที่ควรแสดงต่อผู้ใช้เบราว์เซอร์
- ดังนั้น สถานะสุดท้ายของหน้าเว็บที่ผู้ใช้เห็นอาจแตกต่างจาก HTML ที่เบราว์เซอร์ดึงข้อมูลมาอย่างมาก
- ซึ่งทำให้ DevTools แก้ไขตำแหน่งที่ควรบันทึกการเปลี่ยนแปลงที่ทำในแผงองค์ประกอบได้ยาก เนื่องจาก DOM ได้รับผลกระทบจาก HTML, JavaScript และ CSS
กล่าวโดยย่อคือ แผนผัง DOM !== HTML
บันทึกการเปลี่ยนแปลงใน JavaScript
วิธีบันทึกการเปลี่ยนแปลงใน JavaScript
- เปิดไฟล์ JavaScript จากโฟลเดอร์พื้นที่ทำงานที่เชื่อมต่อในแหล่งที่มา > พื้นที่ทำงาน
ทำการเปลี่ยนแปลง JavaScript
บันทึกการเปลี่ยนแปลง เช่น โดยการกด Ctrl / Cmd + S แล้วดูการเปลี่ยนแปลงที่ใช้ในไฟล์ต้นฉบับ แผงแหล่งที่มาจะแสดงจุดสีเขียวข้างชื่อไฟล์
หากเซิร์ฟเวอร์ HTTP ในเครื่องคอยตรวจสอบการเปลี่ยนแปลงไฟล์ต้นฉบับแบบเรียลไทม์และโหลดหน้าซ้ำโดยอัตโนมัติ คุณจะเห็นการเปลี่ยนแปลงที่ใช้เมื่อบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ หรือทำให้เซิร์ฟเวอร์ภายในใช้งานได้อีกครั้ง
ดูวิดีโอเพื่อเรียนรู้เวิร์กโฟลว์
นำการเชื่อมต่อโฟลเดอร์พื้นที่ทำงานออก
หากต้องการนำการเชื่อมต่อโฟลเดอร์พื้นที่ทำงานออก ให้ไปที่แหล่งที่มา > พื้นที่ทำงาน คลิกขวาที่โฟลเดอร์ เลือกนำออกจากพื้นที่ทำงานจากเมนูแบบเลื่อนลง แล้วคลิกนำออก
เชื่อมต่อโฟลเดอร์พื้นที่ทำงานด้วยตนเอง
เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่โฮสต์ในเครื่อง
ในแหล่งที่มา > พื้นที่ทำงาน ให้คลิกเพิ่มโฟลเดอร์ด้วยตนเอง จากนั้นเลือกโฟลเดอร์ที่มีไฟล์ต้นฉบับ
จากนั้นทำตามขั้นตอนที่ 3 และ 4 ในหัวข้อเชื่อมต่อโฟลเดอร์พื้นที่ทำงาน
ข้อจำกัด
หากคุณใช้เฟรมเวิร์กสมัยใหม่ เฟรมเวิร์กนั้นอาจแปลงซอร์สโค้ดจากรูปแบบที่ดูแลรักษาได้ง่ายเป็นรูปแบบที่เพิ่มประสิทธิภาพให้ทำงานได้เร็วที่สุด โดยปกติแล้ว การเชื่อมต่อโฟลเดอร์พื้นที่ทำงานจะแมปโค้ดที่เพิ่มประสิทธิภาพกลับไปยังซอร์สโค้ดต้นฉบับได้ด้วยความช่วยเหลือจากแผนที่แหล่งที่มา
ชุมชนเครื่องมือสำหรับนักพัฒนาเว็บทำงานเพื่อรองรับความสามารถที่ได้จากแผนที่แหล่งที่มาในเฟรมเวิร์กและเครื่องมือที่หลากหลาย หากพบปัญหาขณะใช้พื้นที่ทำงานกับเฟรมเวิร์กที่คุณเลือก หรือคุณทำให้พื้นที่ทำงานทำงานได้หลังจากกำหนดค่าเองบางอย่างแล้ว ให้เริ่มชุดข้อความในรายชื่ออีเมลหรือถามคำถามใน Stack Overflow เพื่อแชร์ความรู้กับชุมชน DevTools ที่เหลือ
ขั้นตอนถัดไป
คุณสามารถจัดการโฟลเดอร์ทั้งหมดที่ตั้งค่าไว้แล้วได้ในส่วน
การตั้งค่า > Workspace
ต่อไป ให้ดูวิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปลี่ยน CSS และแก้ไขข้อบกพร่อง JavaScript
ดูเพิ่มเติม
การลบล้างในเครื่องเป็นฟีเจอร์อีกอย่างหนึ่งของเครื่องมือสำหรับนักพัฒนาเว็บที่ค่อนข้างคล้ายกัน ซึ่งช่วยให้คุณจำลองเนื้อหาเว็บหรือส่วนหัวของคำขอได้ วิธีนี้ช่วยให้คุณทดสอบการเปลี่ยนแปลงในหน้าเว็บได้อย่างอิสระโดยไม่ต้องรอให้แบ็กเอนด์ตามทัน เมื่อใช้การลบล้างในเครื่อง การเปลี่ยนแปลงจะยังคงอยู่ตลอดการโหลดหน้าเว็บ แต่จะไม่แมปกับซอร์สโค้ดของหน้าเว็บ