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

<p>1. ใน Console มีความสามารถมากกว่าแค่ `log()`<br /> - ตัวเลือกการกรอง<br /> - {} : แสดงค่าตัวแปร/ชื่อตัวแปรพร้อมกัน<br /> - `warn/info/error()` : ระดับของล็อก<br /> - `assert()` : แสดงผลเฉพาะเมื่อเข้าเงื่อนไขที่กำหนด<br /> - `trace()` : ใครเป็นคนเรียกใช้ <br /> - `group()` : จัดกลุ่มข้อความเพื่อให้ขยาย/ย่อได้ <br /> - `table()` : แสดงข้อมูลในรูปแบบตาราง <br /> - `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br /> &nbsp;&nbsp;`$$('a').map(a =&gt; {`<br /> &nbsp;&nbsp;&nbsp;`return {url: a.href, text: a.innerText}`<br /> &nbsp;&nbsp;`})`<br /> <br /> 2. ทิ้งล็อกได้โดยไม่ต้องเข้าถึงซอร์สโค้ด<br /> - Live Expressions : ตรวจสอบค่าตัวแปรที่เปลี่ยนแบบเรียลไทม์<br /> - logpoints : เบรกพอยต์รูปแบบพิเศษที่จะแสดงล็อกเมื่อบรรทัดนั้นถูกเรียกใช้ ในทางเทคนิคคือสามารถเพิ่ม `console.log` ได้ทุกที่ในเว็บเพจ<br /> <br /> 3. ทิ้งล็อกไว้นอกเบราว์เซอร์ <br /> - VS Code Debugger<br /> <br /> 4. ทำ code injection กับเว็บไซต์ใดก็ได้ (เบราว์เซอร์ตระกูล Chromium : Edge, Chrome, Brave..)<br /> - Snippets : รันสคริปต์กับเว็บไซต์ปัจจุบัน <br /> - Overrides : เก็บสำเนาของรีโมตสคริปต์ไว้แล้วแก้ไข จากนั้น override ตอนโหลดหน้าเพจ <br /> <br /> 5. Inspect &amp; Debug ได้ในที่ที่มากขึ้น (เบราว์เซอร์ตระกูล Chromium)<br /> - ตระกูล Electron รองรับทั้งหมด : GitHub Desktop, VS Code, แม้แต่ Developer Tools ของเบราว์เซอร์เองก็ยังดีบักด้วย Developer Tools ได้<br /> - MS Edge Tools for VS Code <br /> <br /> 6. ความลับสกปรกต่างๆ<br /> - ผู้คนใช้เครื่องมือสำหรับนักพัฒนาแค่บางส่วนเท่านั้น น่าจะเพราะเอกสารอธิบายยังไม่เพียงพอ จึงใช้เวลามากในการทำเอกสาร แต่ดูเหมือนนั่นก็ไม่ใช่คำตอบ <br /> - เครื่องมือสำหรับนักพัฒนายิ่งซับซ้อนขึ้นเรื่อยๆ และทำให้คนถูกฟีเจอร์จำนวนมากถาโถม จะมีวิธีปรับปรุงไหม ?<br /> &nbsp;→ Edge กำลังจะนำ Focus Mode มาใช้ แทนที่จะโชว์ทุกฟีเจอร์ ก็จะแสดงเฉพาะเครื่องมือที่จำเป็นตาม use case <br /> &nbsp;→ กำลังทำ Informational Overlays อยู่เช่นกัน คือให้ความช่วยเหลือที่ดูได้ทันทีภายในเครื่องมือสำหรับนักพัฒนา <br /> - ยังมีช่องว่างอยู่ระหว่างการเขียนโค้ดกับการดีบักสิ่งที่สร้างเสร็จแล้ว <br /> &nbsp;→ จะทำอย่างไรให้สิ่งที่แก้ในเครื่องมือสำหรับนักพัฒนาสะท้อนกลับไปยังโค้ดได้ ?<br /> &nbsp;→ วิธีหนึ่งคือแทนที่เครื่องมือสำหรับนักพัฒนาด้วย VSCode และเมื่อใช้เครื่องมือก็ให้แก้ไฟล์บนฮาร์ดไดรฟ์โดยตรง<br /> &nbsp;→ อีกวิธีคือทำเป็นส่วนหนึ่งของส่วนขยาย VSCode เพื่อให้เลือกได้ว่าแม้จะแก้ผ่านเครื่องมือสำหรับนักพัฒนา ก็ยังสามารถแก้ไฟล์บนดิสก์ได้<br /> <br /> 7. คุณคือทั้ง Audience และ Client ของเครื่องมือสำหรับนักพัฒนา <br /> &nbsp;→ ส่งฟีดแบ็กผ่าน Report a Bug / Request a Feature เป็นต้น </p>

[galadbran]

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

[laeyoung]

<p>บทความเกี่ยวกับ console.log()<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

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