The latest articles on Forem by Peter Engineer (@codefibers). https://forem.com/codefibers https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1379761%2Fe73aa4f7-95be-4604-934d-ffa5aef990fe.jpg https://forem.com/codefibers en Peter Engineer Sun, 24 Mar 2024 17:27:33 +0000 https://forem.com/codefibers/vs-code-app-logs-browser-ui-2e7g https://forem.com/codefibers/vs-code-app-logs-browser-ui-2e7g <p>In this blog post I'm going to present, how you can enable an embedded side-by-side view for Logdy in VS Code without having to install additional extensions.</p> <p>You can forget about messy terminal filled with lines of logs. <a href="https://logdy.dev">Meet Logdy.</a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd02kzci16ftk4y9lspig.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd02kzci16ftk4y9lspig.png" alt="VS Code + Logdy side-by-side view" width="800" height="433"></a></p> <h2> Install Logdy </h2> <p>Enter <a href="https://logdy.dev/docs/quick-start">Quick Start</a> page and install Logdy (download precompiled binary). Additionally, I recommend adding Logdy to $PATH for easier use.</p> <h2> Start your web app </h2> <p>Let's assume you normally use <code>node app.js</code> to start your application (of course you can use Logdy with auto-reloading tools like <code>nodemon</code>) and your app is producing logging information to standard output. </p> <p>Start Logdy like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ node app.js | logdy </code></pre> </div> <h2> Open Logdy in VS Code </h2> <p>Now that your app is up and running, go to Visual Studio Code and open command (Ctrl + Shift + P) "Simple Browser: Show"</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq9bion1ibgt7uvy29w0w.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq9bion1ibgt7uvy29w0w.png" alt="Simple Browser: Show" width="800" height="345"></a></p> <p>Next, enter the address of Logdy UI (by default it will be <a href="http://localhost:8080">http://localhost:8080</a>). A new tab should open with Logdy UI.</p> <p>The last step is to arrange the newly open tab to side-by-side view by dragging it.</p> <p>That's all, you can now use Logdy directly from within VS Code without having to switch windows.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz0o3i5nalxplbk0njuo.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz0o3i5nalxplbk0njuo.png" alt="Logdy side by side" width="800" height="423"></a></p> webdev programming tutorial productivity