Overview Version History Q & A Rating & Review
🌐 Log Server 🚀
Log Server is a Visual Studio Code extension that provides a lightweight 🌟 HTTP server to receive and display logs 📜 from a React Native app (or any other source that can send requests via HTTP) directly within VS Code. This extension is designed to streamline debugging 🔍 and improve development efficiency by centralizing logs in a dedicated view. 🎯
🎨 Icon credit: svgrepo
✨ Features
🖥️ Log Server: Start an HTTP server to receive logs from your React Native app.
📱 Device Filtering: Filter logs by platform and device name.
🔍 Webview Log Display: Logs are displayed in a clean, scrollable Webview with:
📜 Word wrap for long messages.
🎨 Color-coded log levels (Info, Warn, Error).
🔄 Autoscroll functionality if you are at the end of the log list.
⚡ Quick Device Selection: Choose a device from the status bar for filtering logs.
🔍 Search and Filter: Search logs by query and filter by log level.
📋 Copy Logs: Copy log messages to the clipboard in JSON format.
📋 Requirements
To use this extension:
✅ Ensure your app can send logs as structured JSON payloads via HTTP POST requests.
Logs should be sent as a POST request to http://<server_ip/localhost>:19000/logs
.
📝 The log payload format must include:
{
"level": "Info|Warn|Error",
"message": "Log message here",
"platform": "iOS|Android",
"device_name": "Device Name",
"timestamp": "2023-01-01T12:00:00.000Z"
}
🛠️ Note: To check if the server is running, send a GET request to http://<server_ip/localhost:19000/ping
.
🚀 Usage
🔍 Search / Filter
The syntax for searching and filtering logs is as follows:
Normal search: Enter a search query to filter logs by message content.
Log level filter: Use Info:<query>
, Warn:<query>
, or Error:<query>
to filter logs by level and message content.
Inside the search input:
Enter
to keep the filter and close the search input.
Esc
to clear the filter and close the search input.
⌨️ Hotkeys
Webview/Panel:
Ctrl + F
to toggle the search input (Note: The filter will not be cleared).
Ctrl + D
to select the device.
⚙️ Extension Settings
This extension currently does not expose any configurable settings. Future releases may include additional customization options. 🔧
⚠️ Known Issues
🚫 None
📝 Release Notes
🆕 0.0.1
Initial release of Log Server. 🎉
Features:
Start and stop log server. 🛑▶️
Display logs in a Webview with device filtering and autoscroll. 🔄
Status bar integration for quick device selection. 🖱️
🔧 0.0.2
Features:
Added to view/title two buttons to start/stop the server and clear the logs. 🧹⏹️
Enhancements:
Added more space after the last log entry. 📏
🆕 0.0.3
Features:
Added support for filtering logs by search query and log level. 🔍
Added support for copying log messages to the clipboard in JSON format. 📋
If the port is already in use, the extension will check the next 10 ports before giving up. 🛑
New hotkeys inside the webview/panel.⚡
Ctrl + F
to toggle search input.
Ctrl + D
to select the device.
Hotkeys when the search input is focused. ⌨️
Enter
to keep the filter and close the search input.
Esc
to clear the filter and close the search input.
Enhancements:
Removed the clear logs button if the server is not running. 🚫🧹
Improved visual styling of the webview/panel. The colors now adapt to the theme. 🎨