0.1.0 • Published 8 years ago

react-gdb v0.1.0

Weekly downloads
2
License
MPL-2.0
Repository
github
Last release
8 years ago

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

:warning: 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

PropDescription
processObject representing the GDB/MI process
process.stdinNode.js Writable stream
process.stdoutNode.js Readable stream
process.stderrNode.js Readable stream
sourceProviderResponsible for fetching the sources
sourceProvider.filterPython RegExp, files that don't match it will be ignored
sourceProvider.fetchFunction that accepts the full path to a file and returns Promise that resolves with the source code
inferiorProviderNode.js EventEmitter with the fork event that emits pids, then these processes are attached to debugging session (is needed for debugging multiple processes)
attachOnForkFlag that disables detach-on-fork GDB/MI option (all fork'ed and vfork'ed processes will be attached automatically)
objfileFilterreact-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...