├── index.d.ts ├── package.json ├── LICENSE ├── .gitignore ├── index.js ├── README.md └── server.js /index.d.ts: -------------------------------------------------------------------------------- 1 | export default termsole; 2 | interface Options { 3 | host?: string; 4 | port?: number; 5 | ssl?: boolean; 6 | } 7 | declare function termsole(options: Options = {}): void; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "termlog", 3 | "version": "1.1.4", 4 | "description": "Console log to terminal", 5 | "type": "main", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/qnkhuat/termlog.git" 12 | }, 13 | "bin": { 14 | "termlog": "server.js" 15 | }, 16 | "preferGlobal": true, 17 | "keywords": [], 18 | "author": "Ngoc Khuat ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/qnkhuat/termlog/issues" 22 | }, 23 | "homepage": "https://github.com/qnkhuat/termlog#readme", 24 | "dependencies": { 25 | "minimist": "^1.2.5", 26 | "repl": "^0.1.3", 27 | "ws": "^8.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Quang Ngoc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const DEFAULT_HOST = "localhost"; 2 | const DEFAULT_PORT = 3456; 3 | 4 | const configure = (conn, defaultConsole) => { 5 | // skip if already configured 6 | if (console._tsconsole_configured) return; 7 | console._tsconsole_configured = true; 8 | 9 | console.info = (...args) => { 10 | sendWhenConnected(conn, JSON.stringify({ type: 'info', data: Array.from(args) , }), defaultConsole); 11 | defaultConsole.info.apply(defaultConsole, args); 12 | }; 13 | 14 | console.log = (...args) => { 15 | sendWhenConnected(conn, JSON.stringify({ type: 'log', data: Array.from(args) , }), defaultConsole); 16 | defaultConsole.log.apply(defaultConsole, args); 17 | }; 18 | 19 | console.error = (...args) => { 20 | sendWhenConnected(conn, JSON.stringify({ type: 'error', data: Array.from(args) }), defaultConsole); 21 | defaultConsole.error.apply(defaultConsole, args); 22 | }; 23 | 24 | console.warn = (...args) => { 25 | sendWhenConnected(conn, JSON.stringify({ type: 'warn', data: Array.from(args) }), defaultConsole); 26 | defaultConsole.warn.apply(defaultConsole, args); 27 | }; 28 | 29 | console.debug = (...args) => { 30 | sendWhenConnected(conn, JSON.stringify({ type: 'debug', data: Array.from(args) }), defaultConsole); 31 | defaultConsole.debug.apply(defaultConsole, args); 32 | }; 33 | 34 | } 35 | 36 | const release = (defaultConsole) => { 37 | console = defaultConsole; 38 | console._tsconsole_configured = false; 39 | } 40 | 41 | const termlog = (options = {}) => { 42 | // Ensure tconsole doesn't run in production mode 43 | options = { 44 | host: DEFAULT_HOST, 45 | port: DEFAULT_PORT, 46 | ssl: false, 47 | disableEnvironmentCheck: false, 48 | ...options, 49 | } 50 | 51 | if (!options.disableEnvironmentCheck && typeof process != "undefined" && process.env.NODE_ENV && process.env.NODE_ENV !== 'development') return; 52 | 53 | const defaultConsole = Object.assign(Object.create(Object.getPrototypeOf(console)), console); 54 | 55 | const ws = new WebSocket(`${options.ssl ? "wss" : "ws"}://${options.host}:${options.port}`); 56 | 57 | configure(ws, defaultConsole); 58 | 59 | ws.onopen = () => { 60 | console.log('[TERMLOG]: Connected'); 61 | }; 62 | 63 | ws.onclose = (event) => { 64 | release(defaultConsole); 65 | console.log("[TERMLOG]: Disconnected", event.message); 66 | } 67 | 68 | ws.onerror = (event) => { 69 | release(defaultConsole); 70 | console.error("[TERMLOG]: Disconnected", event.message); 71 | } 72 | } 73 | 74 | 75 | // *** Utils *** // 76 | const sendWhenConnected = (ws, msg, defaultConsole, n = 0, maxTries = 100) => { 77 | // Closing or closed 78 | if (ws.readyState === 2 || ws.readyState === 3) return; 79 | 80 | // try sending 81 | setTimeout(() => { 82 | if (ws.readyState === 1) { 83 | ws.send(msg); 84 | } else if (n < maxTries) { 85 | sendWhenConnected(ws, msg, defaultConsole, n + 1); 86 | } else{ 87 | defaultConsole.error("Exceed tries to send message: ", msg); 88 | } 89 | }, 10); // wait 10 milisecond for the connection... 90 | } 91 | 92 | export default termlog; 93 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Termlog 2 | Console log to terminal 3 | 4 | ### What it does 5 | termlog send the browser console log to your terminal 6 | 7 | It also comes with a __nodejs__ REPL so you can do some basic draft code 8 | 9 | ### When to use it 10 | - While you developing your front-end app and you have to switch back and forth between IDE and browser 11 | - When you test app on mobile and need to check log. (See [Debug on mobile](#debug-on-mobile)) 12 | 13 | # How to use it? 14 | There are 2 ways and it depends on your preferences 15 | 16 | ## Recommended way 17 | 1. Install the `termlog` binary : `npm install --save-dev termlog` ( you also can install globally with `npm install -g termlog` ) 18 | 2. Start server `npx termlog` or `termlog` if you install globally 19 | 3. Go to the entry file of your project (I.e: app.jsx for React or main.js for Vue) 20 | 4. Insert these two lines: 21 | ``` 22 | import termlog from "termlog" 23 | termlog() 24 | ``` 25 | 5. You should now see log being streamed to your terminal 26 | 27 | __Note__: with this approach you might want to remove two lines above in production 28 | 29 | By default termlog will __not__ run if it detects production mode using `NODE_ENV`, but you shouldn't rely on that 30 | 31 | ## I don't want to add dependencies to my project 32 | 1. Install the `termlog` binary : `npm install -g termlog` 33 | 2. Start server `termlog` 34 | 3. Go to your browser and open the console window 35 | 4. Copy code inside [index.js](index.js) file __without__ the last export line into console 36 | 5. Enter `termlog()` into console 37 | 6. You should now see log being streamed to your terminal 38 | 39 | __Note__: with this approach you have to do all steps 3-6 every-time you refresh your browser tab 40 | 41 | ## Advanced options 42 | With `termlog` command: 43 | - `--out path`: Save log to file 44 | - `--port port`: Change server port 45 | - `--addr addr`: Change server address 46 | - `--show levels`: Select log levels to display (info | warning | error | debug). Multiple levels are seperated by `,` 47 | > use `.show levels` while the server running to select again 48 | 49 | 50 | With `termlog` package: 51 | 52 | `termlog({ 53 | host: "localhost", 54 | port: 3456 55 | })` 56 | 57 | ## Debug on mobile 58 | To be able to stream log from your app running on mobile you need to: 59 | - Start term log with `0.0.0.0` by running `npx termlog --addr 0.0.0.0` 60 | - Find your private IP address 61 | - MacOS: run `ipconfig getifaddr en0` if you're on wifi and 62 | - Linux: run `hostname -I` 63 | - Windows: run `ipconfig` and find in the printed result. It should be under `192.168.x.x` 64 | - Inside your project init tconfig with: `termlog({host: "YOUR_PRIVATE_IP"})` 65 | 66 | ## How it works 67 | Termlog have 2 components: 68 | - [server.js](cli.js) - a websocket server to receive log message and display on terminal. 69 | - [index.js](index.js) - termlog function to override default behavior of `console` object by capture arguments and send to websocket server 70 | 71 | ## Future release 72 | - [ ] Install using `