← Späť na funkcie
Free

Konzolový záznamník

Konzolový záznamník zachytáva všetok výstup konzoly a zobrazuje ho v plávajúcom paneli priamo na stránke.

Opening browser DevTools just to check console output takes up valuable screen space — especially on smaller screens or when you need to see the full page while monitoring logs. Console Logger provides a lightweight alternative: a floating panel that shows all console output as it happens, overlaid on the page. The panel captures console.log, console.warn, console.error, console.info, and uncaught exceptions with full stack traces. Messages are color-coded (errors in red, warnings in yellow, info in blue, logs in white/gray) and include timestamps for tracking when events occur. Filter buttons let you show only specific message types — show only errors when debugging a crash, or only warnings when looking for deprecation notices. The panel is draggable, resizable, and semi-transparent so it doesn't block too much page content.

Živý náhľad
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
Kľúčové vlastnosti

Live Console Feed

Console messages appear in real-time as they're logged. See page initialization logs, API response handling, user interaction events, and error messages — all streaming live in the floating panel.

Color-Coded Message Types

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.

Error Stack Traces

JavaScript errors include the full stack trace with file names, function names, and line numbers. Click the file reference to identify exactly where the error originated without opening DevTools.

Type Filters

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 many messages of that type exist.

Timestamps

Every 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 & Export

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

Bežné prípady použitia

Quick Debug Without DevTools

Need to see console output while keeping the full page visible? Console Logger lets you monitor logs without the DevTools panel taking up screen space. Perfect on smaller screens or during presentations.

Monitoring API Call Results

If your JavaScript logs API responses, Console Logger shows them in real-time. See request/response data without switching between the page and DevTools.

Catching Silent JavaScript Errors

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

Client-Side Debugging During Demos

During a live demo, keep the Console Logger panel visible in a corner. If something goes wrong, you can immediately see the error message without interrupting the demo to open DevTools.

Monitoring Third-Party Script Issues

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.

Ako používať
1

Activate Console Logger

Open the DevSuite Pro floating dock and click the Console Logger icon. A floating panel appears and immediately starts capturing console output.

2

Interact with the Page

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

3

Filter by Message Type

Use the filter buttons to show only errors, warnings, or logs. The count badges show how many messages exist for each type.

4

Read Stack Traces

For error messages, expand the stack trace to see the file and line number where the error occurred. Use this to identify the source of the bug.

5

Clear When Done

Click "Clear" to reset the panel, or deactivate the tool to close it. No trace is left on the page.

Pripravený vyskúšať? Konzolový záznamník?

Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 39 vývojárskych nástools pre váš prehliadač.

Pridať do Chrome Pridať do Edge Pridať do FireFox