คิดว่าเมื่อวานตอนเช้า หลายๆคนที่ได้เปิด Developer tools บน Google Chrome คงได้พบกับข้อความแบบนี้
นั่นเป็นเพราะว่า Google Chrome ของเราได้รับการอัพเดทแล้วนั่นเอง!
แล้ว Chrome ของเราจะมีอะไรเปลี่ยนไปบ้างหล่ะ? หลักๆเลยก็จะมีฟีเจอร์ใหม่ๆอยู่ 4 อย่าง และอีก 1 อย่างเป็นอะไรบางอย่างทีเปลี่ยนไปนิดหน่อย 😉
-
CSS and JS code coverage
- Full-page screenshots
- Block requests
- Step over async await
- Unified Command Menu
ถ้างั้นก็มาไล่ดูทีละข้อกันเลยดีกว่า~
- CSS and JS code coverage
เป็นฟีเจอร์ใหม่ที่ช่วยให้เราดูว่า CSS หรือ JS ส่วนไหนที่เราไม่ได้ใช้ และทำให้หน้าเว็บของเราโหลดช้าบ้าง โดยถ้าหากเราต้องการใช้ฟีเจอร์นี้ ก็สามารถทำได้โดย
– เปิด Developer tools
– กด Ctrl+shift+P (Windows) หรือ Command+shift+P (Mac) เพื่อเปิด command menu
– search หา ‘Show Coverage’ และกดเลือกเพื่อเปิดแท็บ Coverage
– กด reload page และเมื่อเพจโหลดเรียบร้อยแล้ว กดวงกลมสีแดงเพื่อหยุด
– หลังจากนั้นก็จะแสดง CSS และ JS ที่ถูกเรียกในหน้านี้ทั้งหมด ส่วนที่เป็นสีแดงๆก็คือ โค้ดส่วนที่ไม่ถูกใช้ โดยเราสามารถกดเข้าไปที่ url เพื่อเปิดไฟล์และดูโค้ดด้านในได้ด้วย ทำให้เราสามารถจัดการทั้ง CSS และ JS ได้อย่างมีประสิทธิภาพมากขึ้น ^ ^
- Full-page screenshots
มาถึงปัญหาที่ชาว dev ต้องเจอกันบ่อยๆ คือ บางทีเรา inspect element เพื่อแก้ design แล้วต้องส่งไปให้ developer อีกคนดู เราก็ต้องไปโหลดโปรแกรมหรือ extension มาเพื่อแคปหน้า screen ทั้งหน้า ยิ่งบางทีเป็นแบบ mobile view ต้องเลื่อนลงมาถึงด้านล่างสุดก็ต้องใช้เวลา แต่ปัญหานี้จะหมดไป โดยการคลิ๊กเพียงไม่กี่ครั้ง
– เปิด Developer tools
– กด Ctrl+shift+P (Windows) หรือ Command+shift+P (Mac) เพื่อเปิด command menu
– search หา ‘Capture full size screenshot’ และกดเลือกบันทึกภาพหน้าจอ
– โดยรูปภาพนะถูกดาวน์โหลดลงมาในเครื่องเราอัติโนมัติทันที โดยถ้าเว็บของเรายาวมากๆ ก็จะแคปมาให้ตั้งแต่บนสุดถึงด้านล่างสุดของเว็บเลย (แต่ถ้าอยากได้แค่ส่วนที่แสดงผลในหน้าจอขณะนั้น ให้เลือก ‘Capture screenshot’ แทนนะจ๊ะ)
- Block requests
หลายๆครั้งเวลาเราเขียนเว็บ เราอาจจะอยากรู้ว่าถ้าเกิด url บางส่วน (เช่น CDN) เกิดโหลดไม่ได้ หรือใช้งานไม่ได้ขึ้นมา หน้าเว็บของเราจะเป็นยังไงหล่ะ? Blog requests ช่วยคุณได้
– เปิด Developer tools
– เข้าไปทีแท็บ Network (ถ้าเป็นหน้าว่างๆ ก็ให้ reload หน้าใหม่นะ)
– คลิ๊กขวาที่ url ที่เราต้องการบล็อก แล้วเลือก ‘Block request URL’
– ปกติแล้วก็จะมีแท็บ Request blocking เพิ่มขึ้นมาด้านล่าง แต่ถ้าหากไม่มี ก็สามารถเพิ่มได้โดยการพิมพ์ ‘Show request blocking’ ใน command menu ได้เลย แล้วก็เลือก Block request URL อีกรอบ แล้วก็จะมี url ที่เราบล็อกเพิ่มขึ้นมาในแท็บแล้ว
– พอเรา reload หน้าเว็บของเราอีกรอบ หน้าเว็บของเราก็จะถูกโหลดโดยปราศจาก url ที่เราบล็อกไว้นั่นเอง~
Note: เราสามารถ block url ที่มี pattern แบบเดียวกันได้ โดยการกดที่เครื่องหมาย ‘+’ แล้วพิมพ์ pattern ที่ต้องการ (เช่น *.css ก็จะบล็อก CSS ทั้งหมด)
- Step over async await*
ในกรณีที่เรามีโค้ดส่วนที่เป็น async หรือ await เราอาจจะต้องมานั่งกดไล่ๆ debug ทีละบรรทัดๆ ซึ่งค่อนข้างเสียเวลาเล็กน้อย แต่ต่อไปนี้หากระหว่าง debug แล้วไปเจอโค้ดส่วนที่เป็น async หรือ await ตัว debugger ก็จะไล่ทีละบรรทัดให้โดยอัติโนมัติเลยแหละ > <
- Unified Command Menu
ตรงนี้เป็นการอัพเดทของเดิม (ที่เราเองไม่เคยใช้ด้วยสิ) จากที่เมื่อก่อนหากต้องทำ action อะไรซํกอย่าง เช่นการเปิดไฟล์ ก็ต้องใช้ short cut แบบนึง หรือจะข้ามไปที่โค้ดบรรทัดนู้น ก็ต้องใช้อีก short cut นึง แต่ตอนนี้สามารถเรียกคำสั่งทั้งหมดผ่านเมนูได้แล้วจ้า! โดยตัวอักษรด้านหน้าสุดของกล่องข้อความ จะเป็นตัวบอกว่าเมนูปัจจุบันเป็นเมนูแบบไหน
‘>’ หมายถึง การรัน command
‘…’ หมายถึง การเปิดไฟล์
‘:’ หมายถึง ไปยังบรรทัดต่างๆในไฟล์ที่ถูกเลือก
‘@’ หมายถึง การไปยังสัญลักษณ์ (Symbol) ในไฟล์ที่ถูกเลือก
‘!’ หมายถึง การรัน snippet
Note: สามารถพิมพ์ ‘?’ เพื่อดูความหมายของแต่ละตัวอักษรได้ด้วยนะ
เป็นยังไงกันบ้างกับอัพเดทล่าสุดของ Google chrome หลายๆอย่างก็ทำให้เราได้ทำงานง่ายขึ้น คงต้องรอดูกันว่ารอบหน้าจะมีอะไรให้เราดูบ้าง เนื่องจากยังอยู่ในสังเวียน web developer ได้ไม่นาน อาจจะมีข้อมูลผิดเพี้ยนหรือพลาดไปบ้าง ยังไงถ้ามีอะไรแนะนำหรือติชม ก็สามารถคอมเม้นต์ทิ้งไว้ได้เลยนะครับ
ขอให้ทุกคนสนุกกับการโค้ด แล้วเราจะโค้ดไปด้วยกัน ^ ^
*สามารถดูเนื้อหาต้นฉบับและตัวอย่าง code ในส่วนของ ‘Step over async await’ ได้ที่ What’s New In DevTools (Chrome 59)
Priefy Dev. 