COOL IT IDEAS AND STUFF

9 Hidden Features of Chrome DevTools

23-Jul-21

คัมภีร์เทพ IT

See the original english version Click here!

 

Web Developers ไม่ต้องการอะไรมากไปกว่าการค้นหา Extensions ที่น่าทึ่งที่ช่วยทำให้ Development Process รวดเร็วขึ้น หนึ่งใน Tools ดังกล่าวคือ Chrome DevTools เนื่องจากมันมี Features มากมายให้เลือกใช้ตามวัตถุประสงค์ และนี่ก็เป็น 9 Features ที่ซ่อนอยู่ ของ Chrome DevTools ที่คุณอาจไม่เคยลองใช้

1. Controlling Network Speed

Website ของคุณ จะถูกเข้าถึงโดยผู้คนจากทั่วโลกโดยใช้ Devices ที่มีขนาดและ Platforms แตกต่างกัน

คุณสามารถสร้าง Website ที่ตอบสนองได้โดยการใช้ Media Queries ได้ แล้วเรื่อง Network Speed ล่ะ?

ไม่ใช่ Visitors ทุกคนที่จะมี Network Speed เท่ากัน ดังนั้น คุณต้องตรวจสอบว่า Website ของคุณทำงานอย่างไรด้วย Network Speed ที่ต่างกัน

โชคดีที่ DevTools มี Option ในการ Switch ระหว่าง 3 Network Presets:

  • Fast 3G

  • Slow 3G

  • Offline

 

คุณยังสามารถเพิ่ม Profile ที่กำหนดเองได้อีกด้วย

คุณจะสามารถพบกับ Feature นี้ใน Network Tab โดยคลิกไปที่ “No throttling” Dropdown Menu

2. Multi Cursor

DevTools มี Code Editor ที่ยอดเยี่ยมอยู่ในตัว

หากคุณเป็นคนที่แก้ไข CSS หรือ Code ใด ๆ โดยใช้ Tool นี้ คุณน่าจะชอบการรองรับ Multi-Cursor อย่างแน่นอน

การ Set Up สามารถทำได้ง่ายดาย สิ่งที่คุณต้องทำก็คือ กด Ctrl (หรือ Command บน Mac) ค้างไว้ แล้วคลิกบนบรรรทัดที่คุณต้องการให้เกิด Multiple Cursors

คุณยังสามารถ Undo การ Selections ของคุณได้โดยการ กด Ctrl (หรือ Command บน Mac) + U

นอกจากนี้ คุณยังสามารถกด Alt แล้วลากเพื่อให้เกิด Multiple Cursors คุณสามารถดูการใช้งานได้ที่นี่

3. Dark Mode

สำหรับบางคนเชื่อว่า Dark Mode จะช่วยเพิ่มการมองเห็นและลดอาการเมื่อยล้าของดวงตาได้ การใช้ Dark Mode มีข้อดีหลายอย่าง แต่ขณะเดียวกันก็มีข้อเสียด้วย

คงมีหลายคนที่ใช้ Dark Mode ใน App ต่าง ๆ เช่น Twitter หรือ Calculator เป็นต้น และแน่นอนว่าใน DevTools ก็มี Dark Mode เช่นกัน

หากต้องการเปิดใช้งาน Dark Mode ให้เปิดการ Settings โดยคลิกที่ 3 จุดในแนวตั้ง ที่อยู่ตรงมุมขวาของ Screen

จากนั้นไปที่ Preferences > Appearance > Theme แล้วเลือก Dark

4. Command Menu

คุณสามารถเปิด Command Menu ได้อย่างรวดเร็วโดยการกด Ctrl (หรือ Command บน Mac) + Shift + P เมื่อ DevTools ถูกเปิดขึ้นมา

Feature นี้จะมีประโยชน์อย่างมาก หากคุณคุ้นเคยกับ Command Palette ของ VS Code

คุณสามารถลบ > แล้วแทนที่ด้วย ? เพื่อดู Features ทั้งหมดที่มีอยู่ใน Menu นี้

5. Detecting Unused Code

JavaScript Apps สมัยใหม่ มีความซับซ้อนมากขึ้นเรื่อย ๆ และต้องอาศัย 3rd Party Libraries จำนวนมาก

มักจะมี Code บางส่วนที่ไม่ถูกใช้งานและถูก Render ซ้ำ ๆ อยู่เสมอ

DevTools จะช่วยคุณค้นหา Code ที่ซ้ำซ้อนที่อาจเป็นตัวสร้างปัญหาในเรื่อง Site Speed ของคุณโดยไม่จำเป็น

คุณสามารถคลิก 3 จุดในแนวตั้ง ที่มุมบนขวาของ DevTools จากนั้นคลิก More Tools แล้วเลือก Coverage

สิ่งที่คุณต้องทำตอนนี้ก็คือ Reload Page จากนั้น Panel ใหม่ที่ปรากฏขึ้นจะแสดง JavaScript Code ที่ไม่ได้ถูกใช้งาน

คุณสามารถดูจำนวน bytes ทั้งหมดและจำนวน bytes ที่ไม่ถูกใช้งาน พร้อมทั้ง Visual Usage Bar

6. Auto-Start

หาก Browser หลักที่คุณใช้ เป็น Browser ที่ไม่มี Tools ดังกล่าว และคุณใช้ Chrome สำหรับ Devtools เท่านั้น เชื่อว่า Feature นี้จะมีประโยชน์กับคุณอย่างน่าเหลือเชื่อ

มี Global Option ภายใต้การตั้งค่า DevTools เพื่อให้เปิด auto-open DevTools for popups

อย่างไรก็ตาม วิธีที่ดีกว่าในการทำเช่นเดียวกันนี้ ก็คือ การเริ่ม DevTools ไม่ใช่แค่บน Popups แต่ด้วย Chrome Browser เอง

คุณสามารถทำได้โดยเพิ่มบรรทัดต่อไปนี้ เป็น Property บน Google Chrome

และสำหรับผู้ใช้งาน Mac

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ Options อื่น ๆ ในการเปิดใช้งาน DevTools

7. Color Picker

Color Picker เป็นวิธีที่ยอดเยี่ยมในการเลือกสีที่คุณต้องการและสามารถเพิ่มลงใน CSS ของ Site ของคุณได้อย่างง่ายดาย

ใน DevTools มี Color Picker และการเข้าถึงมันก็เป็น Process ที่ตรงไปตรงมาเป็นอย่างมาก

คุณสามารถไปที่ Elements Tab จากนั้นเลือก Styles Panel เพื่อดู CSS

คุณเพียงคลิกไปที่ Color Square (ไม่ใช่ส่วนที่เป็น Value) แล้ว Color Picker ก็จะปรากฏขึ้น

นอกจากนี้ Color Picker ยังมีความสามารถในการ Convert ระหว่าง Color Modes ต่าง ๆ เช่น จาก HEX เป็น RGBA อีกด้วย

8. Mobile Emulator

กว่า 60% ของการค้นหาผ่าน Online ทั้งหมด ถูกดำเนินการผ่าน Mobile Devices ทำให้ Responsive Web Design เป็นส่วนสำคัญอย่างมากในการพัฒนา Website

โชคดีที่ DevTools มี Mobile Emulator ซึ่งมีความสูงและความกว้างที่กำหนดไว้ล่วงหน้า ซึ่งรองรับ Mobile Devices ยอดนิยม เช่น iPhone, Pixel, Surface และ iPad

ให้คุณเปิด DevTools แล้วคลิก Toggle Device Toolbar ตามที่แสดงอยู่ด้านบน

คุณยังสามารถเลือกระหว่าง Mid-tier หรือ Low-tier Mobile จาก “No Throttling” Drop-Down Menu

นอกจากนี้ การลาก Handles to resize the viewport ก็เป็นอีกทางเลือกหนึ่งที่สะดวกในการรับ Dimensions ที่แน่นอนที่คุณต้องการ

9. Breakpoints

เคยสงสัยหรือไม่ว่า Media Queries Sites อย่างเช่น YouTube มีอยู่กี่ Sites? คุณสามารถตรวจสอบได้ด้วยการเปิดใช้งาน Option เพื่อดู Media Queries

คุณเพียงคลิกที่ 3 จุดในแนวตั้ง ตามที่แสดงในรูปด้านบน แล้วเปิดใช้งาน Media Queries Visibility

คุณจะเห็น Panel ใหม่ที่แสดง Media Query Breakpoints ต่าง ๆ ซึ่งคุณสามารถคลิกเพื่อนำไปใช้

นอกจากนี้ คุณยังสามารถ Set Breakpoints ใน JavaScript Code ของคุณได้อย่างง่ายดายอีกด้วย

วิธีหนึ่งในการทำเช่นนี้ ก็คือ การเขียน Debugger ใน Code ของคุณ ซึ่งจะหยุดการทำงานชั่วคราวเมื่อ Debugger ไปถึง

อีกวิธีคือไปที่ Sources Tab ที่มาแล้วตรงไปที่ Code File แล้วค้นหาบรรทัดที่คุณต้องการจะหยุดการทำงานชั่วคราว

จากนั้นคุณต้องคลิกหมายเลขบรรทัด ที่อยู่ทางด้านซ้ายของ Code ซึ่งจะทำให้ Icon สีน้ำเงิน ปรากฏขึ้นบนหมายเลขบรรทัดนั้น

DevTools จะหยุดชั่วคราวก่อนที่ Code บรรทัดนี้จะถูก Execute

ที่มา: https://javascript.plainenglish.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

Categories