A Front-End JavaScript Debugger

Overview

vDebugger · npm github-actions coveralls

English | 简体中文

A Front-End JavaScript Breakpoint Debugger.

Make it possible to debug your JavaScript in browser, Node.js, JavaScriptCore or other JavaScript runtimes without any extra supports from host environments. Try vDebugger on playground.

Installation

vDebugger requires ES2015 for Generator support.

Install by NPM:

$ npm install vdebugger
import vDebugger from 'vdebugger';

Or, import from CDN:

<script src="https://unpkg.com/vdebugger@latest/dist/vdebugger.js"></script>
<!-- vDebugger will mount at global like window.vDebugger by default -->

Getting Started

import vDebugger from 'vdebugger';

const run = vDebugger.debug(`// here's line 1
let a = 1;
a = 2; // break at line 3 later
a = 3;
a = 4;
console.log(a); // output "4"
`, './test.js');
// the second argument is debuggerId for identifing the script,
// which normally is the script url

vDebugger.setBreakpoint('./test.js', 3); // break at line 3

run();

vDebugger.evaluate('console.log(a)'); // output "1"

vDebugger.resume('stepOver');

vDebugger.evaluate('console.log(a)'); // output "2"

vDebugger.resume(); // output "4"

Pre-Transform

vDebugger needs code transform for break, while transforming at runtime by default causes performance loss, and therefore, vDebugger provides a method called transform for code pre-transform at compilation.

/* ----- Compilation ----- */

// pre-transform at compilation, and pass the result to vDebugger.debug at runtime
import vDebugger from 'vdebugger';

const result = vDebugger.transform(`// here's line 1
let a = 1;
a = 2; // break at line 3 later
a = 3;
a = 4;
console.log(a); // output "4"
`, './test.js');
// the second argument is debuggerId for identifing the script,
// which normally is the script url

Pass the transformed result to vDebugger.debug at runtime.

/* ----- Runtime ----- */

// except for passing the transformed result to vDebugger.debug,
// runtime debugging has no difference from which without pre-transform
import vDebugger from 'vdebugger';

const run = vDebugger.debug(result);
// the result contains debuggerId, so the second argument is optional

vDebugger.setBreakpoint('./test.js', 3); // break at line 3

run();

vDebugger.evaluate('console.log(a)'); // output "1"

vDebugger.resume('stepOver');

vDebugger.evaluate('console.log(a)'); // output "2"

vDebugger.resume(); // output "4"

Development

$ npm start

Testing

$ npm test

Documentation

License

MIT

You might also like...

[Book] 2019 edition of our front-end development handbook

Front-End Developer Handbook 2019 Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end enginee

Dec 28, 2022

Atividade do Módulo 03 - Especialização em Front-end - Turma 01; Criação de uma API de Rick and Morty com React.js.

Atividade do Módulo 03 - Especialização em Front-end - Turma 01; Criação de uma API de Rick and Morty com React.js.

Screenshots Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you

Dec 1, 2021

10lift Applicant Test Senior Front End Development

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Sep 27, 2021

Front-end telkom-juara pwa client

TelkomJuara This project was generated with Angular CLI version 12.2.4. Development server Run ng serve for a dev server. Navigate to http://localhost

Dec 31, 2021

distributed-nginx nginx k8s docker micro front-end

distributed-nginx (分布式 nginx) 🍙 适用于微前端的去中心化分布式部署 nginx 服务器. 特性 支持 前端服务上线下线 自动更新微前端模块配置 完全实现了分布式去中心化 支持【微前端组】 支持 redis 协议和 multicast-dns 协议 支持 命名空间 Ge

Feb 25, 2022

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi

Jan 10, 2022

Finisterre-frontend - Front end for finisterre ecommerce application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Nov 2, 2022

This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

Solana-NFT minting Dapp Create your own NFT's on Solana, and mint them from your custom front-end Dapp. Tools used Metaplex - Metaplex is the NFT sta

Nov 2, 2022

Educare é um projeto que visa auxiliar os estudos dos alunos por meio da resolução de questões. Front-end construído com Next.js.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Feb 6, 2022
Owner
Wechat.js
微信公众平台前端团队
Wechat.js
Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

AlgoAuth Authenticate to a website using only your Algorand wallet Pass trust from a front-end Algorand WalletConnect session, to a back-end web servi

Nullable Labs 16 Dec 15, 2022
It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. ?? About the project. ?? Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Mario Quirós Luna 5 Apr 12, 2022
It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ ?? About the project

Mario Quirós Luna 5 Jun 26, 2022
Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Installation through NPM: The jQWidgets framework is available as NPM package: jQuery, Javascript, Angular, Vue, React, Web Components: https://www

Ajay Dhangar 3 Nov 19, 2022
WIP: Hevm based debugger for hardhat-huff projects

Huff Debug An easy hevm debug integration for hardhat-huff projects What does it do: Speed up your development experience by gaining rich feedback in

Huff 6 Jul 15, 2022
Nodejs agent for Sidekick open-source live application debugger

Sidekick Agent NodeJS Sidekick agent Nodejs is a Nodejs library that communicate with Sidekick broker to inspect, monitor and debug your application o

Sidekick 12 Nov 8, 2022
🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page

David Dias 63.6k Jan 7, 2023
A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

Front-end Developer Interview Questions This repository contains a number of front-end interview questions that can be used when vetting potential can

H5BP 56.1k Jan 4, 2023
📚 Study guide and introduction to the modern front end stack.

Grab Front End Guide Credits: Illustration by @yangheng This guide has been cross-posted on Free Code Camp. Grab is Southeast Asia (SEA)'s leading tra

Grab 14.7k Jan 3, 2023
🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist ?? The only Front-End Performance Checklist that runs faster than the others. One simple rule: "Design and code with p

David Dias 15.5k Jan 1, 2023