เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำงานอย่างรวดเร็ว และเราต้องการแจ้งให้คุณทราบถึงฟังก์ชันการใช้งานและการปรับปรุงใหม่บางส่วนที่เราได้ระบุไว้ในคอมโพเนนต์บางส่วน วันนี้เราจะพูดถึงการเปลี่ยนแปลง UI, การทำโปรไฟล์ JS ความละเอียดสูง และฟีเจอร์ใหม่ๆ ของ Workspace
- ตอนนี้การทำโปรไฟล์ความละเอียดสูงมีความละเอียดอยู่ที่ .1 มิลลิวินาที
- แถบเครื่องมือลอยขึ้นมาที่ด้านบนของเครื่องมือสำหรับนักพัฒนาเว็บและการลบล้างซึ่งย้ายไปอยู่ที่ลิ้นชักคอนโซล
- พื้นที่ทำงานได้เพิ่มฟีเจอร์หลายอย่างเพื่อรองรับการเพิ่ม/การนำออก/การค้นหาไฟล์
การทำโปรไฟล์ความละเอียดสูง
การทำโปรไฟล์ CPU เป็นฟีเจอร์ที่มีประโยชน์มากสำหรับการดูว่า JavaScript ของคุณมีประสิทธิภาพเพียงใด นอกเหนือจากมุมมองโปรไฟล์แบบเดิมแล้ว เราได้เปิดตัว Flame Chart ในฤดูร้อนนี้ซึ่งแสดงให้เห็นการประมวลผล JavaScript ของหน้าเว็บในช่วงเวลาหนึ่ง สามารถใช้เพื่อดูระดับความลึกของชุดรายการ รวมถึงระยะเวลาในการประมวลผลของแต่ละฟังก์ชัน
ก่อนหน้านี้ ทั้งค่าแบบ "หนัก" (ล่างขึ้นบน) และ "ต้นไม้" (จากด้านบน) และ "แผนภูมิ Flame Chart" แบบดั้งเดิมจะแสดงกระบวนการความแม่นยำถึง 1 มิลลิวินาทีเท่านั้น สำหรับแอปพลิเคชันส่วนใหญ่ ปัญหานี้สามารถทำได้ อย่างไรก็ตาม หากคุณกำลังทำสิ่งที่ความเร็วสำคัญอย่างมากใน UI เช่น เกม ความละเอียด 1 มิลลิวินาทีอาจเยอะเกินกว่าจะได้ผลลัพธ์ที่มีความหมายซึ่งอาจทำให้เว็บไซต์ทำงานช้า หรือทำให้ UI ไม่ราบรื่น วิธีเปิดใช้การทำโปรไฟล์ความละเอียดสูง (ปัจจุบันคือ Canary เท่านั้น):
- เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
- ในแท็บทั่วไป ในส่วน Profiler ให้เปิดการทำโปรไฟล์ CPU ความละเอียดสูง
ต่อไปนี้เป็นตัวอย่างของ Flame Chart ที่พบในการทำโปรไฟล์ปกติและมีความละเอียดสูง ซึ่งเราใช้โปรไฟล์ในการโหลดหน้าแรกของ HTML5Rocks.com:
ด้วยความละเอียดสำหรับการทำโปรไฟล์ตามปกติ ระบบจะปัดเศษเวลาในการประมวลผลเป็นมิลลิวินาทีถัดไปเสมอ ดังนั้นกระบวนการที่ใช้เวลาเพียง 0.1 มิลลิวินาทีหรือน้อยกว่ายังมีการรายงานว่าใช้เวลา 1.0 มิลลิวินาที และกระบวนการอื่นๆ อาจไม่แสดงเลยในสแต็กการเรียกใช้
การทำโปรไฟล์แบบความละเอียดสูงจะมีโอเวอร์เฮดขนาดใหญ่ใน JavaScript VM ซึ่งเป็นเหตุผลที่ปิดใช้งานโดยค่าเริ่มต้น แม้ว่าความละเอียดในการทำโปรไฟล์จะดูเจ๋งกว่า ความละเอียดปกติ แต่เราแนะนำให้ใช้เฉพาะในกรณีที่ต้องการความแม่นยำจริงๆ เท่านั้น
การปรับปรุง UI ของเครื่องมือสำหรับนักพัฒนาเว็บ
แม้จะมีการเปิดตัวสิ่งใหม่ๆ ใน Canary บ้างแล้ว แต่เราอยากให้คุณอยากเห็นการเปลี่ยนแปลง UI ที่สำคัญ 2-3 อย่าง ได้แก่ ปุ่มต่างๆ ที่ขึ้นที่ด้านบนสุดของ UI โดยทั่วไป การนำทางและแผงข้อมูลบนไทม์ไลน์ และการเปลี่ยนตำแหน่งของการลบล้างไปยังลิ้นชักของคอนโซล
ก่อนอื่น มาดูกันว่าเรามาจากไหน เนื่องจากเราพูดถึงไทม์ไลน์อยู่ดี ฉันจะพยายามฆ่านก 2 ตัวแรกด้วยภาพหน้าจอ 1 คู่ ไทม์ไลน์ใน Chrome (เสถียร) ตอนนี้จะมีลักษณะดังนี้
และตอนนี้ไทม์ไลน์มีลักษณะเช่นนี้
โปรดสังเกตสิ่งต่อไปนี้
- ตอนนี้แถบเครื่องมือและปุ่มต่างๆ จะอยู่ที่ด้านบนสุดของหน้าจอ ทั้งสำหรับไทม์ไลน์ที่เจาะจง ทางซ้ายและสำหรับ DevTools ทั่วไปอยู่ด้านขวา
- ตอนนี้ระเบียนไทม์ไลน์มีโครงสร้างการซ้อนอยู่ในแผงด้านซ้าย และคุณยังใช้แป้นพิมพ์เพื่อเลื่อนได้อีกด้วย นอกจากใช้ปุ่มขึ้นและลงเพื่อเลื่อนขึ้นและลงแล้ว คุณยังสามารถใช้ปุ่มซ้ายและขวาเพื่อเปิดและปิดระเบียนที่ซ้อนกันได้ด้วย
- ตอนนี้รายละเอียดของเวลาจะแสดงในแผงทางด้านขวาของ รายการที่คุณเลือกไว้ (คุณยังสามารถวางเมาส์เหนือรายการอื่นๆ เพื่อดูข้อมูลของรายการเหล่านั้น)
เรามาดูลิ้นชักคอนโซลกัน หากต้องการเปิดลิ้นชักคอนโซล ให้กด Escape จากภายในเครื่องมือสำหรับนักพัฒนาเว็บ หรือกดปุ่มลิ้นชักคอนโซล
แล้วลิ้นชักจะเลื่อนขึ้นจากด้านล่าง
โดยค่าเริ่มต้น คุณจะเห็นแท็บคอนโซลและค้นหา หากต้องการไปที่ฟังก์ชันการทำงานก่อนหน้านี้เรียกว่าการลบล้าง ให้เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ และเลือกช่องข้าง "แสดงมุมมอง "การจำลอง" ในลิ้นชักคอนโซล" ปิดกล่องการตั้งค่า แล้วคุณจะเห็นแท็บการจำลองในลิ้นชักคอนโซลเหมือนภาพหน้าจอที่นี่
และคุณสามารถทำการจำลองทั้งหมดได้จากที่นั่น
สาเหตุที่มีการเปลี่ยนแปลงคือก่อนหน้านี้คุณต้องเข้าและออกจากการตั้งค่าเพื่อเปลี่ยนการลบล้างการเลียนแบบ จากนั้นจึงย้อนกลับไปดูหน้าเว็บของคุณ ตอนนี้คุณสามารถเปลี่ยนการลบล้างการจำลองได้ในขณะที่ยังคงจัดการรูปแบบอยู่
พื้นที่ทำงานที่ได้รับการปรับปรุง
โดยเฉพาะอย่างยิ่ง พื้นที่ทำงานคือฟีเจอร์ที่ช่วยให้ขั้นตอนการสร้าง ง่ายขึ้นได้เล็กน้อย แต่ก็ไม่ได้รับความรักมากนักเท่าที่ควร ด้วยพื้นที่ทำงาน แทนที่จะต้องทดสอบและทำการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บและไม่ต้องคัดลอกและวางการเปลี่ยนแปลงกลับไปที่ไฟล์ต้นฉบับ คุณสามารถทำการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บ ดูการเปลี่ยนแปลงที่แสดงผลในเบราว์เซอร์ และบันทึกลงในไฟล์เวอร์ชันถาวรในเครื่องได้โดยไม่ต้องออกจาก Chrome
หากคุณยังไม่ได้อ่านบทความ Chrome Developer Tools Revolutions 2013 ลองอ่านดู จากนั้นกลับมาที่นี่เพื่อดูว่าเราได้ปรับปรุงคุณลักษณะเหล่านั้นอย่างไรในช่วง 2-3 เดือนที่ผ่านมา
การเพิ่มไฟล์ทำได้ง่ายขึ้น
ย้อนไปดูบทความของ Revolutions 2013 ว่าการสร้างพื้นที่ทำงานใหม่นั้นต้องเพิ่มโฟลเดอร์ลงในพื้นที่ทำงาน แล้วแมปโฟลเดอร์กับทรัพยากรเครือข่าย เราทำให้กระบวนการนี้ง่ายขึ้นในขั้นตอนเดียว นั่นคือ เพียงคลิกขวาในแผงด้านซ้ายของแหล่งที่มา แล้วเลือกเพิ่มโฟลเดอร์ในพื้นที่ทำงาน การดำเนินการนี้จะนำคุณเข้าสู่กล่องโต้ตอบไฟล์ ซึ่งคุณสามารถเลือกโฟลเดอร์ใหม่ที่จะเพิ่มไปยังพื้นที่ทำงานได้ (จะไม่เพิ่มโฟลเดอร์ที่ไฮไลต์อยู่ไปยังพื้นที่ทำงาน)
การสร้างและการลบไฟล์
คุณสามารถเพิ่มไฟล์ใหม่ในไดเรกทอรีในเครื่องซึ่งใช้สำหรับพื้นที่ทำงานภายใน Workspace ได้แล้ว เพียงคลิกขวาบนโฟลเดอร์ในแผง "แหล่งที่มา" ทางด้านซ้าย และเลือกไฟล์ใหม่
นอกจากนี้ คุณยังนำไฟล์ออกจากภายในพื้นที่ทำงานได้ด้วย คลิกขวาที่ไฟล์ในแผงแหล่งที่มาด้านซ้าย และเลือกลบไฟล์
นอกจากนี้ คุณยังทำสำเนาไฟล์ได้โดยเลือกทำซ้ำไฟล์
รีเฟรช
เมื่อสร้างไฟล์ใหม่ (หรือลบไฟล์) ในพื้นที่ทำงานได้โดยตรงแล้ว ไดเรกทอรีแหล่งที่มาจะรีเฟรชและแสดงไฟล์ใหม่เหล่านี้โดยอัตโนมัติด้วย ไม่เช่นนั้นคุณสามารถคลิกขวาที่โฟลเดอร์และเลือกรีเฟรชจากเมนูป๊อปอัปเพื่อบังคับให้รีเฟรชได้
วิธีนี้มีประโยชน์ในกรณีที่คุณเปลี่ยนไฟล์ที่เปิดอยู่ในเครื่องมือแก้ไขอื่น และต้องการให้การเปลี่ยนแปลงแสดงในเครื่องมือสำหรับนักพัฒนาเว็บ
ค้นหาในไฟล์ต่างๆ
เราได้ปรับแต่งอินเทอร์เฟซสำหรับการค้นหาในไฟล์ต่างๆ เล็กน้อย และตอนนี้คุณสามารถ ค้นหาสตริงจากไฟล์ทั้งหมดในพื้นที่ทำงานได้ รวมถึงไฟล์ทั้งหมดที่โหลดเข้าไปในเครื่องมือสำหรับนักพัฒนาเว็บ คุณสามารถค้นหาสตริงหรือนิพจน์ทั่วไป แล้วเราจะจับคู่เหตุการณ์ทั้งหมดในทุกไฟล์หรือหน้าเว็บ หากต้องการค้นหาไฟล์หลายไฟล์ใน Workspace (ปัจจุบันอยู่ใน Canary) ให้ทำดังนี้
- เปิดลิ้นชักคอนโซลโดยกดแป้น Escape และคลิกแท็บค้นหา ถัดจากคอนโซลเพื่อเปิดหน้าต่างค้นหา
หรือ
กด Ctrl + Shift + F (Cmd + Opt + F ใน Mac) เพื่อเปิดหน้าต่างค้นหา
- พิมพ์ข้อความค้นหาลงในช่องแหล่งที่มาของการค้นหา แล้วกด Enter ถ้าคำค้นหาของคุณเป็นนิพจน์ทั่วไปหรือไม่จำเป็นต้องคำนึงถึงตัวพิมพ์เล็กหรือใหญ่ ให้คลิกช่องที่เหมาะสม
รายการละเว้น
การค้นหาข้อความในไฟล์หรือการกรองชื่อไฟล์อาจเป็นเรื่องน่าเบื่อหน่าย ถ้าคุณมีไฟล์ .git หรือไฟล์ README.md จำนวนมากจนทำให้ผลการค้นหายุ่งเหยิง
เราจึงเพิ่มฟีเจอร์รายการละเว้นลงในพื้นที่ทำงาน เพื่อให้คุณสามารถยกเว้น ไฟล์บางประเภทหรือบางโฟลเดอร์เมื่อดูและค้นหาพื้นที่ทำงานได้
วิธีดูและเปลี่ยนรายการละเว้นที่แชร์ในปัจจุบันในพื้นที่ทำงานมีดังนี้
- เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกพื้นที่ทำงาน
- ในส่วนทั่วไป ภายในช่องรูปแบบการยกเว้นโฟลเดอร์ คุณสามารถดูและ/หรือแก้ไขรูปแบบได้
เราจัดส่งโดยใช้รูปแบบการยกเว้นทั่วโลกเริ่มต้นต่อไปนี้
นิพจน์ทั่วไปนี้ไม่รวมข้อมูลเมตาจาก Git, SVN, Mercurial, ไฟล์โปรเจ็กต์จาก Eclipse และ IntelliJ, OS X DS_Store และไฟล์ถังขยะ และสิ่งอื่นๆ ที่ควรละเว้น เช่น แคชจาก Sass โฟลเดอร์ทั้งโฟลเดอร์ รวมถึงโฟลเดอร์ย่อยทั้งหมดจะถูกยกเว้นจาก UI เพื่อไม่ให้ปรากฏใน UI และไม่แสดงขึ้นมาเมื่อค้นหาผ่านไฟล์
รายการที่ละเว้นสำหรับ Workspace โดยเฉพาะ
หากต้องการให้เจาะจงมากขึ้น คุณยังสามารถเลือกยกเว้นไฟล์และโฟลเดอร์ภายในพื้นที่ทำงานที่ต้องการเพื่อลดความยุ่งเหยิงในการค้นหาได้ โฟลเดอร์ที่ยกเว้นจะไม่แสดง ในไดเรกทอรีแหล่งที่มาเช่นกัน
หากต้องการยกเว้นทั้งโฟลเดอร์จากพื้นที่ทำงาน ให้คลิกขวาที่โฟลเดอร์ในแผงแหล่งที่มาด้านซ้าย แล้วเลือกยกเว้นโฟลเดอร์ วิธีดูการแมปและโฟลเดอร์ที่ยกเว้นสำหรับโฟลเดอร์พื้นที่ทำงานที่ต้องการ
- เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกพื้นที่ทำงาน
- ไฮไลต์โฟลเดอร์ที่คุณสนใจ
- คลิกแก้ไขและหน้าต่าง "แก้ไขระบบไฟล์" จะปรากฏขึ้น คุณสามารถเพิ่มหรือนำการแมปและ/หรือโฟลเดอร์ที่ยกเว้นออกจากหน้าต่างนี้
