บทความ IT เจ๋งๆ

Chrome Developer Tools และ Extensions ต่างก็มีประโยชน์และสำคัญอย่างยิ่งสำหรับ Web Developers บทความนี้จึงได้รวบรวม Chrome DevTools, Extensions และเคล็ดลับสำหรับ Web Developers เพื่อช่วยปรับ Workflow ของคุณให้มีประสิทธิภาพ และเร่ง Development Process ของคุณ

EXTENSIONS:

• Adblock Plus: Extension นี้จะ Block โฆษณาบน Website ที่คุณเยี่ยมชม โดยมันจะขจัดสิ่งรบกวน แม้มันจะไม่ได้มีไว้สำหรับ Developers โดยเฉพาะ แต่มันก็เป็น Tool ที่มีประโยชน์เช่นกัน
• React Dev Tools / Vuejs Devtools: Extensions เหล่านี้มีความจำเป็นสำหรับการ Debug React หรือ Vue Applications คุณสามารถตรวจสอบ Components, ดู Props และ State รวมทั้งอื่น ๆ อีกมากมาย
• Redux Dev Tools: หาก App ของคุณใช้ Redux เชื่อว่า Tool นี้จะเพิ่ม Redux Tab แยกต่างหากใน Dev Tools ซึ่งจะช่วยให้คุณ Debug State ของมันได้
• Dark Mode: Extension นี้จะช่วยเปิดใช้งาน Dark Mode บน Websites ที่ไม่มี Mode นี้ได้ เช่น Google Calendar, Google Sheets เป็นต้น
• JSON Formatter: มันจะช่วยทำให้ Raw JSON Data สามารถอ่านได้ง่ายขึ้น หากคุณมี JSON File ที่ถูก Compress คุณสามารถ Paste มันลงได้ที่นี่ และมันจะจัด Format ให้สวยงาม
• ColorZilla: ColorZilla จะช่วยให้คุณเลือกสีที่ต้องการได้อย่างแม่นยำ มันเปรียบเป็น Color Picker ใน Browser ของคุณ
• WhatFont: มันคล้ายกับ ColorZilla โดย Extension นี้จะช่วยให้คุณเลือก Font จาก Website ได้ หากคุณเห็น Font ใน Website อื่นที่คุณชอบและต้องการใช้พวกมันในการออกแบบ คุณสามารถเลือก Font นั้นได้ด้วย Extension นี้
• Screenshot Tool: Screenshot Tool จะช่วยให้คุณจับภาพ Screenshots ได้อย่างรวดเร็วด้วยความละเอียดที่คุณต้องการ มันมีประโยชน์อย่างยิ่งในกรณีที่คุณต้องการจับภาพ Screenshots ใน Projects ของคุณเพื่อนำไปใส่ใน Portfolio ของคุณ

Developer Tools:

ตอนนี้ เรามาดูเครื่องมือ Developer Tools ใน Browser ของเรากัน คุณสามารถเข้าถึง Tools เหล่านี้ได้ด้วยการ คลิกขวาแล้วเลือก "inspect element" หรือกด fn+f12

Tabs หลัก ๆ ที่คุณน่าจะใช้งานกันบ่อย ๆ ก็คือ

• Elements: Tab นี้เป็นศูนย์ควบคุมของ HTML และ CSS คุณสามารถตรวจสอบ Structure ของ Web Page และดู CSS Styles ที่ใช้กับ Elements ต่าง ๆ ได้ นอกจากนี้ คุณยังสามารถแก้ไขได้โดยตรงใน Tab นี้และดูผลลัพธ์แบบ Real-Time บน Screen ได้อีกด้วย

• Console: Tab นี้ใช้สำหรับโต้ตอบกับ JavaScript คุณสามารถ Run JavaScript Code ได้โดยตรงใน Tab นี้ได้ แต่ส่วนใหญ่มันจะถูกใช้เพื่อตรวจสอบ Errors หรือ Log Messages ขณะทำการ Debug Application

• Sources: หากคุณต้องการ Debug JavaScript Code ของคุณอย่างละเอียดมากขึ้น คุณสามารถใช้ Sources Tab เพื่อ Set Breakpoints วิธีนี้ช่วยให้คุณหยุดการทำงานของ Code และ Run Code ทีละบรรทัดได้

• Network: Tab นี้จะแสดง Resource ทั้งหมดที่ Website โหลด เช่น HTML, CSS, JS Files, Images, Icons เป็นต้น

• Application: นี่เป็น Tab ที่มีประโยชน์อีก Tab หนึ่งในการตรวจสอบและจัดการ App Storage คุณสามารถตรวจสอบ Cookies, Local Storage Items, Sessions และ Background Services อย่างเช่น Background Cache, Services Workers ฯลฯ

• Performance: Tab นี้จะช่วยให้คุณสร้าง Profile Load Times และ Identify Bottlenecks ของ Site ได้ หากคุณต้องการเพิ่มประสิทธิภาพความเร็วของ Website นี่คือหนึ่งในจุดแรกที่คุณควรพิจารณา

• Memory: ใช้ Memory Tab สำหรับติดตาม Memory Usage และระบุ Memory Leaks ได้

• Lighthouse: Lighthouse Tab เป็น Auditing Tool ที่มีประโยชน์ซึ่งคุณสามารถ Run Audits ในเรื่องของ Performance, Accessibility และ SEO Optimization

• Performance Insights: Tab นี้ยังเป็น Feature ทดลองอยู่ ซึ่งคุณสามารถรับข้อมูลเชิงลึกที่ละเอียดยิ่งขึ้นเกี่ยวกับการเพิ่มประสิทธิภาพการทำงานได้ Tab นี้จะวิเคราะห์ Loading Process ของคุณ, ระบุ Elements หรือ Tasks เฉพาะบางอย่างที่อาจทำให้ทุกอย่างช้าลง
• Tabs อื่นๆ:
  • Redux + Adblock Plus: Tabs เหล่านี้ ถูกเพิ่มโดย Extensions ที่เราติดตั้ง Redux Tab จะมีประโยชน์อย่างมากเมื่อคุณทำงานกับ Application ที่ใช้ Redux State
  • Recorder: Tab นี้จะช่วยให้คุณ Capture และ Replay การโต้ตอบของ User เพื่อระบุ Errors หรือ Automate Testing

PRO TIPS:

นี่คือเคล็ดลับบางส่วนเพื่อปรับปรุง Development Workflow ของคุณ:

• Responsive Design: หากต้องการทดสอบ Website ของคุณใน Screen Sizes และ Resolutions ต่าง ๆ คุณสามารถคลิกที่ Icon ด้านบนซ้าย และเลือก Device Resolution ที่ต้องการ หรือป้อน Resolution ที่คุณกำหนดเอง

• Select an Element: Icon อื่นที่อยู่ใกล้ ๆ กันนั้น จะช่วยให้คุณเลือก Element จาก Screen ได้โดยเลื่อนเมาส์ไปเหนือ Element นั้น
• Network Throttling: หากคุณต้องการตรวจสอบว่า Website ของคุณทำงานอย่างไรเมื่อมี Connection ที่ช้า คุณสามารถตั้งค่า Network Throttling ให้ช้าลงเป็น 3g หรือสร้าง Rules ที่กำหนดเองใน Network Tab
• Conditional Breakpoints: คุณสามารถใช้ Conditional Breakpoints เพื่อหยุดการทำงานของ Code เมื่อตรงตามเงื่อนไขที่กำหนดเท่านั้น
  1. กำหนด Breakpoint ในบรรทัดของ Code ที่คุณต้องการตรวจสอบ
  2. คลิกขวาที่ Breakpoint (โดยปกติจะเป็นวงกลมสีแดงถัดจากหมายเลขบรรทัด)
  3. เลือก “Add condition…” จาก Context Menu

4. ป้อน JavaScript Expression ที่ต้องเป็น True สำหรับ Breakpoint เพื่อหยุดชั่วคราว ตัวอย่างเช่น คุณอาจตั้งเงื่อนไขเป็น error === true เพื่อหยุดชั่วคราว เฉพาะเมื่อเกิด Error

• Workspaces (Chrome Specific): คุณสามารถแก้ไข Code ใน Code Editor และดูการเปลี่ยนแปลงที่แสดงใน Browser ของคุณได้ทันทีด้วย Workspaces หากคุณต้องการเปิดใช้งาน Workspaces ให้ทำตามขั้นตอนดังนี้:

1. เปิด Chrome DevTools (คลิกขวาที่ใดก็ได้บน Webpage แล้วเลือก “Inspect” หรือกด F12)
2. ไปที่ Sources Tab
3. ที่มุมบนขวา ให้คลิกที่ Folder Icon ที่มีเครื่องหมายบวก (+) ข้าง ๆ เพื่อเปิดใช้งาน Workspaces (หรือ Drag & Drop Project Folder ของคุณที่นี่)

4. Dialog Box จะปรากฏขึ้น ให้คลิก "Add folder" และเลือก Directory ในเครื่องของคุณที่จัดเก็บ Project Files ของคุณ การดำเนินการนี้จะสร้าง Connection ระหว่าง Code Editor และ DevTools
5. ตอนนี้การเปลี่ยนแปลงใด ๆ ที่คุณทำกับ Code ใน Editor ที่คุณชอบ (เช่น Visual Studio Code, Sublime Text) จะแสดงใน Browser Window ที่อยู่ภายใน DevTools ทันที

BONUS TIP: คุณสามารถประหยัดเวลาได้ด้วยการใช้ Keyboard Shortcuts คุณสามารถเข้าถึง Command Menu ได้โดยการกด Ctrl+Shift+P (Windows) หรือ Cmd+Shift+P (Mac) ซึ่งจะช่วยให้คุณค้นหาและ Execute DevTools ที่ต้องการได้อย่างรวดเร็วโดยใช้ Keyboard Shortcuts

ที่มา: https://levelup.gitconnected.com/

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

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

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

• 5 Web Development Projects ที่จะช่วยให้ Portfolio น่าสนใจยิ่งขึ้น
• 9 เทคนิคการใช้ Python Function ที่มีประโยชน์ต่อการทำงานของคุณ
• 16 APIs น่าสนใจ ที่ Developer สามารถนำไปใช้งานได้