node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

react-gdb

GDB Frontend in React

The goal of this project is to provide a GUI for GDB in the browser so that other developers can use it to easily and intuitively debug projects running in a cloud environment.

Example

Tickets Yep, there's not much beatiful UI out here right now. But at least it works :)

Install

$ npm install react-gdb

⚠️ Note, that react-gdb is still under development. Use to your own risk!

Usage

import React from 'react'
import { render } from 'react-dom'
import ReactGDB from 'react-gdb'
 
render(<ReactGDB {...props} />, document.getElementById('gdb'))

API

Prop Description
process Object representing the GDB/MI process
process.stdin Node.js Writable stream
process.stdout Node.js Readable stream
process.stderr Node.js Readable stream
sourceProvider Responsible for fetching the sources
sourceProvider.filter Python RegExp, files that don't match it will be ignored
sourceProvider.fetch Function that accepts the full path to a file and returns Promise that resolves with the source code
inferiorProvider Node.js EventEmitter with the fork event that emits pids, then these processes are attached to debugging session (is needed for debugging multiple processes)
attachOnFork Flag that disables detach-on-fork GDB/MI option (all fork'ed and vfork'ed processes will be attached automatically)
objfileFilter react-gdb refreshes source files list every time new objfile is added (e.g. new target or execl call), but in order to avoid unnecessary refreshes it's recommended to provide the RegExp that filters new objfiles

Playing with examples

$ npm install
$ npm run docker-pull
$ npm run docker-run
$ npm start
$ npm run docker-rm

This will pull the image from Docker Hub, launch it in the new container, run WebSocket server that passes process streams to the client-side and build the example application. Open http://localhost:8080/index.html and play along. If you want to change the example that is being debugged, change the let example = '<example>' line in the client.jsx, save it and webpack will do all the rest.

TODO

  • Split components into smaller ones
  • Style components, draw some nice UI
  • Enable custom theming for CSS Modules
  • Tests, tests, tests...