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