อีเมลสรุปสำหรับ DevTools กันยายน 2016 - เครื่องมือสำหรับนักพัฒนาเว็บในปี 2016 เป็นต้นไป

งาน Google I/O 2016 สิ้นสุดลงแล้ว เครื่องมือสำหรับนักพัฒนาเว็บได้รับความนิยมอย่างมากที่ I/O ซึ่งรวมถึงการพูดคุยของ Paul Bakaus, Paul Ireland และ Seth Thompson ที่อธิบายถึงอนาคตของเครื่องมือสำหรับนักพัฒนาเว็บ ดูวิดีโอด้านล่างหรืออ่านต่อเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางการพัฒนาเครื่องมือสำหรับนักพัฒนาเว็บในปี 2016 และปีต่อๆ ไป

การเขียนโปรแกรม

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

โหมดอุปกรณ์

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

ต่อไปนี้เป็นข้อมูลสรุปสั้นๆ เกี่ยวกับการอัปเดตบางโหมดอุปกรณ์ที่ใช้งานใน Canary นับตั้งแต่ที่เราโพสต์บทความนี้เมื่อเดือนมีนาคมที่ผ่านมา

เมื่อดูหน้าเว็บในแบบอุปกรณ์ใดอุปกรณ์หนึ่ง คุณจะดื่มด่ำไปกับประสบการณ์ได้มากขึ้นด้วยการแสดงฮาร์ดแวร์ของอุปกรณ์ไว้รอบหน้าเว็บ

กำลังแสดงเฟรมอุปกรณ์

เมนูการวางแนวของอุปกรณ์ช่วยให้คุณดูหน้าเว็บได้เมื่อเปิดใช้งานองค์ประกอบ UI ต่างๆ ของระบบ เช่น แถบนำทางและแป้นพิมพ์

การแสดงองค์ประกอบ UI ของระบบ

เรื่องราวบนเดสก์ท็อปก็ได้รับการปรับปรุงด้วยเช่นกัน ด้วยคุณลักษณะการซูมของโหมดอุปกรณ์ คุณสามารถจำลองหน้าจอเดสก์ท็อปที่มีขนาดใหญ่กว่าหน้าจอที่คุณกำลังใช้งานอยู่จริงๆ เช่น หน้าจอ 4K (3840px x 2160px)

แสดงหน้าจอ 4K

คุณควบคุมเครือข่ายได้โดยตรงจาก UI โหมดอุปกรณ์ แทนที่จะต้องเปลี่ยนไปใช้แผงเครือข่าย

การควบคุมเครือข่าย

ความแตกต่างของแหล่งที่มา

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

ความแตกต่างของแหล่งที่มาในแผงแหล่งที่มา

คุณยังสามารถติดตามการเปลี่ยนแปลงได้ในแท็บลิ้นชัก "แหล่งที่มาด่วน" ใหม่ โดยทำดังนี้

แท็บลิ้นชักแหล่งที่มาด่วน

นี่เป็นครั้งแรกที่แท็บ "แหล่งที่มาด่วน" จะช่วยให้คุณโฟกัสที่ซอร์สโค้ด HTML หรือ JavaScript ในเวลาเดียวกันกับกฎ CSS ได้ นอกจากนี้ เมื่อคุณคลิกคุณสมบัติ CSS ในแผง "รูปแบบ" แท็บ "แหล่งที่มาด่วน" จะข้ามไปที่และไฮไลต์คำจำกัดความในแหล่งที่มาโดยอัตโนมัติ

เปิดใช้การทดสอบความแตกต่างของแหล่งที่มาใน Chrome Canary เพื่อลองใช้งานเลยวันนี้

การตัดต่อ Live Sass

ตัวอย่างการปรับปรุงที่สำคัญบางส่วนที่กำลังจะเกิดขึ้นกับเวิร์กโฟลว์การแก้ไข 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 ของแอปเป็นภาพ จากที่นี่ คุณสามารถเรียกใช้เวิร์กโฟลว์ "เพิ่มลงในหน้าจอหลัก" ได้ด้วยตนเอง

แผงไฟล์ Manifest

แผง Service Worker จะช่วยให้คุณตรวจสอบและโต้ตอบกับ 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