ความลับของเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์

1. ใน Console มีความสามารถมากกว่าแค่ log()

• ตัวเลือกการกรอง

• {} : แสดงค่าตัวแปร/ชื่อตัวแปรพร้อมกัน

• warn/info/error() : ระดับของล็อก

• assert() : แสดงผลเฉพาะเมื่อเข้าเงื่อนไขที่กำหนด

• trace() : ใครเป็นคนเรียกใช้

• group() : จัดกลุ่มข้อความเพื่อให้ขยาย/ย่อได้

• table() : แสดงข้อมูลในรูปแบบตาราง

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

   return {url: a.href, text: a.innerText}

  })

2. ทิ้งล็อกได้โดยไม่ต้องเข้าถึงซอร์สโค้ด

• Live Expressions : ตรวจสอบค่าตัวแปรที่เปลี่ยนแบบเรียลไทม์

• logpoints : เบรกพอยต์รูปแบบพิเศษที่จะแสดงล็อกเมื่อบรรทัดนั้นถูกเรียกใช้ ในทางเทคนิคคือสามารถเพิ่ม console.log ได้ทุกที่ในเว็บเพจ

3. ทิ้งล็อกไว้นอกเบราว์เซอร์

• VS Code Debugger

4. ทำ code injection กับเว็บไซต์ใดก็ได้ (เบราว์เซอร์ตระกูล Chromium : Edge, Chrome, Brave..)

• Snippets : รันสคริปต์กับเว็บไซต์ปัจจุบัน

• Overrides : เก็บสำเนาของรีโมตสคริปต์ไว้แล้วแก้ไข จากนั้น override ตอนโหลดหน้าเพจ

5. Inspect & Debug ได้ในที่ที่มากขึ้น (เบราว์เซอร์ตระกูล Chromium)

• ตระกูล Electron รองรับทั้งหมด : GitHub Desktop, VS Code, แม้แต่ Developer Tools ของเบราว์เซอร์เองก็ยังดีบักด้วย Developer Tools ได้

• MS Edge Tools for VS Code

6. ความลับสกปรกต่างๆ

• ผู้คนใช้เครื่องมือสำหรับนักพัฒนาแค่บางส่วนเท่านั้น น่าจะเพราะเอกสารอธิบายยังไม่เพียงพอ จึงใช้เวลามากในการทำเอกสาร แต่ดูเหมือนนั่นก็ไม่ใช่คำตอบ

• เครื่องมือสำหรับนักพัฒนายิ่งซับซ้อนขึ้นเรื่อยๆ และทำให้คนถูกฟีเจอร์จำนวนมากถาโถม จะมีวิธีปรับปรุงไหม ?

 → Edge กำลังจะนำ Focus Mode มาใช้ แทนที่จะโชว์ทุกฟีเจอร์ ก็จะแสดงเฉพาะเครื่องมือที่จำเป็นตาม use case

 → กำลังทำ Informational Overlays อยู่เช่นกัน คือให้ความช่วยเหลือที่ดูได้ทันทีภายในเครื่องมือสำหรับนักพัฒนา

• ยังมีช่องว่างอยู่ระหว่างการเขียนโค้ดกับการดีบักสิ่งที่สร้างเสร็จแล้ว

 → จะทำอย่างไรให้สิ่งที่แก้ในเครื่องมือสำหรับนักพัฒนาสะท้อนกลับไปยังโค้ดได้ ?

 → วิธีหนึ่งคือแทนที่เครื่องมือสำหรับนักพัฒนาด้วย VSCode และเมื่อใช้เครื่องมือก็ให้แก้ไฟล์บนฮาร์ดไดรฟ์โดยตรง

 → อีกวิธีคือทำเป็นส่วนหนึ่งของส่วนขยาย VSCode เพื่อให้เลือกได้ว่าแม้จะแก้ผ่านเครื่องมือสำหรับนักพัฒนา ก็ยังสามารถแก้ไฟล์บนดิสก์ได้

7. คุณคือทั้ง Audience และ Client ของเครื่องมือสำหรับนักพัฒนา

 → ส่งฟีดแบ็กผ่าน Report a Bug / Request a Feature เป็นต้น

[galadbran]

ในอีกมุมหนึ่งคือ ผู้ใช้กับนักพัฒนามีเครื่องมือชุดเดียวกัน ดังนั้นเว็บแอปจึงน่าจะต้องใส่ใจกับการรับมือผู้ใช้ที่มีเจตนาไม่ดีและใช้วิธีเลี่ยงต่าง ๆ มากขึ้น

[laeyoung]

บทความเกี่ยวกับ console.log()

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

ถึงจะมีฟีเจอร์ดี ๆ อยู่ แต่ดูเหมือนว่าการมีหรือไม่มีตัวอย่างที่ดีในเอกสารประกอบจะเป็นปัจจัยสำคัญในการตัดสินใจครั้งใหญ่