COOL IT IDEAS AND STUFF

See the original english version Click here!

Chrome Dev Tools เป็นหนึ่งในเครื่องมือที่ Web Developers ใช้กันมากที่สุด แต่มันก็มีบาง Features ที่ Developers หลายคนยังไม่รู้จักหรือรู้ว่ามันมีอยู่ด้วย และบทความนี้จะมาแนะนำ 5 Features ลับของ Google Chrome ที่ Developer ทุกคนควรรู้จัก

1. CSS Overview

CSS Overview จะให้ข้อมูลโดยสรุปของ Styles ทั้งหมดที่ถูกใช้งานใน Web Page

มันประกอบด้วย ข้อมูลโดยละเอียดเกี่ยวกับ Colors, Fonts, Media Queries และ Unused Declarations สำหรับ Feature นี้ จะมีประโยชน์อย่างยิ่ง เมื่อคุณทำการปรับเปลี่ยน CSS เป็น UI และคุณก็ไม่จำเป็นต้องใช้เครื่องมือของ 3^rd Party อย่าง Color Picker อีกต่อไป

วิธีเปิดใช้งาน Feature นี้

• บน Google Chrome คลิก View -> Developer -> Developer Tools
• เปิด Setting
• คลิกที่ Experiments Tab
• ทำการ Enable CSS Overview
• ปิด DevTools Window แล้วเปิดมันใหม่อีกครั้ง
• Tab อันใหม่จะปรากฏใน DevTools เป็น CSS Overview

แม้ว่า CSS Overview Panel นี้จะยังเป็น Feature ที่อยู่ในขั้นทดลอง แต่เชื่อว่า คุณจะไม่ปิด Panel นี้อีกเลยเมื่อได้ใช้งานมันแล้ว Feature นี้มีประโยชน์อย่างเหลือเชื่อและทำให้ CSS ของคุณทำงานได้ง่ายขึ้นมาก

2. CSP Violations

CSP Violation Breakpoints ของ Chrome DevTools จะตรวจจับข้อยกเว้นที่เป็นไปได้ที่เกี่ยวข้องกับ CSP Violations และชี้ให้เห็นใน Code

การเปิดใช้งาน Feature นี้ จะเพิ่มการรักษาความปลอดภัยอีกชั้นหนึ่งให้กับ Application ของคุณ และลดช่องโหว่ต่าง ๆ เช่น Cross-Site Scripting (XSS)

วิธีเปิดใช้งาน Feature นี้

Developers สามารถเปิดใช้งาน CSP Violation Breakpoints ที่ได้จาก “Sources” Tab ตามที่กล่าวไว้ด้านล่าง

• ไปที่ Experiments Tab ผ่าน Chrome Developer Tools 
• Check ที่ Show CSP Violations view Option
• ปิด DevTools Window แล้วเปิดใหม่อีกครั้ง
• ภายใต้ CSP Violations Breakpoints, ให้ Check ที่ Trusted Type Violations และ Violation Types เพื่อเปิดใช้งาน Feature

Chrome DevTools จะแสดงรายละเอียดเพิ่มเติมที่จะต้องแก้ไข, ตรงด้านหน้าของ Code Block ที่มีช่องโหว่ที่ถูกตรวจพบ

3. New Font Editor Tools

คุณรู้หรือไม่ว่าคุณสามารถเปลี่ยน Font ทั้งหมดบน Website ของคุณได้ทันที และดูว่ามันมีลักษณะหน้าตาเป็นอย่างไร โดยที่คุณไม่ต้องแตะ Code แต่อย่างใด

Chrome DevTools มี Font Editor Tool ที่กำลังอยู่ในช่วงทดลอง ที่สามารถใช้เพื่อเปลี่ยน Font Settings ได้ คุณสามารถเปลี่ยน Font Family, Sizes, Weight, Height Spaces ได้ด้วยเครื่องมือนี้ และดูการเปลี่ยนแปลงแบบ Real-Time ได้

วิธีเปิดใช้งาน Feature นี้

• ไปที่ Experiments Tab ผ่าน Chrome Developer Tools
• Check ที่ Enable New Font Editor Tools within Styles Pane
• ปิด DevTools Window แล้วเปิดใหม่อีกครั้ง
• เลือก HTML Element ซึ่งรวมถึง Font Properties ที่คุณต้องการเปลี่ยน
• จากนั้น คุณจะสังเกตเห็น Font Editor icon ใน Styles pane

4. Dual Screen Mode

เมื่อเปิดใช้ Dual Screen Mode คุณจะสามารถ Debug Web Application บน Dual-Screen Devices ภายในตัว Chrome DevTools emulator ได้

Feature นี้ ถือเป็นตัวช่วยสำคัญของ Developers เมื่อมีการ Debug Dual-Screen Devices อย่าง Surface Duo 

วิธีเปิดใช้งาน Feature นี้

• ไปที่ Experiments Tab ผ่าน Chrome Developer Tools
• เช็คที่ Emulation: Support dual-screen mode 
• ปิด DevTools Window แล้วเปิดใหม่อีกครั้ง
• เปิด Web page ที่คุณต้องการจะ Test โดยใช้ the Toggle Device Toolbar option ที่มุมบนขวาของ DevTool Window
• สลับ Emulator เป็น Surface Duo device  (หรือ Device อื่น ๆ ที่มีอยู่) 
• จากนั้น คลิกที่ Toggle dual-screen mode เพื่อจำลอง Web Application ของคุณใน Dual Screen Mode

5. Full Accessibility Tree View

ด้วย Chrome DevTools Accessibility Tree, คุณจะสามารถตรวจสอบ Object ที่ช่วยสำหรับการเข้าถึง ที่ถูกสร้างขึ้นสำหรับ DOM Element แต่ละรายการ

Feature นี้ค่อนข้างคุ้นเคยกับ Inspect Elements Tab แต่มันช่วยให้คุณสามารถเจาะลึกและสำรวจรายละเอียดที่ช่วยสำหรับการเข้าถึง เพิ่มเติมของ Web Application ของคุณได้

วิธีเปิดใช้งาน Feature นี้

• ไปที่ Experiments Tab ผ่าน Chrome Developer Tools
• เช็คที่ Full accessibility tree view in the Elements pane
• ปิด DevTools Window แล้วเปิดใหม่อีกครั้ง
• สลับ Elements view mode ไปเป็น Full Accessibility Tree View ด้วยการคลิกปุ่ม new accessibility ที่แสดงใน Elements panel

สร้างด้วย Independent Components เพื่อ Speed และ Scale

Apps ที่มีขนาดใหญ่ ขอแนะนำให้สร้าง Independent Components ก่อน แล้วรวบรวมเป็น Features และ Applications มันทำให้การ Develop เร็วขึ้นและช่วยให้ทีมสร้าง Application ที่สอดคล้องกันและสามารถปรับขนาดได้ (Consistent & Scalable) มากขึ้น

OSS Tools Bit ที่มอบ Developer Experience ที่ยอดเยี่ยม สำหรับการสร้าง Independent Components และ Composing Applications หลายๆ ทีมเริ่มต้นด้วยการสร้าง Design Systems หรือ Micro Frontends ผ่าน Independent Components ลองดูจากที่นี่

ที่มา:  https://blog.bitsrc.io/

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

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

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

• 4 เกมสนุก ๆ ที่ช่วยฝึกฝนทักษะ Python ได้แบบฟรี ๆ
• IT & Digital Events in January 2022 
• 5 เคล็ดลับ ที่ช่วยให้คุณสร้าง App UI ที่ทันสมัยยิ่งขึ้น