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