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

Kayce Basques

Sofia Emelianova

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

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

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

ภาพรวม

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

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

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

ข้อจำกัด

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

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

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

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

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

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