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

Kayce Basques

Sofia Emelianova

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

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

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

ภาพรวม

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

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

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

ข้อจำกัด

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

ชุมชนเครื่องมือสำหรับนักพัฒนาเว็บทำงานเพื่อสนับสนุนความสามารถที่ได้จากการแมปแหล่งที่มาในเฟรมเวิร์กและเครื่องมือที่หลากหลาย หากพบปัญหาขณะใช้พื้นที่ทำงานตามเฟรมเวิร์กที่คุณต้องการ หรือใช้งานได้จริง หลังจากกำหนดค่าที่กำหนดเองบางอย่างแล้ว ให้เริ่มชุดข้อความในรายชื่ออีเมลหรือถามคำถาม ใน 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. กลับไปที่เครื่องมือสำหรับนักพัฒนาเว็บ คลิกแท็บElements

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. เปิดแท็บElements

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

   

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

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

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

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

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

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

เปลี่ยน 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 ด้วย แต่บางครั้งคุณต้อง เข้าถึงแผงอื่นๆ เช่น แผงElementsหรือแผงElementsขณะทำการเปลี่ยนแปลง เว็บไซต์ของคุณ คุณสามารถเปิดแผงแหล่งที่มาควบคู่ไปกับแผงอื่นๆ ได้

1. เปิดแท็บElements
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