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