← กลับไปยังคุณสมบัติ
Free

บันทึก Console

จับผลลัพธ์ Console ทั้งหมดในแผงลอยบนหน้าเว็บ

แผงลอยเบาแทน DevTools

ตัวอย่างสด
example.com/app
All Errors (2) Warn (1) Info (1) Log (3) Clear
LOG App initialized 10:24:01
INFO User session restored — ID: u_8f3k2 10:24:01
LOG Fetching /api/dashboard... 10:24:02
WARN Deprecated API endpoint used: /api/v1/stats 10:24:02
LOG Dashboard loaded (238ms) 10:24:02
ERR TypeError: Cannot read property 'map' of undefined 10:24:03
at Dashboard.render (app.js:142:18)
at processChild (react-dom.js:1284:14)
ERR Failed to load resource: 404 /api/avatar.png 10:24:03
คุณสมบัติหลัก

สตรีมสด

Console messages appear แบบเรียลไทม์ as they're logged. See page initialization logs, API response handling, user interaction events, and error messages — all streaming live in the floating panel.

สีตามประเภท

Errors in red, warnings in amber/yellow, info in blue, and standard logs in white/gray. Instantly distinguish between a critical error and a routine log message just by color.

Stack Trace

JavaScript errors include the full stack trace with file names, function names, and line numbers. คลิก file reference to identify exactly where the error originated โดยไม่ต้อง opening DevTools.

ตัวกรอง

Filter buttons at the top let you show/hide specific message types: All, Errors only, Warnings only, Info only, Logs only. The count badge on each filter shows how mใดก็ได้ messages of that type exist.

เวลา

ทุก message shows the time it was logged (HH:MM:SS format). Track the sequence of events, identify performance issues (how long between API call and response), and correlate messages with user actions.

ล้าง

Clear all messages to start fresh, or keep accumulating as you interact with หน้า. The panel shows the total message count and can be minimized when not needed.

กรณีการใช้งานทั่วไป

แก้ไขเร็วไม่ต้อง DevTools

Need เพื่อดู console output while keeping the full page visible? Console Logger lets you monitor logs โดยไม่ต้อง the DevTools panel taking up screen space. Perfect on smaller screens or during presentations.

ดูผล API

If your JavaScript logs API responses, Console Logger shows them แบบเรียลไทม์. See request/response data โดยไม่ต้อง switching between หน้า and DevTools.

จับข้อผิดพลาดเงียบ

Some JavaScript errors fail silently — no visible UI change, but an error in the console. Console Logger makes these visible บนหน้า so you notice them during normal browsing.

แก้ไขระหว่างสาธิต

During a live demo, keep the Console Logger panel visible in a corner. If something goes wrong, you can immediately see the error message โดยไม่ต้อง interrupting the demo to open DevTools.

ข้อผิดพลาดบุคคลที่สาม

Third-party scripts (analytics, chat widgets, ad networks) often throw errors or warnings. Console Logger captures these so you can monitor the health of external dependencies.

วิธีใช้งาน
1

เปิดใช้งาน

เปิด DevSuite Pro dock ลอย and click the Console Logger icon. A floating panel appears and immediately starts capturing console output.

2

ใช้งานหน้า

Use หน้า normally — click buttons, navigate, submit forms. Console messages appear in the panel as they're logged by หน้า's JavaScript.

3

กรอง

Use the filter buttons to show only errors, warnings, or logs. The count badges show how mใดก็ได้ messages exist for each type.

4

อ่าน Stack Trace

For error messages, expand the stack trace เพื่อดู the file and line number where the error occurred. Use this to identify the source of the bug.

5

ล้าง

Click "Clear" to reset the panel, or deactivate the tool to close it. No trace is left บนหน้า.

พร้อมที่จะลองหรือยัง? บันทึก Console?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox