ในฐานะนักพัฒนาเว็บ เราใช้เวลามากในการเขียนโค้ดของเราในสภาพแวดล้อมการแก้ไข จากนั้นเราข้ามไปที่เบราว์เซอร์เพื่อใช้เครื่องมือสำหรับนักพัฒนาในตัวเพื่อแก้ไขจุดบกพร่องและปรับแต่ง UI ของผลิตภัณฑ์ ปัญหาคือผลลัพธ์ของการปรับแต่งและการดีบักไม่ได้สะท้อนให้เห็นในซอร์สโค้ด ใน Microsoft Edge เรากำลังดำเนินการแก้ไขปัญหาสองสามข้อที่เปิดให้อภิปรายและ เรายินดี ความคิดเห็นของคุณเกี่ยวกับพวกเขา
หากคุณต้องการดูวิดีโอแทนที่จะอ่าน นี่คือ บทนำ 3 นาที:
ปัญหาปัจจุบันของการปรับแต่งและการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนา h2>
วันนี้ เบราว์เซอร์ DevTools มีเครื่องมือภาพที่มีความซับซ้อนสูง ซึ่งจะสอนคุณ – ตัวอย่างเช่น – ไวยากรณ์ CSS ในขณะที่คุณใช้งาน เครื่องมือเหล่านี้เปลี่ยนแปลงสิ่งต่าง ๆ ในลักษณะที่มองเห็นได้ ตัวอย่างเช่น คุณสามารถคลิกไอคอน”Flexbox”ถัดจากคุณสมบัติ CSS flexbox และคุณจะได้รับป๊อปอัปแสดงตัวอย่างผลลัพธ์ของการเปลี่ยนแปลงรูปแบบนั้น
นี่เป็นประสบการณ์การดีบักที่ยอดเยี่ยมและป้องกันไม่ให้คุณต้องค้นหาไวยากรณ์ CSS ตลอดเวลา อย่างไรก็ตาม มีการตัดการเชื่อมต่อเนื่องจากโค้ดที่แสดงในเวิร์กโฟลว์การดีบักเหล่านี้ไม่ใช่สิ่งที่คุณเขียนในตัวแก้ไขโค้ดของคุณ
ตัวแก้ไขรูปแบบทำงานโดยแสดงเพียงมุมมองบางส่วนของโค้ดในปัจจุบัน องค์ประกอบที่เลือกในเบราว์เซอร์ คุณไม่รู้ว่าโค้ดนั้นอยู่ที่ไหนและอย่างไรกับ CSS ที่เหลือในหน้าเว็บของคุณ แม้ว่าคุณสามารถเลื่อนเพื่อดูโค้ดที่เหลือได้ แต่จะดีกว่าไหมถ้าเห็นต้นฉบับด้วย ไฟล์ CSS?
คุณสามารถเข้าถึงได้โดยคลิกที่ลิงก์ไปยังไฟล์ CSS ซึ่งจะนำคุณไปยัง Sources Tool และอยู่ห่างจากเครื่องมือแก้ไขสไตล์
p> 
อันนี้เป็นตัวแก้ไข ฝังอยู่ในเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ที่ดูดีเมื่อออกมาแต่ไม่โดดเด่นเมื่อเทียบกับสิ่งที่เราคาดหวังจากตัวแก้ไขในทุกวันนี้ ถ้าคุณไม่ถอดเครื่องมือและใช้งานในหน้าต่างของตัวเอง คุณยังมีพื้นที่หน้าจอไม่เพียงพอสำหรับประสบการณ์การแก้ไขที่สะดวก
ไม่ว่าคุณจะใช้เครื่องมือแสดงภาพเพื่อปรับแต่ง CSS ของคุณหรือตัวแก้ไขแหล่งที่มา ปัญหาหนึ่งยังคงอยู่: เมื่อคุณเปลี่ยนแปลงไปมาก และคุณได้ผลลัพธ์ที่ต้องการแล้ว คุณจะนำการเปลี่ยนแปลงเหล่านี้กลับเข้าสู่ซอร์สโค้ดได้อย่างไร
คุณทราบหรือไม่ว่ามีเครื่องมือการเปลี่ยนแปลง
เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์มี คุณลักษณะที่ช่วยในการเปลี่ยนแปลงที่เรียกว่าการเปลี่ยนแปลงซึ่งไม่ได้ใช้ประโยชน์มากนักและส่วนใหญ่ไม่ทราบ คุณสามารถเข้าถึงได้จากเมนูคำสั่งหรือเมนูบริบท และจะแสดงมุมมองที่แตกต่างของไฟล์ทั้งหมดที่คุณเปลี่ยนแปลงในเซสชันนี้ คุณสามารถใช้เครื่องมือนี้เพื่อคัดลอกและวางการเปลี่ยนแปลงกลับไปยังไฟล์ต้นฉบับของคุณ
Firefox ใช้แนวทางที่แตกต่างออกไปเล็กน้อยของเครื่องมือการเปลี่ยนแปลงที่อัปเดตสดด้วยการเปลี่ยนแปลงที่คุณทำ นอกจากนี้ยังสร้างไฟล์ CSS ให้คุณคัดลอกและวางซึ่งมีความคิดเห็นที่อธิบายว่าจะวางการเปลี่ยนแปลงเหล่านี้ลงในไฟล์ใด และไฟล์ใดถูกนำออกหรือเพิ่ม
แม้ว่าจะเป็นขั้นตอนที่ดีในทิศทางที่ถูกต้อง แต่ก็ต้องมีขั้นตอนเพิ่มเติมในการคัดลอกและวางโค้ด กลับเข้าไปในโปรแกรมแก้ไขของคุณ
เวิร์กสเปซที่ได้รับการปรับปรุง รวมถึง Visual Studio Codeพื้นที่ทำงานใน Chromium Developer Tools มีมานานแล้ว แต่ไม่เห็นประโยชน์มากนัก นั่นเป็นเหตุผลที่เราต้องการทำให้ชัดเจนยิ่งขึ้นว่าคุณสามารถซิงค์การเปลี่ยนแปลงระหว่างเบราว์เซอร์ DevTools และโปรแกรมแก้ไขโค้ดได้ นอกจากนี้เรายังตระหนักดีว่าตัวแก้ไขในเครื่องมือ Sources ไม่ใช่สิ่งที่ผู้คนต้องการใช้
จะเกิดอะไรขึ้นถ้าคุณมีความสะดวกจากตัวแก้ไขที่คุณใช้อยู่แล้วและประโยชน์ของการเปลี่ยนแปลงไฟล์ของ Workspaces แบบสด
เริ่มต้นด้วย Microsoft Edge เวอร์ชัน 96 คุณจะพบการทดลองใหม่ใน DevTools ชื่อ “ไฟล์โอเพนซอร์สใน Visual Studio Code“
เมื่อคุณเปิดใช้งานและรีสตาร์ทเครื่องมือสำหรับนักพัฒนา การนำทางไปยังไฟล์บนฮาร์ดไดรฟ์ของคุณหรือที่อยู่เซิร์ฟเวอร์ในเครื่อง เช่น localhost หรือ 127.0.0.1 จะแจ้งให้คุณระบุโฟลเดอร์ root ของไฟล์นี้ คุณยังสามารถเลือกไม่ใช้เซสชันหรือไม่เห็นตัวเลือกนี้ ได้รับ
ครั้งเดียว คุณเลือกโฟลเดอร์ เบราว์เซอร์จะขออนุญาตเข้าถึงโฟลเดอร์นั้น เช่นเดียวกับที่คุณต้องใช้เมื่อใช้ Workspaces ในเครื่องมือ Sources
เมื่อคุณทำการเปลี่ยนแปลงใดๆ ในบานหน้าต่างลักษณะ ไฟล์จะเปลี่ยนบนดิสก์ ข้อแตกต่างคือเมื่อคุณมี Visual Studio Code เป็นตัวแก้ไขบนคอมพิวเตอร์ การคลิกลิงก์ไปยังไฟล์จะเปิดขึ้นในตัวแก้ไขนี้ แทนที่จะเป็นลิงก์ในเครื่องมือ Sources คุณอยู่ในสภาพแวดล้อมที่คุณคุ้นเคยด้วยการปรับแต่งและส่วนขยายทั้งหมดที่คุณเพิ่มเข้าไป
นี่เป็นสิ่งที่ดีเพราะการเปลี่ยนแปลง CSS ของคุณเป็นแบบถาวรในขณะนี้ ปัญหาคือแม้ว่าพวกเขาจะล่วงล้ำเกินไป การเปลี่ยนแปลงใดๆ ในเครื่องมือสไตล์ เช่น การเปลี่ยนขนาดทีละหน่วยจะส่งผลให้ไฟล์ในฮาร์ดไดรฟ์ของคุณเปลี่ยนไป หากคุณใช้โซลูชันเซิร์ฟเวอร์รีโหลดแบบสดหรือแม้แต่สคริปต์ที่ดูโฟลเดอร์และเรียกใช้กระบวนการบิลด์ การดำเนินการนี้อาจยุ่งยากอย่างรวดเร็ว
การแก้ไขมิเรอร์ CSS
ในเวอร์ชันล่าสุดของ Edge DevTools สำหรับส่วนขยายโค้ด Visual Studio เราได้แนะนำวิธีอื่นในการปิดลูปการเขียน/แก้จุดบกพร่องที่เรียกว่า “CSS Mirror Editing”หากต้องการ คุณสามารถดูวิดีโอแนะนำความยาว 40 วินาที
หากคุณเปิดใช้งานคุณลักษณะนี้ การเปลี่ยนแปลงที่ทำในเครื่องมือ Styles จะส่งผลต่อซอร์สโค้ดด้วยเช่นกัน แต่ไฟล์จะไม่เปลี่ยนแปลงจนกว่าคุณจะบันทึกลงใน Visual Studio Code คุณจะได้รับประโยชน์จากการไม่สูญเสียการเปลี่ยนแปลง และสามารถควบคุมไฟล์บนฮาร์ดไดรฟ์ได้อย่างเต็มที่
หากคุณใช้การควบคุมเวอร์ชัน คุณจะเห็นการเปลี่ยนแปลงทั้งหมดที่คุณทำเป็น มุมมองที่แตกต่างเมื่อคุณบันทึกไฟล์ วิธีนี้ช่วยให้คุณใช้เวิร์กโฟลว์ Workspaces ได้สะดวกยิ่งขึ้นโดยมีการเปลี่ยนแปลงไฟล์น้อยลง
เราควรทำอย่างไรเพื่อให้ประสบการณ์นี้ดีขึ้น
ดูเหมือนว่าเรามีองค์ประกอบที่ถูกต้องครบถ้วนแล้ว สถานที่เพื่อให้นักพัฒนาและประสบการณ์การเขียนและการดีบักแบบ end-to-end เราอยากทราบว่าคุณคิดอย่างไรกับแนวทางเหล่านี้และแนวทางใดที่คุณต้องการ
หากคุณมีข้อเสนอแนะใดๆ โปรดติดต่อทีม Edge DevTools บน Twitter ที่ @EdgeDevTools แสดงความคิดเห็นใน ปัญหาใน GitHub เกี่ยวกับการแก้ไข CSS Mirror a> หรือใช้เครื่องมือคำติชมที่สร้างไว้ใน DevTools ในเบราว์เซอร์
– Chris Heilmann ผู้จัดการโปรแกรมหลัก Microsoft Edge
