Dev Tools - Web Dev Tools Suite

WebSocket Proxy

Monitor, log, and modify WebSocket messages in real-time with a powerful proxy and testing tool. WebSocket Proxy is an essential tool for developers, QA specialists, and security professionals. It allows you to easily intercept, inspect, and manipulate WebSocket traffic, making it perfect for testing and debugging WebSocket connections in real time. Key Features: - Real-Time Traffic Interception: Monitor WebSocket messages as they flow between the client and server. - On-the-Fly Data Manipulation: Modify WebSocket messages before they are sent or received. - Comprehensive Logging: Keep detailed logs of all WebSocket messages for easy troubleshooting and debugging. Last changes: - The icon on the toolbar indicates that the connection is available - Bug fix How to Use 1. Open DevTools: Go to the WebSocket Proxy tab. 2. View Messages: See all WebSocket messages if a connection exists. 3. Modify with JavaScript: Edit the message variable as needed. 4. Apply Changes: Click Run to apply your code before sending messages. Who Is It For? 🧑‍💻 Developers: Quickly debug and optimize WebSocket interactions in your applications. 💪 QA Engineers: Ensure WebSocket communications are functioning correctly by testing edge cases and performance. 😎 Pentesters: Intercept and analyze WebSocket traffic to identify vulnerabilities and ensure security.

Pointer - Element Inspector for DevTools

Enhanced element inspection with cursor-driven workflow. Visual highlighting, measurements, and DevTools integration. Pointer enhances Chrome's built-in element inspector with a persistent, intuitive DOM navigation tool that stays active while you work. Unlike the default DevTools inspector that turns off after selecting an element, Pointer keeps running so you can quickly inspect multiple elements without constantly reactivating the tool. — Always-On Element Selection - Navigate the DOM using arrow keys or click to select elements. The pointer stays active between selections. — Visual Box Model Display - See margin, padding, and content areas with color-coded overlays. — Element Information - Hover over any element to see its tag name, dimensions, CSS classes, and behavioral badges (flex, grid, media, scroll containers and event listeners). — Built-In Ruler - Hold Alt to see pixel distances between selected and hovered elements. — DevTools Integration - Selected elements automatically sync with Chrome DevTools Elements panel. The inspector scrolls elements into view and maintains selection state when DevTools is reopened. — Pass-Through Mode - Hold "`" (backtick) to temporarily interact with page elements normally while keeping the inspector active. — DOM Manipulation - Cut, copy, paste, delete, and duplicate (Cmd/Ctrl+D) elements directly in the page. Full undo/redo support. — Inline Attribute Editor - Press "/" to add attributes, classes, and properties to selected elements without switching to the DevTools elements panel. — JavaScript Console - Press ";" to execute JavaScript commands with the selected element as "this" context. Perfect for quick DOM modifications and debugging. — Selector Search - Press "f" to enter find mode and highlight all elements matching a CSS selector in real-time. Navigation — Arrow Keys - Navigate between elements (up/down for siblings, left for parent, right for children). Inspection Tools — Alt - Show measurement rulers between selected and hovered elements — ` (backtick) - Hold to enable pass-through mode so you can interact with the web page

Developer tools

Tools include Base64 Encode/Decode, Unix Time Converter, Url Encode/Decode, JWT Debugger, UUID Generate and more. Developer tools quickly help with various issues encountered during coding.

WebSocket Visualizer

Graphically displays incoming and outgoing WebSocket messages with event type grouping 🔌 WebSocket Visualizer — WebSocket Connection Visualizer for Chrome DevTools WebSocket Visualizer is a powerful developer extension that adds a new tab to Chrome DevTools, displaying all WebSocket messages passing through a page in real time. The extension helps analyze, filter, and understand interactions between the client and server over the WebSocket protocol—without changing application code or using third-party libraries. Modern applications actively use WebSocket connections for real-time data exchange—chats, exchanges, games, financial panels, IoT devices, and other systems. However, standard browser tools don't provide a convenient way to observe these data streams. WebSocket Visualizer solves this problem: it injects itself into the page context and intercepts native WebSocket events (open, message, close, error, send), visualizing everything in a separate DevTools tab—beautifully, structured, and interactively. The extension automatically replaces the native WebSocket constructor, tracking all connections opened by a page or libraries (including Socket.io, ws, Primus, etc.) Each incoming and outgoing message is displayed as a card with details: Message content with JSON formatting Connection URL and WebSocket session ID Messages are grouped by event type (e.g., message, update, trade, heartbeat) — allowing you to quickly analyze the protocol structure and the frequency of specific events. The top panel displays a summary: Sent and Received All counters are updated in real time without reloading Click on an event type in the sidebar to instantly apply a filter ⏸️ Pause and Resume You can pause the event stream for analysis and resume it later without losing context—useful for heavy traffic or historical analysis. 🗑️ Clear and Reset One button clears all messages and statistics, preserving active connections and filters. The language choice is saved and applied automatically on next launch. The interface is inspired by Visual Studio Code: Soft gradients and highlighting of active elements Stylized scrollbars and neat typography 🧭 Instructions for use Go to the WebSocket tab—this is the extension interface. Load or refresh the page where WebSocket connections are enabled. The extension will automatically intercept and display all events: Use filters to focus on the events you need. You can pause the stream with the ⏸️ Pause button, examine the data, and then continue with ▶️ Resume. To clear the data, click 🗑️ Clear — the interface will refresh and begin waiting for new connections. All actions are instantly reflected in the UI: animations, counters, and filters are synchronized in real time. 🔍 Debugging real-time chats and messengers 🕹️ Monitoring game servers and network interactions 💬 Testing push notifications and streaming services 📊 Educational projects on working with real-time data Automatic JSON formatting with structure highlighting Automatic scrolling to the last message History limitation (up to 1000 messages per list) for performance optimization Security and privacy The extension does not collect, save, or send data from websites. All operations are performed locally within the browser context. Minimal permissions (activeTab, scripting, storage) are used exclusively for data visualization within DevTools. The new version of WebSocket Visualizer 1.3.0 adds support for German and Spanish, and the interface language switcher has been updated to include new localization options. Connection activity monitoring and state management have been improved, and a JSON viewer has been implemented for detailed viewing of message data. The interface has received visual improvements and new statistics elements: you can now monitor the number of bytes sent and received in real time. Furthermore, message export capabilities have been expanded to include JSON, CSV, and HAR formats, and a button for copying individual messages has been added. All export and statistics-related text is now localized for all supported languages. These updates make WebSocket Visualizer even more convenient for analyzing traffic, testing, and debugging WebSocket connections directly in the browser. WebSocket Visualizer now supports binary data handling with an integrated hex viewer for deeper inspection of raw message content. The message parsing logic has been improved to ensure more accurate decoding of complex WebSocket frames. Additionally, this update introduces localized translations for all new binary data features, providing a smoother experience for users in multiple languages.