บทแนะนำนี้ให้โอกาสในการฝึกหัดด้วยการตั้งค่าพื้นที่ทำงานเพื่อให้คุณใช้ในโปรเจ็กต์ของตัวเองได้ Workspace ช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำ ภายในเครื่องมือสำหรับนักพัฒนาเว็บไปยังซอร์สโค้ดที่จัดเก็บไว้ในคอมพิวเตอร์ของคุณ
ภาพรวม
Workspace ช่วยให้คุณบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังสำเนาไฟล์เดียวกันในเครื่องคอมพิวเตอร์ของคุณได้ ตัวอย่างเช่น สมมติว่า
- คุณมีซอร์สโค้ดของเว็บไซต์บนเดสก์ท็อป
- คุณกำลังเรียกใช้เว็บเซิร์ฟเวอร์ภายในจากไดเรกทอรีซอร์สโค้ดเพื่อให้เข้าถึงเว็บไซต์ได้ที่
localhost:8080
- คุณเปิด
localhost:8080
ใน Google Chrome และใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปลี่ยน CSS ของเว็บไซต์
เมื่อเปิดใช้พื้นที่ทำงาน ระบบจะบันทึกการเปลี่ยนแปลง CSS ที่คุณทำภายในเครื่องมือสำหรับนักพัฒนาเว็บไปยังซอร์สโค้ดบนเดสก์ท็อป
ข้อจำกัด
หากคุณใช้เฟรมเวิร์กสมัยใหม่ อาจมีการแปลงซอร์สโค้ดของคุณ จากรูปแบบที่คุณดูแลรักษาให้เป็นรูปแบบที่สามารถเพิ่มประสิทธิภาพเพื่อให้เรียกใช้ได้เร็วที่สุด โดยปกติแล้ว Workspace สามารถแมปโค้ดที่เพิ่มประสิทธิภาพกลับไปยังซอร์สโค้ดต้นฉบับได้โดยใช้แผนที่แหล่งที่มา
ชุมชนเครื่องมือสำหรับนักพัฒนาเว็บทำงานเพื่อสนับสนุนความสามารถของการแมปแหล่งที่มาผ่านเฟรมเวิร์กและเครื่องมือที่หลากหลาย หากพบปัญหาขณะใช้พื้นที่ทำงานกับเฟรมเวิร์กที่ต้องการ หรือใช้งานได้หลังจากกำหนดค่าที่กำหนดเองบางส่วน ให้เริ่มชุดข้อความในรายชื่ออีเมลหรือถามคำถามใน Stack Overflow เพื่อแชร์ความรู้กับสมาชิกอื่นๆ ในชุมชนเครื่องมือสำหรับนักพัฒนาเว็บ
ฟีเจอร์ที่เกี่ยวข้อง: การลบล้างในเครื่อง
การลบล้างในเครื่องเป็นอีกฟีเจอร์หนึ่งของเครื่องมือสำหรับนักพัฒนาเว็บที่คล้ายกับพื้นที่ทำงาน ใช้การลบล้างในเครื่องเพื่อจำลองเนื้อหาเว็บหรือส่วนหัวของคำขอโดยไม่ต้องรอการเปลี่ยนแปลงแบ็กเอนด์หรือเมื่อต้องการทดสอบการเปลี่ยนแปลงในหน้าเว็บ และคุณต้องเห็นการเปลี่ยนแปลงเหล่านั้นในการโหลดหน้า แต่ไม่สนใจการแมปการเปลี่ยนแปลงกับซอร์สโค้ดของหน้า
ขั้นตอนที่ 1: การตั้งค่า
ศึกษาบทแนะนำนี้ให้จบเพื่อรับประสบการณ์การใช้งานพื้นที่ทำงานจริง
ตั้งค่าการสาธิต
- โคลนที่เก็บการสาธิตนี้ไปยังไดเรกทอรีบางรายการในคอมพิวเตอร์ของคุณ เช่น ไปที่
~/Desktop
เริ่มเว็บเซิร์ฟเวอร์ภายในใน
~/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
เปิดแท็บใน Google Chrome และไปที่เว็บไซต์เวอร์ชันที่โฮสต์ในเครื่อง คุณควรสามารถเข้าถึงได้ ผ่าน URL เช่น
localhost:8000
ทั้งนี้หมายเลขพอร์ตที่แน่นอนอาจแตกต่างออกไป
ตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตที่โฮสต์ในเครื่อง
ไปที่แหล่งที่มา > พื้นที่ทำงาน และตั้งค่าพื้นที่ทำงานในโฟลเดอร์
devtools-workspace-demo
ที่คุณโคลน ซึ่งทำได้หลายวิธี ดังนี้- ลากและวางโฟลเดอร์ลงในเครื่องมือแก้ไขในแหล่งที่มา
- คลิกลิงก์เลือกโฟลเดอร์ และเลือกโฟลเดอร์
- คลิก เพิ่มโฟลเดอร์และเลือกโฟลเดอร์
คลิกอนุญาตในข้อความแจ้งด้านบนเพื่อให้สิทธิ์เครื่องมือสำหรับนักพัฒนาเว็บในการอ่านและเขียนในไดเรกทอรี
ตอนนี้ในแท็บพื้นที่ทำงานจะมีจุดสีเขียวอยู่ข้าง index.html
, script.js
และ styles.css
จุดสีเขียวเหล่านี้หมายความว่าเครื่องมือสำหรับนักพัฒนาเว็บได้สร้างการแมประหว่างทรัพยากรเครือข่ายของหน้านั้นกับไฟล์ใน devtools-workspace-demo
ขั้นตอนที่ 2: บันทึกการเปลี่ยนแปลง CSS ลงในดิสก์
เปิด
/devtools-workspace-demo/styles.css
ในเครื่องมือแก้ไขข้อความ สังเกตวิธีการตั้งค่าพร็อพเพอร์ตี้color
ขององค์ประกอบh1
เป็นfuchsia
ปิดเครื่องมือแก้ไขข้อความ
กลับไปที่เครื่องมือสำหรับนักพัฒนาเว็บ คลิกแท็บองค์ประกอบ
เปลี่ยนค่าพร็อพเพอร์ตี้
color
ขององค์ประกอบ<h1>
เป็นสีที่ชอบ โดยทำตามวิธีต่อไปนี้- คลิกองค์ประกอบ
<h1>
ใน DOM Tree - ในแผงรูปแบบ ให้หากฎ CSS
h1 { color: fuchsia }
แล้วเปลี่ยนสีเป็นสีที่คุณชื่นชอบ โดยในตัวอย่างนี้ สีจะตั้งค่าเป็นสีเขียว
จุดสีเขียว ข้าง
styles.css:1
ในแผงรูปแบบหมายความว่าการเปลี่ยนแปลงที่คุณทำจะจับคู่กับ/devtools-workspace-demo/styles.css
- คลิกองค์ประกอบ
เปิด
/devtools-workspace-demo/styles.css
ในเครื่องมือแก้ไขข้อความอีกครั้ง ตอนนี้พร็อพเพอร์ตี้color
ก็ตั้งค่าเป็นสีโปรดแล้วโหลดหน้านี้ซ้ำ สีขององค์ประกอบ
<h1>
ยังคงตั้งค่าเป็นสีโปรด ซึ่งได้ผลเนื่องจากเมื่อคุณทำการเปลี่ยนแปลงและเครื่องมือสำหรับนักพัฒนาเว็บได้บันทึกการเปลี่ยนแปลงลงในดิสก์ จากนั้นเมื่อคุณโหลดหน้าซ้ำ เซิร์ฟเวอร์ในเครื่องจะแสดงสำเนาไฟล์ที่แก้ไขแล้วจากดิสก์
ขั้นตอนที่ 3: บันทึกการเปลี่ยนแปลง HTML ลงในดิสก์
ลองเปลี่ยน HTML จากแผงองค์ประกอบ
- เปิดแท็บองค์ประกอบ
ดับเบิลคลิกเนื้อหาข้อความขององค์ประกอบ
h1
ที่เขียนว่าWorkspaces Demo
แล้วแทนที่ด้วยI ❤️ Cake
เปิด
/devtools-workspace-demo/index.html
ในเครื่องมือแก้ไขข้อความ การเปลี่ยนแปลงที่คุณเพิ่งทำหายไปโหลดหน้านี้ซ้ำ หน้าเว็บจะเปลี่ยนกลับไปเป็นชื่อเดิม
ไม่บังคับ: ทำไมจึงไม่ทำงาน
- โครงสร้างของโหนดที่คุณเห็นในแผงองค์ประกอบจะแสดง DOM ของหน้าเว็บ
- หากต้องการแสดงหน้าเว็บ เบราว์เซอร์จะดึงข้อมูล HTML ผ่านเครือข่าย แยกวิเคราะห์ HTML แล้วแปลงเป็นโครงสร้างของโหนด DOM
- หากหน้าเว็บมี JavaScript อยู่ JavaScript นั้นอาจเพิ่ม ลบ หรือเปลี่ยนโหนด DOM ได้ CSS เปลี่ยนแปลง DOM ได้เช่นกันผ่านพร็อพเพอร์ตี้
content
- ท้ายที่สุดเบราว์เซอร์จะใช้ DOM ในการพิจารณาว่าควรนำเสนอเนื้อหาใดต่อผู้ใช้เบราว์เซอร์
- ดังนั้น สถานะสุดท้ายของหน้าเว็บที่ผู้ใช้เห็นจึงอาจแตกต่างจาก HTML ที่เบราว์เซอร์ดึงข้อมูลมาอย่างมาก
- ซึ่งทำให้เครื่องมือสำหรับนักพัฒนาเว็บแก้ไขตำแหน่งที่ควรบันทึกการเปลี่ยนแปลงที่ทำในแผงองค์ประกอบได้ยาก เนื่องจาก DOM ได้รับผลกระทบจาก HTML, JavaScript และ CSS
กล่าวโดยย่อคือ HTML DOM Tree !==
เปลี่ยน HTML จากแผงแหล่งที่มา
หากต้องการบันทึกการเปลี่ยนแปลงใน HTML ของหน้าเว็บ ให้ดำเนินการในแผงแหล่งที่มา
- ไปที่แหล่งที่มา > หน้า
- คลิก (ดัชนี) HTML ของหน้าเว็บจะเปิดขึ้น
- แทนที่
<h1>Workspaces Demo</h1>
ด้วย<h1>I ❤️ Cake</h1>
- กด Command+S (Mac) หรือ Control+S (Windows, Linux, ChromeOS) เพื่อบันทึกการเปลี่ยนแปลง
โหลดหน้านี้ซ้ำ องค์ประกอบ
<h1>
ยังแสดงข้อความใหม่อยู่เปิด
/devtools-workspace-demo/index.html
องค์ประกอบ<h1>
ประกอบด้วยข้อความใหม่
ขั้นตอนที่ 4: บันทึกการเปลี่ยนแปลง JavaScript ลงในดิสก์
แผงแหล่งที่มายังเป็นที่สําหรับทําการเปลี่ยนแปลง JavaScript ด้วย แต่บางครั้งคุณต้องเข้าถึงแผงอื่นๆ เช่น แผงองค์ประกอบหรือแผงคอนโซล ขณะที่ทำการเปลี่ยนแปลงในเว็บไซต์ โดยคุณสามารถเปิดแผงแหล่งที่มาไว้ข้างแผงอื่นๆ ได้
- เปิดแท็บองค์ประกอบ
- กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เมนูคำสั่งจะเปิดขึ้น
พิมพ์
QS
แล้วเลือกแสดงแหล่งที่มาด่วน ที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บจะมีแท็บแหล่งที่มาด่วนแท็บกำลังแสดงเนื้อหาของ
index.html
ซึ่งเป็นไฟล์ล่าสุดที่คุณแก้ไขในแผงแหล่งที่มา แท็บแหล่งที่มาด่วนเป็นเครื่องมือแก้ไขจากแผงแหล่งที่มา เพื่อให้คุณแก้ไขไฟล์ขณะที่แผงอื่นๆ เปิดอยู่ได้กด Command+P (Mac) หรือ Control+P (Windows, Linux, ChromeOS) เพื่อเปิดกล่องโต้ตอบเปิดไฟล์
พิมพ์
script
แล้วเลือก devtools-workspace-demo/script.jsสังเกตลิงก์
Edit and save files in a workspace
ในการสาธิต สินค้านี้ได้รับการออกแบบอย่างสม่ำเสมอเพิ่มโค้ดต่อไปนี้ไว้ที่ด้านล่างของ script.js ในแท็บแหล่งที่มาด่วน
document.querySelector('a').style = 'font-style:italic';
กด Command+S (Mac) หรือ Control+S (Windows, Linux, ChromeOS) เพื่อบันทึกการเปลี่ยนแปลง
โหลดหน้านี้ซ้ำ ตอนนี้ลิงก์บนหน้าเว็บตัวเอียง
ขั้นตอนถัดไป
คุณตั้งค่าหลายโฟลเดอร์ในพื้นที่ทำงานได้ โฟลเดอร์ดังกล่าวทั้งหมดจะแสดงอยู่ใน การตั้งค่า > พื้นที่ทำงาน
ต่อไปให้เรียนรู้วิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปลี่ยน CSS และแก้ไขข้อบกพร่อง JavaScript