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

Kayce Basques

Sofia Emelianova

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

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

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

ภาพรวม

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

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

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

ข้อจำกัด

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

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

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

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

ขั้นตอนที่ 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 Tree
   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 ที่เบราว์เซอร์ดึงข้อมูลมาอย่างมาก
• ซึ่งทำให้เครื่องมือสำหรับนักพัฒนาเว็บแก้ไขตำแหน่งที่ควรบันทึกการเปลี่ยนแปลงที่ทำในแผงองค์ประกอบได้ยาก เนื่องจาก DOM ได้รับผลกระทบจาก HTML, JavaScript และ CSS

กล่าวโดยย่อคือ HTML DOM Tree !==

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

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

1. ไปที่แหล่งที่มา > หน้า
2. คลิก (ดัชนี) 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. โหลดหน้านี้ซ้ำ ตอนนี้ลิงก์บนหน้าเว็บตัวเอียง

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

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

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

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