งาน Google I/O 2016 สิ้นสุดลงแล้ว เครื่องมือสำหรับนักพัฒนาเว็บได้รับความนิยมอย่างมากที่ I/O ซึ่งรวมถึงการพูดคุยของ Paul Bakaus, Paul Ireland และ Seth Thompson ที่อธิบายถึงอนาคตของเครื่องมือสำหรับนักพัฒนาเว็บ ดูวิดีโอด้านล่างหรืออ่านต่อเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางการพัฒนาเครื่องมือสำหรับนักพัฒนาเว็บในปี 2016 และปีต่อๆ ไป
การเขียนโปรแกรม
เครื่องมือสำหรับนักพัฒนาเว็บมีเป้าหมายเพื่อทำให้วงจรการพัฒนาเว็บทุกขั้นตอนง่ายขึ้น คุณอาจทราบว่าเครื่องมือสำหรับนักพัฒนาเว็บช่วยในการแก้ไขข้อบกพร่องหรือสร้างโปรไฟล์เว็บไซต์ได้ แต่อาจไม่ทราบวิธีใช้เครื่องมือเพื่อช่วยในการเขียนเว็บไซต์ "การสร้าง" หมายถึงการกระทำในการสร้างเว็บไซต์ เป้าหมายหนึ่งในอนาคตอันใกล้คือช่วยให้คุณทำซ้ำ ทดสอบ และจำลองเว็บไซต์ในอุปกรณ์ที่หลากหลายได้ง่ายขึ้น
โหมดอุปกรณ์
ทีมเครื่องมือสำหรับนักพัฒนาเว็บจะคอยปรับปรุงประสบการณ์ในโหมดอุปกรณ์อย่างต่อเนื่อง ซึ่งได้อัปเกรดครั้งใหญ่ครั้งแรกใน Chrome 49 ดูโพสต์จากเดือนมีนาคม (โหมดอุปกรณ์ใหม่สำหรับโลกที่อุปกรณ์เคลื่อนที่เป็นอันดับแรก) เพื่อดูภาพรวมของการอัปเดต เป้าหมายโดยรวมคือ การมอบขั้นตอนการทำงานที่ราบรื่นในการดูและจำลองเว็บไซต์ของคุณในอุปกรณ์ทุกรูปแบบ
ต่อไปนี้เป็นข้อมูลสรุปสั้นๆ เกี่ยวกับการอัปเดตบางโหมดอุปกรณ์ที่ใช้งานใน Canary นับตั้งแต่ที่เราโพสต์บทความนี้เมื่อเดือนมีนาคมที่ผ่านมา
เมื่อดูหน้าเว็บในแบบอุปกรณ์ใดอุปกรณ์หนึ่ง คุณจะดื่มด่ำไปกับประสบการณ์ได้มากขึ้นด้วยการแสดงฮาร์ดแวร์ของอุปกรณ์ไว้รอบหน้าเว็บ
เมนูการวางแนวของอุปกรณ์ช่วยให้คุณดูหน้าเว็บได้เมื่อเปิดใช้งานองค์ประกอบ UI ต่างๆ ของระบบ เช่น แถบนำทางและแป้นพิมพ์
เรื่องราวบนเดสก์ท็อปก็ได้รับการปรับปรุงด้วยเช่นกัน ด้วยคุณลักษณะการซูมของโหมดอุปกรณ์ คุณสามารถจำลองหน้าจอเดสก์ท็อปที่มีขนาดใหญ่กว่าหน้าจอที่คุณกำลังใช้งานอยู่จริงๆ เช่น หน้าจอ 4K (3840px x 2160px)
คุณควบคุมเครือข่ายได้โดยตรงจาก UI โหมดอุปกรณ์ แทนที่จะต้องเปลี่ยนไปใช้แผงเครือข่าย
ความแตกต่างของแหล่งที่มา
เมื่อคุณทำซ้ำการจัดรูปแบบของเว็บไซต์ คุณอาจพลาดการติดตามการเปลี่ยนแปลงได้ง่ายๆ ในการแก้ไขปัญหานี้ เครื่องมือสำหรับนักพัฒนาเว็บจะใช้ภาพสัญลักษณ์บนรางหมายเลขบรรทัดของแผงแหล่งที่มาเพื่อช่วยให้คุณติดตามการเปลี่ยนแปลงได้ เส้นที่ลบจะกำกับด้วยเส้นสีแดง เส้นที่แก้ไขจะไฮไลต์เป็นสีม่วง และเส้นใหม่จะไฮไลต์ด้วยสีเขียว
คุณยังสามารถติดตามการเปลี่ยนแปลงได้ในแท็บลิ้นชัก "แหล่งที่มาด่วน" ใหม่ โดยทำดังนี้
นี่เป็นครั้งแรกที่แท็บ "แหล่งที่มาด่วน" จะช่วยให้คุณโฟกัสที่ซอร์สโค้ด HTML หรือ JavaScript ในเวลาเดียวกันกับกฎ CSS ได้ นอกจากนี้ เมื่อคุณคลิกคุณสมบัติ CSS ในแผง "รูปแบบ" แท็บ "แหล่งที่มาด่วน" จะข้ามไปที่และไฮไลต์คำจำกัดความในแหล่งที่มาโดยอัตโนมัติ
เปิดใช้การทดสอบความแตกต่างของแหล่งที่มาใน Chrome Canary เพื่อลองใช้งานเลยวันนี้
การตัดต่อ Live Sass
ตัวอย่างการปรับปรุงที่สำคัญบางส่วนที่กำลังจะเกิดขึ้นกับเวิร์กโฟลว์การแก้ไข Sass มีดังนี้ ฟีเจอร์เหล่านี้ยังอยู่ในขั้นทดลองเริ่มต้น เราจะติดต่อคุณในโพสต์ในภายหลังเมื่อพร้อมให้คุณทดลองใช้
โดยพื้นฐานแล้ว เครื่องมือสำหรับนักพัฒนาเว็บจะให้คุณดูและแก้ไขตัวแปร Sass ได้ตามที่หวังไว้ตลอด คลิกค่าที่รวบรวมจากตัวแปร Sass และแท็บ "แหล่งที่มาด่วน" ใหม่จะข้ามไปที่คำจำกัดความของตัวแปร
เมื่อแก้ไขค่าซึ่งรวบรวมจากตัวแปร Sass การแก้ไขจะอัปเดตตัวแปร Sass ไม่ใช่เพียงพร็อพเพอร์ตี้ที่คุณเลือกเท่านั้น
Progressive Web App
ดูรายการการพูดคุยเรื่องเว็บและ Chrome ที่งาน Google I/O 2016 แล้วคุณจะเห็นธีมหลักที่เกิดขึ้นในโลกของการพัฒนาเว็บ นั่นคือ Progressive Web App
ขณะที่โมเดล Progressive Web App เกิดขึ้น เครื่องมือสำหรับนักพัฒนาเว็บก็กำลังปรับปรุงอย่างรวดเร็วเพื่อให้บริการเครื่องมือที่นักพัฒนาแอปจำเป็นต้องใช้ในการสร้าง Progressive Web App ที่ยอดเยี่ยม เราตระหนักดีว่าการสร้างและแก้ไขข้อบกพร่องในแอปพลิเคชันที่ทันสมัยเหล่านี้มักจะมาพร้อมกับความต้องการเฉพาะ เครื่องมือสำหรับนักพัฒนาเว็บจึงทำการพัฒนา Progressive Web Application ทั้งแผง เปิด Chrome Canary และคุณจะเห็นว่ามีการแทนที่แผงทรัพยากรด้วยแผงแอปพลิเคชันแล้ว ฟังก์ชันการทำงานก่อนหน้านี้ทั้งหมดจากแผงทรัพยากรจะยังคงอยู่ เรามีแผงใหม่ 2-3 บานที่ออกแบบมาเพื่อการพัฒนา Progressive Web App โดยเฉพาะ ดังนี้
แผงไฟล์ Manifest จะแสดงไฟล์ Manifest ของแอปเป็นภาพ จากที่นี่ คุณสามารถเรียกใช้เวิร์กโฟลว์ "เพิ่มลงในหน้าจอหลัก" ได้ด้วยตนเอง
แผง Service Worker จะช่วยให้คุณตรวจสอบและโต้ตอบกับ Service Worker ที่ลงทะเบียนไว้สำหรับหน้าปัจจุบันได้
นอกจากนี้ บานหน้าต่าง "ล้างพื้นที่เก็บข้อมูล" จะช่วยให้คุณสามารถล้างข้อมูลได้ทุกชนิดเพื่อให้คุณสามารถดูหน้าที่มีแถบสเลทปกติ
JavaScript
การข้ามขอบเขตระหว่างฟรอนท์เอนด์กับแบ็กเอนด์เป็นส่วนที่ยากในการพัฒนาเว็บแบบ Fullstack หากพบว่าแบ็กเอนด์แสดงรหัสสถานะ 500 ขณะแก้ไขข้อบกพร่องของเว็บแอป แสดงว่าคุณใช้ประโยชน์จากเครื่องมือสำหรับนักพัฒนาเว็บถึงขีดจำกัดแล้ว คุณจึงต้องเปลี่ยนบริบทและเริ่มการทำงานของสภาพแวดล้อมการพัฒนาแบ็กเอนด์เพื่อแก้ไขข้อบกพร่อง
แต่เนื่องจากแบ็กเอนด์เขียนด้วย Node.js ขอบเขตระหว่างฟรอนท์เอนด์กับแบ็กเอนด์จะเริ่มเบลอ เนื่องจาก Node.js ทำงานบนเครื่องมือ JavaScript V8 (เครื่องมือเดียวกับที่ขับเคลื่อน Google Chrome) เราจึงต้องการทำให้ Node.js สามารถดีบัก Node.js จากเครื่องมือสำหรับนักพัฒนาเว็บได้ ด้วย V8, DevTools และ Google Cloud Platform สำหรับทีม Node.js ตอนนี้คุณสามารถใช้ฟีเจอร์การแก้ไขข้อบกพร่องที่มีประสิทธิภาพทั้งหมดของ DevTools เพื่อพิจารณาแอป Node.js ฟังก์ชันนี้ได้มาถึงบิลด์กลางคืนของ Node.js แล้ว แม้ว่าการผสานรวมเครื่องมือสำหรับนักพัฒนาเว็บจะยังคงปรับปรุงให้ดีขึ้นก่อนที่จะรวมอยู่ในรุ่นหลัก การแก้ไขข้อบกพร่องในแอป Node.js จากเครื่องมือสำหรับนักพัฒนาเว็บทำได้ง่ายๆ เพียงส่ง node --inspect app.js และเชื่อมต่อจาก DevTools ในหน้าต่าง Chrome
แม้ว่าเครื่องมือที่มีอยู่แล้ว เช่น Node Inspector จะมอบประสบการณ์การแก้ไขข้อบกพร่องแบบ GUI แต่การผสานรวม Node.js DevTools ใหม่จะยังทันสมัยกับฟีเจอร์การแก้ไขข้อบกพร่องล่าสุดของ DevTools เช่น การแก้ไขข้อบกพร่องของสแต็กแบบไม่ซิงค์ การแบล็กบ็อกซิง และการรองรับ ES6