แก้ไขและบันทึกไฟล์ในพื้นที่ทำงาน

Kayce Basques

Sofia Emelianova

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

ข้อควรระวัง: ก่อนเริ่มบทแนะนำนี้ คุณควรทราบวิธีทำสิ่งต่อไปนี้

• ใช้ HTML, CSS และ JavaScript เพื่อสร้างหน้าเว็บ
• ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อทำการเปลี่ยนแปลงพื้นฐานใน CSS
• เรียกใช้เว็บเซิร์ฟเวอร์ HTTP ในเครื่อง

ภาพรวม

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

• คุณมีซอร์สโค้ดของเว็บไซต์บนเดสก์ท็อป
• คุณกำลังเรียกใช้เว็บเซิร์ฟเวอร์ภายในจากไดเรกทอรีซอร์สโค้ดเพื่อให้เข้าถึงเว็บไซต์ได้ที่ localhost:8080
• คุณเปิด localhost:8080 ใน Google Chrome และคุณกำลังใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปลี่ยน CSS ของเว็บไซต์

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

ข้อจำกัด

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

ชุมชนเครื่องมือสำหรับนักพัฒนาเว็บทำงานเพื่อสนับสนุนความสามารถที่ได้จากการแมปแหล่งที่มาในเฟรมเวิร์กและเครื่องมือที่หลากหลาย หากพบปัญหาขณะใช้เวิร์กスペースกับเฟรมเวิร์กที่ต้องการ หรือทำให้เวิร์กスペースทำงานได้หลังจากการกําหนดค่าที่กำหนดเอง โปรดเริ่มชุดข้อความในรายชื่ออีเมลหรือถามคําถามใน Stack Overflow เพื่อแชร์ความรู้กับชุมชน DevTools คนอื่นๆ

ฟีเจอร์ที่เกี่ยวข้อง: การลบล้างในเครื่อง

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

ขั้นตอนที่ 1: ตั้งค่า

ทำตามบทแนะนำนี้เพื่อสัมผัสประสบการณ์จริงในการใช้พื้นที่ทำงาน

ตั้งค่าการสาธิต

1. โคลนที่เก็บสาธิตนี้ไปยังไดเรกทอรีบางรายการในคอมพิวเตอร์ เช่น ~/Desktop

2. เริ่มเซิร์ฟเวอร์เว็บในเครื่องใน ~/Desktop/devtools-workspace-demo ด้านล่างคือโค้ดตัวอย่างสำหรับการเริ่มต้น SimpleHTTPServer แต่คุณสามารถใช้เซิร์ฟเวอร์ใดก็ได้ที่ต้องการ

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   เราจะเรียกไดเรกทอรีนี้ว่า /devtools-workspace-demo ตลอดบทแนะนำนี้

3. เปิดแท็บใน Google Chrome แล้วไปที่เว็บไซต์เวอร์ชันที่โฮสต์ในเครื่อง คุณควรเข้าถึงได้ผ่าน URL เช่น localhost:8000 ทั้งนี้หมายเลขพอร์ตอาจแตกต่างกัน

   

ตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าการสาธิตที่โฮสต์ในเครื่อง

2. ไปที่แหล่งที่มา > พื้นที่ทํางาน และตั้งค่าพื้นที่ทํางานในโฟลเดอร์ devtools-workspace-demo ที่คุณโคลน ซึ่งทำได้หลายวิธี ดังนี้

   • ลากและวางโฟลเดอร์ลงในเครื่องมือแก้ไขในแหล่งที่มา
   • คลิกลิงก์เลือกโฟลเดอร์ แล้วเลือกโฟลเดอร์
   • คลิก เพิ่มโฟลเดอร์ แล้วเลือกโฟลเดอร์

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

   

ในแท็บพื้นที่ทำงาน ตอนนี้คุณจะเห็นจุดสีเขียวข้าง index.html, script.js และ styles.css จุดสีเขียวเหล่านี้หมายความว่าเครื่องมือสำหรับนักพัฒนาเว็บสร้างการแมประหว่างทรัพยากรเครือข่ายของหน้านั้นกับไฟล์ใน devtools-workspace-demo

ขั้นตอนที่ 2: บันทึกการเปลี่ยนแปลง CSS ลงในดิสก์

1. เปิด /devtools-workspace-demo/styles.css ในโปรแกรมแก้ไขข้อความ โปรดสังเกตว่ามีการตั้งค่าพร็อพเพอร์ตี้ color ขององค์ประกอบ h1 เป็น fuchsia

   

2. ปิดเครื่องมือแก้ไขข้อความ

3. กลับไปที่เครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิกแท็บองค์ประกอบ

4. เปลี่ยนค่าของพร็อพเพอร์ตี้ color ขององค์ประกอบ <h1> เป็นสีที่คุณชอบ โดยทำดังนี้

   1. คลิกองค์ประกอบ <h1> ในแผนผัง DOM
   2. ในแผงสไตล์ ให้ค้นหากฎ CSS h1 { color: fuchsia } แล้วเปลี่ยนสีเป็นสีที่ชอบ ในตัวอย่างนี้กำหนดสีเป็นสีเขียว

   

   จุดสีเขียว ถัดจาก styles.css:1 ในแผงรูปแบบหมายความว่าการเปลี่ยนแปลงใดๆ ที่คุณทำจะจับคู่กับ /devtools-workspace-demo/styles.css

5. เปิด /devtools-workspace-demo/styles.css ในเครื่องมือแก้ไขข้อความอีกครั้ง ตอนนี้พร็อพเพอร์ตี้ color ได้รับการตั้งค่าเป็นสีที่คุณชอบแล้ว

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

ขั้นตอนที่ 3: บันทึกการเปลี่ยนแปลง HTML ลงในดิสก์

ลองเปลี่ยน HTML จากแผงองค์ประกอบ

คำเตือน: เวิร์กโฟลว์ที่คุณกำลังจะลองไม่ทำงาน ตอนนี้คุณกำลังลองใช้ฟีเจอร์นี้อยู่ จะได้ไม่ต้องเสียเวลามานั่งหาสาเหตุที่ไม่ได้ผล

1. เปิดแท็บองค์ประกอบ

2. ดับเบิลคลิกเนื้อหาข้อความขององค์ประกอบ h1 ที่ระบุว่า Workspaces Demo แล้วแทนที่ด้วย I ❤️ Cake

   

3. เปิด /devtools-workspace-demo/index.html ในเครื่องมือแก้ไขข้อความ การเปลี่ยนแปลงที่คุณเพิ่งทำไม่ปรากฏ

4. โหลดหน้าเว็บซ้ำ หน้าเว็บจะเปลี่ยนกลับไปใช้ชื่อเดิม

ไม่บังคับ: สาเหตุที่ใช้งานไม่ได้

หมายเหตุ: ส่วนนี้จะอธิบายสาเหตุที่เวิร์กโฟลว์จากลองเปลี่ยน HTML จากแผงองค์ประกอบใช้งานไม่ได้ ข้ามส่วนนี้ได้หากไม่สนใจสาเหตุ

• ต้นไม้ของโหนดที่คุณเห็นในแผงองค์ประกอบแสดงถึง DOM ของหน้า
• ในการแสดงหน้าเว็บ เบราว์เซอร์จะดึง HTML ผ่านเครือข่าย แยกวิเคราะห์ HTML แล้วแปลงเป็นแผนผังของโหนด DOM
• หากหน้าเว็บมี JavaScript ใดๆ อยู่ JavaScript นั้นอาจเพิ่ม ลบ หรือเปลี่ยนแปลงโหนด DOM CSS เปลี่ยน DOM ได้เช่นกันผ่านพร็อพเพอร์ตี้ content
• ในท้ายที่สุดเบราว์เซอร์จะใช้ DOM เพื่อกำหนดว่าเนื้อหาใดควรแสดงต่อผู้ใช้เบราว์เซอร์
• ดังนั้น สถานะสุดท้ายของหน้าเว็บที่ผู้ใช้เห็นอาจแตกต่างจาก HTML ที่เบราว์เซอร์ดึงข้อมูลมาอย่างมาก
• ซึ่งทำให้ DevTools แก้ปัญหาว่าควรบันทึกการเปลี่ยนแปลงที่ทำในแผงองค์ประกอบไว้ที่ใดได้ยาก เนื่องจาก DOM ได้รับผลกระทบจาก HTML, JavaScript และ CSS

กล่าวโดยย่อคือ แผนผัง DOM !== HTML

เปลี่ยน HTML จากแผงแหล่งที่มา

หากต้องการบันทึกการเปลี่ยนแปลง HTML ของหน้าเว็บ ให้ทำในแผงแหล่งที่มา

1. ไปที่แหล่งที่มา > หน้าเว็บ
2. คลิก (index) HTML ของหน้าเว็บจะเปิดขึ้น
3. แทนที่ <h1>Workspaces Demo</h1> ด้วย <h1>I ❤️ Cake</h1>
4. กด Command+S (Mac) หรือ Control+S (Windows, Linux, ChromeOS) เพื่อบันทึกการเปลี่ยนแปลง

5. โหลดหน้านี้ซ้ำ องค์ประกอบ <h1> ยังคงแสดงข้อความใหม่

   

6. เปิด /devtools-workspace-demo/index.html องค์ประกอบ <h1> มีข้อความใหม่

ขั้นตอนที่ 4: บันทึกการเปลี่ยนแปลง JavaScript ลงในดิสก์

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

1. เปิดแท็บองค์ประกอบ
2. กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เมนูคำสั่งจะเปิดขึ้น

3. พิมพ์ QS แล้วเลือกแสดงแหล่งที่มาด่วน ที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บจะมีแท็บแหล่งที่มาด่วน

   

   แท็บแสดงเนื้อหาของ index.html ซึ่งเป็นไฟล์ล่าสุดที่คุณแก้ไขในแผงแหล่งที่มา แท็บแหล่งที่มาด่วนมีเครื่องมือแก้ไขจากแผงแหล่งที่มา เพื่อให้คุณแก้ไขไฟล์ในขณะที่เปิดแผงอื่นๆ ได้

4. กด Command+P (Mac) หรือ Control+P (Windows, Linux, ChromeOS) เพื่อเปิดกล่องโต้ตอบเปิดไฟล์

5. พิมพ์ script แล้วเลือก devtools-workspace-demo/script.js

   

6. สังเกตลิงก์ Edit and save files in a workspace ในการสาธิต มีการจัดแต่งเป็นประจำ

7. เพิ่มโค้ดต่อไปนี้ลงท้าย script.js ในแท็บแหล่งที่มาด่วน

   document.querySelector('a').style = 'font-style:italic';
   

8. กด Command+S (Mac) หรือ Control+S (Windows, Linux, ChromeOS) เพื่อบันทึกการเปลี่ยนแปลง

9. โหลดหน้าเว็บซ้ำ ลิงก์ในหน้าเว็บเป็นแบบตัวเอียงแล้ว

ขั้นตอนถัดไป

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

คุณตั้งค่าโฟลเดอร์หลายโฟลเดอร์ในพื้นที่ทำงานได้ โฟลเดอร์ดังกล่าวทั้งหมดจะแสดงอยู่ใน การตั้งค่า > Workspace

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