A step-by-step guide on troubleshooting JavaScript/Typescript code in VSCode with Bun.sh

Recently, I delved into using Bun to execute typescript files without the need for compiling them to js. So far, my experience has been smooth sailing. However, when it came time for runtime debugging, I hit a roadblock as I couldn't find any information in the documentation.

I'm wondering how I can set up my .vscode/launch.json file to debug a project utilizing bun?

I attempted to tinker with a configuration, but progress was minimal:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Bun",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "bun",
            "runtimeArgs": ["run"]
        }
    ]
}

Scanning through the official roadmap, there seems to be no mention of debugging. Could it possibly be an experimental feature at this juncture?

javascripttypescriptvisual-studio-codedebuggingbun

Answer №1

You can now easily make it happen by installing the official extension.

Once you have the extension installed, consult the provided guide for setting up launch.json and settings.json to activate the "Bun: Run File" command.

In my case, I initially faced issues as the extension couldn't locate the runtime due to my bun being set up as a devDependency. To resolve this, I made changes to the settings.json as shown below:

{
    // The path to the `bun` executable.
    "bun.runtime": "node_modules/bun/bin/bun",
    // Enabling support for Bun in the default "JavaScript Debug Terminal".
    "bun.debugTerminal.enabled": true,
    // Choosing whether the debugger should stop at the program's first line.
    "bun.debugTerminal.stopOnEntry": false,
}

By following these steps, executing the "Bun: Run File" command successfully launches with the debugger.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Begin a fresh page within a separate window, proceed to print the contents, and subsequently close the window

I am facing some difficulties with this code. I am attempting to use the "onClick" function to change the image once it is clicked, open a new page in a new window, print the newly opened window, and then close it. The issue I am encountering is that while ...

javascriptjqueryhtml

Avoid including package-lock.json file in GitHub contribution history

After the release of npm v5.0.0, utilizing npm packages automatically generates a package-lock.json file when running npm install. In my situation, my package-lock.json document is almost 10,000 lines long. Npm advises that this file should be committed: ...

javascriptnode.jsgithubnpm

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

javascripthtmlblogger

Using Flickity API in Vue 3 with Typescript Integration

I have encountered an issue with implementing Flickity in my Vue 3 application. Everything works perfectly fine when using a static HTML carousel with fixed cells. However, I am facing difficulties when attempting to dynamically add cells during runtime us ...

javascripttypescriptvue.jsvuejs3flickity

Activating a link click inside a table with jquery

I have been attempting to trigger a click on an anchor within the table compareTable with the code below, however it does not appear to be working as expected. Would anyone be able to provide insight into a possible solution? $('#compareTable a' ...

javascriptjquery

Getter and Setter Implementation in Typescript without Using Classes

Check out these various SO questions discussing Typescript getters/setters: from 2015, Jan 2018, Sept 2018, and more. Now, the question arises - what is the best approach to define Typescript types for getters/setters in a plain JavaScript object without ...

javascripttypescript

What is the most efficient method for creating around 500 small images, using either JavaScript or server-side C?

Embarking on my initial endeavor to create images dynamically. The goal is to present approximately 500 small images, each 32px X 24px in size with 16 colors, placed within table cells. Each image consists of a 2D array of colored pixels, with values prov ...

javascriptcimage-processingcgi

Why is it difficult to display data fetched through getJSON?

The test-json.php script retrieves data from the database and converts it into JSON format. <?php $conn = new mysqli("localhost", "root", "xxxx", "guestbook"); $result=$conn->query("select * From lyb limit 2"); echo '['; $i=0; while($row ...

javascriptjsonajaxgetjson

Toggle the visibility of a text box based on a selected option from a dropdown menu within a dynamic form using Angular

In the form I designed, users have the ability to add one or more divs of Address when they click on the add button. If a user selects options=5 from the dropdown menu, I want to dynamically show and hide a textbox within that specific Address Div. Compo ...

javascriptangulartypescriptangular8

Testing a Jest function that returns another function containing window.location.href

Trying to create a test case for the following function: The expected behavior is that if a successPath is provided, then onSignInSuccess should redirect to it. export const onSignInSuccess = ( data ) => { return ( ) => { global.location.href = da ...

javascriptfunctionjestjs

An Express server configuration with the ability to spawn up to two child or worker processes

Currently, I am exploring the functionalities of Node.js and its child_process module. My objective is to build a server that will operate with a maximum of 3 processes (1 main process and optionally 2 child processes). The code snippet below might not be ...

javascriptnode.jsexpressforkchild-process

Are there any possible resolutions to the issues plaguing Next.Js?

After switching from React to Next.JS, I've encountered some challenges that I'm hoping to find solutions for: In contrast to React, Next.JS doesn't allow me to change a specific part of a webpage and maintain a static element like a navb ...

javascriptcssreactjsnext.jsjsx

Error: The function is invalid for callback at end (node_modules/middy/src/middy.js:152:16)

I seem to be having some trouble with my test when using middy. Removing middy makes the test pass successfully, but with middy, I encounter the error "TypeError: callback is not a function at terminate (C:\cico\node_modules\middy\src&b ...

javascriptnode.jsjestjsserverless-frameworkmiddy

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

On my create operation page, I have a form with two fields. When I reload the page using window.reload in code, I can see updates in the form. However, I want to trigger a refresh on the form by clicking a button. I need help writing a function that can r ...

javascripthtmlangulartypescriptng-bootstrap

VS Code does not support the usage of the pipenv .env file

Currently using VS Code 1.35.1 on ubuntu 16.04 with a Python 3.7.3 pipenv virtual environment, I am encountering an issue where my .env file is not being recognized to set environment variables. I'm seeking assistance in understanding how to grant my ...

djangovisual-studio-codeenvironment-variablespipenv

javascript change string into an array of objects

let dataString = "{lat: -31.563910, lng: 147.154312};{lat: -33.718234, lng: 150.363181};{lat: -33.727111, lng: 150.371124}"; let dataArray = dataString.split(';'); Produces the following output: let dataArray = [ "{lat: -31.563910, lng: 147 ...

javascriptarrays

Which function is most suitable for verifying if the values from req.param are NaN and assigning a new value if they are found to be NaN?

Regarding the about page: I'm currently working on a react app that sends URL parameters to the backend server. The frontend URL looks something like this: maxprice=100000&minsqm=50&maxsqm=100&page=1, which are the user's filters for ...

javascriptnode.js

An insightful guide on effectively binding form controls in Angular using reactive forms, exploring the nuances of formControlName and ngModel

Here is the code snippet: list.component.html <form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()"> <div nz-row *ngFor="let remark of checklist> <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" styl ...

javascriptangulartypescript

Close the material-ui popper when clicking away

I am currently working on implementing a Material UI popper feature that should close when the user clicks outside of it using ClickAwayListener. However, I have been unable to make this functionality work despite trying different approaches. I've att ...

javascriptreactjsmaterial-ui

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

javascripthtmlcssdom