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

Sofia Emelianova
Sofia Emelianova

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

ภาพรวม

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 ทั้งนี้หมายเลขพอร์ตอาจแตกต่างกัน

    หน้าสาธิตที่โฮสต์ในเครื่องซึ่งเปิดใน Chrome

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

  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

    การดู style.css ในเครื่องมือแก้ไขข้อความ

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

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

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

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

    การตั้งค่าคุณสมบัติสีขององค์ประกอบ h1 เป็นสีเขียว

    จุดสีเขียว จุดสีเขียว ถัดจาก 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

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

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

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

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

  • แผนผังของโหนดที่คุณเห็นในแผง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> ยังคงแสดงข้อความใหม่

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

  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 แล้วเลือกแสดงแหล่งที่มาด่วน ที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บจะมีข้อความ แท็บแหล่งที่มาด่วน

    การเปิดแท็บ &quot;แหล่งที่มาด่วน&quot; ผ่านเมนูคำสั่ง

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

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

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

    การเปิดสคริปต์ผ่านกล่องโต้ตอบ &quot;เปิดไฟล์&quot;

  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