Code Monkey home page Code Monkey logo

devtools's Introduction

Replay

Replay is a new debugger for recording and replaying software. Debugging with Replay should be as simple as viewing print statements and more powerful than pausing with breakpoints. Of course, debugging should be collaborative as well!

Issues

Feel free to file any issues you see while recording or replaying.

Setup instructions:

Replay's DevTools is a React app built on top of the Replay protocol. Make sure to install nvm. Getting started is as simple as:

git clone [email protected]:RecordReplay/devtools.git
cd devtools
nvm use
npm install
cp .env.sample .env
npm run dev

Once you see Compiled succesfully in your terminal, open your browser and go to this link.

You just successfully opened your first Replay recording! That recording uses your locally running copy of Replay DevTools to debug our test recording.

Next steps

Next, download and install the Replay browser. The browser will allow you to start recording your own replays.

Community

Everybody's welcome to join us on Discord. We can help with getting started with the project, finding issues to work on and chatting about the future of DevTools.

Contributing to the project

We encourage everybody to contribute to the project! If you're just getting started, we recommend looking through and grabbing any of these issues. Feel free to ping any of the maintainers on Discord if you have any questions!

Running tests:

To run the end-to-end tests make sure that devtools is running locally on port 8080 and run:

node test/run.js [--pattern pat]

To run the mock tests:

node test/mock/run.js [--pattern pat]

To run the unit tests:

npm test

Note that any options passed after -- will be passed on to the test runner (jest). So, if you wanted jest to watch the project for changes and run tests when files were saved you could run:

npm test -- --watch

Running tests in VS Code

Install the Mocha Test Explorer for the e2e and mock tests and Jest Test Explorer for the unit tests. You can set environment variables to be used in e2e or mock tests by adding them to the mochaExplorer.env setting in .vscode/settings.json.

Running tests against local builds of the browser

If you want to run the tests against a local build of the browser, you'll need to invoke the tests like so:

RECORD_REPLAY_PATH=~/devel/gecko-dev/rr-opt/dist/Replay.app RECORD_REPLAY_BUILD_PATH=~/devel/gecko-dev node test/run.js

Replace the paths with the appropriate paths to and within gecko-dev as appropriate in your environment.

Running tests against local builds of the backend

If you want to run the tests against a local build of the backend, you'll need to invoke the tests like so:

RECORD_REPLAY_SERVER=ws://localhost:8000 RECORD_REPLAY_DRIVER=~/devel/backend/out/macOS-recordreplay.so node test/run.js

Replace the paths with the appropriate paths within the backend repo as appropriate in your environment.

Installing the trunk launcher

This project uses trunk to lint and format its code.

You can install the trunk launcher using the command curl https://get.trunk.io -fsSL | bash. This will place trunk in your PATH.

Linting your changes

In most cases you can simply run trunk check which will autodetect the changes you have made and lint them. If you would like to only autoformat your changes, you can run trunk fmt. More information on using trunk can be found here.

Generating GraphQL types for Typescript

See /src/graphql/README.md for details.

devtools's People

Contributors

jaril avatar jasonlaster avatar hbenl avatar bhackett1024 avatar jonbell-lot23 avatar jcmorrow avatar ryanjduffy avatar dependabot[bot] avatar gabrielluong avatar abstractalgo avatar jazzdan avatar loganfsmyth avatar markerikson avatar karina-y avatar colbyr avatar bvaughn avatar ceceliacreates avatar sawtaytoes avatar kannanvijayan avatar ashwinkhode avatar chujunlu avatar ddanielcruzz avatar gideonred avatar johnathan-co avatar garbee avatar vickimo avatar achou11 avatar det avatar darkwing avatar andarist avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.