ข่าวสารเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บที่อัปเดตล่าสุด
รายการข่าวแรกในโพสต์นี้เป็นเรื่องเกี่ยวกับตัวการอัปเดตนี้เอง เราจะสรุปข้อมูลเกี่ยวกับสิ่งที่เกิดขึ้นในโลกของ Chrome DevTools อยู่เรื่อยๆ แต่อย่างน้อยเดือนละครั้ง
และเราหมายถึงว่าใหม่จริงๆ เราจะพูดถึงฟีเจอร์ใหม่ที่เพิ่งเปิดตัวใน Chrome Canary ดังนั้นหากต้องการใช้เวอร์ชันที่เสถียรก็ทำได้ แต่หากคุณกล้าลองสิ่งใหม่ๆ และต้องการรักษาอันดับอยู่เสมอ โพสต์เหล่านี้เหมาะสำหรับคุณ นอกจากฟีเจอร์ล่าสุดและการแก้ไขข้อบกพร่องแล้ว คุณจะเห็นส่วนความเคลื่อนไหวของชุมชนที่ท้ายโพสต์แต่ละรายการ ซึ่งจะไฮไลต์เนื้อหาที่ดีที่สุดที่คุณซึ่งเป็นผู้ใช้คนสำคัญของเราได้มีส่วนร่วม
เรามาเริ่มดูข่าวกันเลย
ฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ
ภาพหน้าจอที่มีลักษณะเป็นฟิล์มสตริปในเครือข่ายและไทม์ไลน์
เมื่อเพียง 1 สัปดาห์ที่ผ่านมา เราได้ย้ายฟีเจอร์ใหม่ที่สำคัญออกจากระยะการทดสอบแล้ว ซึ่งก็คือความสามารถในการจับภาพหน้าจอของหน้าเว็บทั้งในแท็บเครือข่ายและไทม์ไลน์
ในแผงเครือข่าย ให้คลิกไอคอนกล้องเล็กๆ เพื่อเปิดใช้การจับเฟรม จากนั้นโหลดหน้าเว็บซ้ำเพื่อเรียกใช้การจับภาพ นอกจากภาพหน้าจอที่จับด้วยเครื่องมืออื่นๆ เช่น WebPageTest แล้ว ปัจจุบันเราแสดงเฉพาะเฟรมที่มาจากโปรแกรมวาดภาพจริงๆ
ขณะที่การดับเบิลคลิกเฟรมใดเฟรมหนึ่งจะแสดงมุมมองแบบซูม (จากนั้นใช้ลูกศรซ้าย/ขวาเพื่อไปยังส่วนต่างๆ) การวางเมาส์เหนือเฟรมจะแสดงเส้นในแผงและไทม์ไลน์เพื่อให้เห็นภาพว่าเฟรมดังกล่าวจับภาพไว้เมื่อใด ซึ่งจะช่วยให้คุณเชื่อมโยงกับลําดับการโหลดได้ ซึ่งทำให้การแก้ไขข้อบกพร่องเกี่ยวกับปัญหาการโหลดที่พบได้ทั่วไป เช่น เว็บแบบอักษรที่บล็อกการแสดงผล ง่ายขึ้นมาก
ในแผงไทม์ไลน์ คุณสามารถเปิดใช้การจับภาพหน้าจอได้โดยสลับช่องทำเครื่องหมาย "ภาพหน้าจอ" ในแถบเครื่องมือด้านบน การดำเนินการที่นี่จะแตกต่างออกไปเล็กน้อยเมื่อเทียบกับแผงเครือข่าย ในกรณีนี้ เราจะพยายามจับภาพบ่อยที่สุดเท่าที่จะทำได้ โดยไม่คำนึงถึงภาพจริง เพื่อให้วางภาพหน้าจอดังกล่าวบนไทม์ไลน์เชิงเส้นซึ่งสัมพันธ์กับแถวอื่นๆ ในไทม์ไลน์ได้ เฟรมที่ซูมจะปรากฏขึ้นเมื่อวางเมาส์เหนือรูปภาพแทนที่จะต้องดับเบิลคลิกเพื่อแสดงตัวอย่าง
เนื่องจากฟีเจอร์ทั้ง 2 รายการทำงานไม่สอดคล้องกันเล็กน้อยในแง่ฟังก์ชันการทำงานและ UX เราจึงอยากแนะนำให้คุณลองใช้ฟีเจอร์และแสดงความคิดเห็นผ่านคำขอแจ้งปัญหาใน crbug.com/new หรือทวีตถึง @ChromeDevTools
การควบคุมเครือข่ายในแผงเครือข่าย
การควบคุมปริมาณการใช้เครือข่าย ซึ่งเป็นฟีเจอร์ที่เราเพิ่มเข้ามาเมื่อเปิดตัวโหมดอุปกรณ์ ตอนนี้มีบ้านหลังที่ 2 ในแถบเครื่องมือของแผงเครือข่ายแล้ว เพื่อให้คุณมุ่งเน้นที่การเพิ่มประสิทธิภาพเครือข่ายได้ในที่เดียว
หน้าแรกใหม่นี้เป็นเพียงมิเรอร์เท่านั้น โดยยังคงใช้งานได้นอกโหมดอุปกรณ์ เนื่องจากการจําลองการเชื่อมต่อที่ไม่ดียังคงมีความสําคัญอย่างยิ่งเมื่อทําให้เว็บไซต์ของคุณตอบสนองได้ดี
สุดท้าย คุณเป็นหนึ่งในผู้โชคร้ายเหล่านี้ที่สงสัยว่าทำไมการเชื่อมต่ออินเทอร์เน็ตจึงตัดการเชื่อมต่อไปหลังจากทำงานมาทั้งวัน เพียงเพื่อพบว่าคุณลืมปิดใช้การจำกัดแบนด์วิดท์ของเครือข่าย ตอนนี้แท็บแผงเครือข่ายจะแสดงไอคอนคำเตือนเมื่อเปิดใช้การควบคุมเครือข่าย
เกร็ดความรู้ต่างๆ
- เกลียดวงกลมประหลาดๆ ในไทม์ไลน์ของเครือข่ายไหม เราเองก็เช่นกัน ข้อมูลเหล่านี้คือจุดเวลาที่บันทึกเฟรม (ในแถบสไลด์รูปภาพใหม่) ไว้ ตอนนี้ ข้อความจะปรากฏเป็นเส้นเมื่อคุณวางเมาส์เหนือข้อความ
- โหมดอุปกรณ์ จะคงการวางแนวไว้เมื่อคุณสลับใช้อุปกรณ์
ข้อมูลอัปเดตของชุมชน
เจาะลึกเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
Bret Little ได้เผยแพร่หลักสูตรแนะนำการใช้งานแบบสั้นๆ ที่จะทําให้คุณคุ้นเคยกับฟังก์ชันพื้นฐานของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ ทั้งยังให้เคล็ดลับและเทคนิคเชิงลึกมากมาย ข้อมูลในนั้นมีประโยชน์แน่นอน และเอกสารเครื่องมือสำหรับนักพัฒนาเว็บเพิ่มเติมก็มีประโยชน์เช่นกัน
IDE ของเครื่องมือสำหรับนักพัฒนาเว็บ… อะไรนะ
Kenneth Auchenberg นักพัฒนาเว็บและผู้ที่ชื่นชอบ DevTools ได้พัฒนาแอป DevTools แบบสแตนด์อโลนเพื่อพิสูจน์แนวคิดเมื่อไม่กี่เดือนที่ผ่านมา และบล็อกโพสต์ของเขาก็กลายเป็นข่าว (แฮ็กเกอร์) อีกครั้งในสัปดาห์นี้
การเปลี่ยน DevTools เป็น IDE ที่สมบูรณ์แบบเป็นแนวคิดที่น่าสนใจ ซึ่งสมาชิกในทีมหลายคนของเราเคยฝันถึงมาก่อน แต่นั่นจะเป็นโปรเจ็กต์ที่ยิ่งใหญ่มาก
คุณมีความคิดเห็นอย่างไร IDE ของเครื่องมือสำหรับนักพัฒนาเว็บเป็นแค่ความฝันหรือคุณเห็นโอกาสที่มันจะใช้งานได้จริง ลักษณะที่ควรจะเป็น โปรดแจ้งให้เราทราบในความคิดเห็น
แล้วเจอกันนะ
Paul Bakaus และทีม DevTools