Giter VIP home page Giter VIP logo

betwixt's Introduction

Betwixt

Build Status Dependency Status

Betwixt will help you analyze web traffic outside the browser using familiar Chrome DevTools interface.

Betwixt in action

Even more Betwixt action!

Installing

Download the latest release for your operating system, build your own bundle or run Betwixt from the source code.

Setting up

In order to capture traffic, you'll have to direct it to the proxy created by Betwixt in the background (http://localhost:8008).

If you wish to analyze traffic system wide:

  • on macOS - System Preferences → Network → Advanced → Proxies → Web Proxy (HTTP)
  • on Windows - Settings → Network & Internet → Proxy
  • on Ubuntu - All Settings → Network → Network Proxy

Setting up proxy on Windows 10 and macOS

If you want to capture traffic coming from a single terminal use export http_proxy=http://localhost:8008.

Capturing encrypted traffic (HTTPS) requires additional step, see this doc for instructions.

Contributing

All contributors are very welcome. See CONTRIBUTING.md fore more details.

License MIT

betwixt's People

Contributors

albinekcom avatar barneycarroll avatar damoonrashidi avatar kdzwinel avatar lqqyt2423 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

betwixt's Issues

when exec 'npm start', it throw a error

  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'xxx/betwixt/node_modules/electron-prebuilt/path.txt'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at Object.<anonymous> (/xxx/cloned/betwixt/node_modules/electron-prebuilt/index.js:4:21)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

version numbers broken on macOS

i've downloaded version 1.6.1 but when selecting it ini the Finder and using 'Get Info' it shows 'Version 0.36.12'

i believe this issues should go away automatically when building using a newer version of electron-packager

routines:ssl3_read_bytes:ssl handshake failure

I am getting the following error trying to intercept requests in a native app, do you have any idea how to fix it?

TrafficInterceptor error: Proxy error: Error: 8670597760:error:14094416:SSL routines:ssl3_read_bytes:sslv3 alert certificate unknown:../../vendor/node/deps/openssl/openssl/ssl/s3_pkt.c:1472:SSL alert number 46
8670597760:error:140940E5:SSL routines:ssl3_read_bytes:ssl handshake failure:../../vendor/node/deps/openssl/openssl/ssl/s3_pkt.c:1210:

Clean up the requests array whenever user hits "Clear"

Since frontend doesn't store response bodies, but requests them every time user opens "Preview" tab, we have to store them on the backend. This can quickly fill up the memory, so we should clean that array whenever user clicks "Clean" on the UI. Unfortunately, clicking that button doesn't send any message to the frontend, so right now there is no way to figure out if we can clean the requests array.

Why not use Template instead of js DOM?

I confused that why not using Template to create the Interface, not js DOM (create DOM in js).
Also i saw vscode source code don't use HTML too.
How does author consider for that?

Make copy to clipboard and save to file work

Currently context menu is useless ("copy All as HAR" / "copy as cURL" / "Save as file") - it does work, it just doesn't copy stuff to your 📋 because implementation for that is missing in the "hosted mode":

WebInspector.console.error("Clipboard is not enabled in hosted mode. Please inspect using chrome://inspect");

screen shot 2015-11-20 at 14 18 54

It's electron though, we can make it work!

More informative empty panel

When the program is initially ran, it just "runs". While it is recording by default, it assumes developers have read the README and know to proxy their network.

It would be informative to add a note when there are no records to let developers know the proxy setup is needed. Even better, add an icon in the right side of the action bar to open up a dialog with the instructions contained in the README.

Remove unnecessary UI elements

Some UI elements do not work and do not make sense.
This requires digging into the DevTools code.

Things to remove:

  • preserve log
  • disable cache
  • capture screenshots
  • "Clear browser cache" - context menu
  • "Clear browser cookies" - context menu
  • hide data URLs

Request payload not shown

Unlike Chrome DevTools, a request payload / form data is not shown on the detail pane.

image

For reference, this is a Chrome's screenshot of a similar request made with Postman. Notice the "Form Data" section at the bottom of the screenshot.

image

betwixt modify http header format

my response http header:

set-cookie:dsid=EfhrHh; expires=Fri, 04-Dec-2015 03:43:54 GMT; Max-Age=86400; path=/
set-cookie:dlastact=1449114234; expires=Fri, 04-Dec-2015 03:43:54 GMT; Max-Age=86400; path=/
set-cookie:dreg=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/
set-cookie:dcloudstatpost=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/

after betwixt proxy:

set-cookie:dsid=EfhrHh; expires=Fri, 04-Dec-2015 03:43:54 GMT; Max-Age=86400; path=/dlastact=1449114234; expires=Fri, 04-Dec-2015 03:43:54 GMT; Max-Age=86400; path=/dreg=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/dcloudstatpost=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/

So the cookie does not work

Enable zooming

👋 is it possible to enable zooming like in regular Browser/Electron app? The regular shortcuts on Linux are not working: ctrl + scroll up/down and ctrl + +/-

Use system certificates

Related to #3, but on the other end of the connection I receive the following error:

PROXY_TO_SERVER_REQUEST_ERROR: Error: unable to verify the first certificate

The server is using a certificate signed by an internal CA. This seems to be caused by Betwixt (node-http-mitm-proxy?) not using the system certificates (on OS X).

A workaround could be a way to pass trusted certificates to the app. I can't make sense of which environment variables (if any) the code in question will consult.

Create UI for settings/about section

We need a space to put settings (e.g. port number, reverse proxy options) and other stuff (root certificate download button, link to github, license info, etc.). The plan is to show the tab bar back again and create a new, custom tab with Settings/About.

screen shot 2016-03-15 at 11 01 55

initial version

hey @kdzwinel we spoke on reddit yesterday. I would like to help out. Can you put a raw version of the project on a separate branch so I can have a look at in this stage? cheers!

Modifying requests and responses in flight

This is a long term goal - no ETA

I especially like the idea of giving user the power to do that programatically right from the Betwixt window. The biggest challenge here is to create an UI for this (reuse "Sources" panel in some way?).

Node Issue - ENOENT: no such file or directory

When i run node project i am facing below issue in ubantu.
How can I Solve this issue ?

return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);

Error: ENOENT: no such file or directory, open '../conf/log4j_config.json'
at Object.fs.openSync (fs.js:557:18)
at Object.fs.readFileSync (fs.js:467:33)
at loadConfigurationFile (Git-Dev/node_modules/log4js/lib/log4js.js:274:26)
at Object.configure (Git-Dev/node_modules/log4js/lib/log4js.js:338:14)
at Object. (Git-Dev/lib/logger.js:8:8)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)

Getting it to work on Windows

I followed the instructions for Windows.
But as soon as I turn on manual proxy.
I cannot visit anything on the web and no network data shows up in Betwixt.
Is is possible to configure it to listen to a single address like https://localhost:44349?

Support for replay

It would be nice to have a way of repeating a request, like chrome dev tools' "Replay XHR".

Set proxy programmatically

Right now proxy has to be set by hand, there should be a way to set it programmatically.

Question: Should that be a default behaviour? If I want to debug network traffic for a specific thing (e.g. npm), not the whole system, it's better for me to have control.

Challenge: even if it's possible how do we support all operating systems?

nothing gets captured

after started and setting the proxy. I get nothing captured.

log screen is filled with FEConnection error: Connection not ready, message not sent.

I am using the node 5.1 on macosx

Support WebSockets

This should be straightforward, the library that betwixt is using (http-proxy) has websocket support that looks easy to add. It might be challenging though to fit that code into the current codebase though.

Edit Response

Is possible to edit the respose tab into atom editor?

Support HTTPS

HTTPS request are not logged by the proxy. At this point I have no good idea how to approach this - research needed.

Question: will it be possible to decode body of these requests? This will probably break connection for apps being debugged? Or do self-signed certs fix that? Can I create them on flight?

Support for Throttling

IMO doing a simple setTimeout on the proxy server should work just fine for most cases.

reverse proxy

Can this work as a reverse proxy / proxy chaining such that requests get forwarded to another proxy and back? Functionality similar to weer.

Thanks.

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.