Reid  Rohan

Reid Rohan

1661761584

Betwixt: Web Debugging Proxy Based on Chrome Devtools Network Panel

Betwixt

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.

Download Details:

Author: Kdzwinel
Source Code: https://github.com/kdzwinel/betwixt 
License: MIT license

#javascript #electron #devtool #proxy 

Betwixt: Web Debugging Proxy Based on Chrome Devtools Network Panel
Nat  Grady

Nat Grady

1658856960

Devtool: [OBSOLETE] Runs Node.js Programs Through Chromium Devtools

devtool

⚠️

Update: This tool is mostly obsolete as much of the philosophy has been brought into Node/DevTool core, see here for details.

If you wish to take over maintenance of this project, please ping me on twitter: @mattdesl.


Runs Node.js programs inside Chrome DevTools (using Electron).

# runs a Node.js app in DevTools
devtool src/app.js

This allows you to profile, debug and develop typical Node.js programs with some of the features of Chrome DevTools. See my blog post Debugging Node.js With Chrome DevTools for more details.

The recording below shows setting breakpoints within an HTTP server.

movie

Note: This tool is still in early stages. So far it has only been tested on a couple of OSX machines. :)

Install

Install globally with npm.

npm install devtool -g

Usage

Run the command to open a new DevTools window.

Usage:
  devtool [entry] [opts]

Options:
  --watch, -w             enable file watching (for development)
  --quit, -q              quit application on fatal errors
  --console, -c           redirect console logs to terminal
  --index, -i             specify a different index.html file
  --poll, -p              enable polling when --watch is given
  --show, -s              show the browser window (default false)
  --headless, -h          do not open the DevTools window
  --timeout, -t           if specified, will close after X seconds
  --break                 insert a breakpoint in entry point
  --config                a path to .devtoolrc config file
  --verbose               verbose Chromium logging
  --version, -v           log versions of underlying tools
  --require, -r           require path(s) before running entry
  --browser-field, --bf   resolve using "browser" field
  --no-source-maps,
                --no-sm   disable source map generation
  --no-node-timers,
                --no-nt   use browser timers
  --no-browser-globals,   
                --no-bg   removes window,document,navigator from required files

Examples:

# watch/dev a JS file, with a custom index.html
devtool src/index.js --index index.html --watch

# redirect console and pipe results to a file
devtool main.js -q -c > foo.txt

# open a REPL window
devtool

# pipe content into process.stdin
devtool writer.js < README.md

# pass clean arg list to app.js
devtool app.js --watch -- entry

# register with babel before requiring our app
devtool -r babel-register app.js

You can specify --watch multiple times to watch different files/globs. If a custom --index is passed, it will also be watched for changes.

If -- is given, anything after it will be used as the arguments for the app's process.argv. This way you can avoid polluting your program arguments with those specific to devtool.

The --browser-field or --bf makes the require() statements respect the package.json "browser" field.

The --no-browser-globals or --no-bg flag makes required modules behave a little more like Node, in that window, navigator, document and some other browser globals will be undefined in required files. Note: the console and REPL may still show some of these globals.

Advanced Configuration

You can also specify advanced Electron/Node options in a rc configuration file, such as DevTools themes and V8 flags. See rc configuration for more details.

Further Documentation

See my blog post Debugging Node.js With Chrome DevTools for more details.

Use Cases

Debugging / Profiling

For example, we can use this to profile and debug browserify, a node program that would not typically run inside Chrome DevTools. Here we use console.profile(), a feature of Chrome.

// build.js
var browserify = require('browserify');

// Start DevTools profiling...
console.profile('build');

// Bundle some browser application
browserify('client.js').bundle(function (err, src) {
  if (err) throw err;
  
  // Finish DevTools profiling...
  console.profileEnd('build');
});

Now we can run devtool on our file:

devtool build.js

Some screenshots of the profiling and debugging experience:

profile

debug

Note: Performance may vary between Node and Electron, so always take the results with a grain of salt!

You can also set an initial breakpoint with the --break flag. This will insert a debugger statement (hidden behind source maps) at the start of your entry file. This way, you can add breakpoints without having to reload the program or manually add them to your source code.

# run app but break on start
devtool src/index.js --break

REPL

We can also use the DevTools Console as a basic Node REPL with some nice additional features. The require statements will be relative to your current working directory. You can run the command without any entry file, like this:

devtool

console

When you don't specify an entry file, you can pipe JavaScript in to execute it in the browser. For example:

browserify client.js | devtool -c

Browser APIs

You can also mix Node modules with browser APIs, such as Canvas and WebGL. See example/streetview.js and the respective script in package.json, which grabs a StreetView panorama with some Google Client APIs and writes the PNG image to process.stdout.

For this, you may want to use the --bf or --browser-field flag so that modules like nets will use Web APIs where possible.

Example:

devtool street.js --index street.html --quit --bf > street.png

Result:

street

Note: For the output to drain correctly, we need to close the window after the buffer has been written.

process.stdout.write(buffer, function () {
  window.close();
});

See extract-streetview for a practical implementation of this idea built on devtool.

Grunt/Gulp/Mocha

To debug Grunt/Gulp/Mocha and other commands, you will need to pass the JavaScript file that runs them. You should also include -- to avoid any argument conflicts.

# same as "gulp watch"
devtool node_modules/gulp/bin/gulp.js -c -- watch

# same as "grunt"
devtool node_modules/grunt-cli/bin/grunt -c --

# run a mocha test
devtool node_modules/mocha/bin/_mocha -qc -- ./tests/my-spec.js 

Other Examples

See the example/ folder for more ideas, and the package.json scripts which run them.

Also see devtool-examples for more ideas.

Features

This is built on Electron, so it includes the Console, Profile, Debugger, etc.

It also includes some additional features on top of Electron:

  • Improved error handling (more detailed syntax errors in console)
  • Improved source map support for required files
  • Makes various Node features behave as expected, like require.main, process.argv, process.stdin and timers
  • Console redirection back to terminal (optional)
  • File watching for development and quit-on-error flags for unit testing (e.g. continuous integration)
  • Handles process.exit and error codes
  • Supports "browser" field resolution (optional)
  • Can hide browser globals (like window and navigator) for better compatibility with Node.js modules (optional)
  • Supports config files for V8 flags, color themes, and other options

Gotchas

Since this is running in Electron and Chromium, instead of Node, you might run into some oddities and gotchas.

  • window and other browser APIs are present; this may affect modules using these globals to detect Browser/Node environments
    • The --no-browser-globals may help mitigate these issues
  • You must call window.close() to stop the process; apps will not quit on their own
  • If a native module does not work, you may need to rebuild it for the right version of Electron
  • If you want to close or exit after writing to stderr/stdout, you should do so after a callback: outStream.write(buf, callback)
  • setTimeout, setInterval and related functions are shimmed for better compatibility with Node.js timers
  • process.stdin does not work in Windows shells, see this Electron issue

Roadmap / Contributing

This project is experimental and has not been tested on a wide range of applications or Node/OS environments. If you want to help, please open an issue or submit a PR. Some outstanding areas to explore:

  • Improving syntax error handling, e.g. adding it to Sources panel
  • Exposing an API for programmatic usage
  • Exploring native addons
  • Testing against a wide range of Node.js applications and modules

You can git clone and npm install this repo to start working from source. Type npm run to list all available commands.

See Also / Comparisons

hihat

If you like this, you might also like hihat. It is very similar, but more focused on running and testing browser applications. Hihat uses browserify to bundle everything into a single source file, and uses watchify for incremental file changes.

In some ways, devtool is a spiritual successor to hihat. The architecture is cleaner and better suited for large Node/Electron applications.

iron-node

Another Electron-based debugger is iron-node. iron-node includes better support for native addons and a complex graphical interface that shows your package.json and README.md.

Whereas devtool is more focused on the command-line, Unix-style piping/redirection, and Electron/Browser APIs for interesting use-cases (e.g. Google StreetView).

devtool shims various features to behave more like Node.js (like require.main and process.exit) and overrides the internal require mechanism for source maps, improved error handling and "browser" field resolution.

node-inspector

You may also like node-inspector, which uses remote debugging instead of building on top of Electron.

This means your code will run in a true Node environment, without any window or other Browser/Electron APIs that may pollute scope and cause problems with certain modules. It has stronger support for large Node.js applications (i.e. native addons) and more control over the DevTools instance (i.e. can inject breakpoints and support Network requests).

However, since it re-implements much of the debugging experience, it may feel clunky and fragile compared to developing inside the latest Chrome DevTools (e.g. console.profile() does not exist).

Whereas devtool aims to make the experience feel more familiar to those coming from Chrome DevTools, and also promotes other features like Browser/Electron APIs.

Author: Jam3
Source Code: https://github.com/Jam3/devtool 
License: MIT license

#electron #devtool #node #javascript 

Devtool: [OBSOLETE] Runs Node.js Programs Through Chromium Devtools
Nat  Grady

Nat Grady

1658279640

Devtron: An Electron Devtools Extension

Devtron

An Electron DevTools extension to help you inspect, monitor, and debug your app.

screenshot

Features

  • Require graph to help you visualize your app's internal and external library dependencies in both the main and renderer processes.
  • IPC monitor to track and inspect the messages sent and received between the renderer and main processes in your app.
  • Event inspector that shows the events and listeners that are registered in your app on the core Electron APIs such as the window, the app, and the processes.
  • App Linter that checks your apps for possible issues and missing functionality.

Installing

npm install --save-dev devtron

Then execute the following from the Console tab of your running Electron app's developer tools:

require('devtron').install()

You should then see a Devtron tab added.

Disabled Node Integration

If your application's BrowserWindow was created with nodeIntegration set to false then you will need to expose some globals via a preload script to allow Devtron access to Electron APIs:

window.__devtron = {require: require, process: process}

Then restart your application and Devtron should successfully load. You may want to guard this assignment with a if (process.env.NODE_ENV === 'development') check to ensure these variables aren't exposed in production.

Developing locally

git clone https://github.com/electron/devtron
cd devtron
npm install
npm start

This will start a process that watches and compiles the extension as files are modified.

Then open the Console tab of your Electron app and run the following with the path updated for the location that you've cloned devtron to:

require('/Users/me/code/devtron').install()

Then a Devtron tab should appear and it will now be enabled for that application.

You can reload the extension by closing and reopening the dev tools.

Running in a browser

To make developing and debugging the extension easier, you can run it in a Chrome tab that will talk remotely to a running Electron app over HTTP.

Set the DEVTRON_DEBUG_PATH environment variable to the path of the cloned devtron repository.

Start your Electron application.

Click the Devtron tab.

You should then see the following messages logged to the Console tab:

Devtron server listening on http://localhost:3948

Open file:///Users/me/devtron/static/index.html to view

Then open /Users/me/devtron/static/index.html in Chrome

The page there will talk remotely to the running Electron app so you'll be able to fully interact with each pane with real data.

Additional Notes

  • require('devtron').install() cannot be called before the ready event of the app module has been emitted.

Webpack

When using webpack, you may experience issues resolving __dirname. In accordance with the docs, __dirname is resolved at runtime on the compiled file.

You have to two solutions:

  1. Remove devtron from Webpack bundle with config.externals
  2. Copy devtron files to the same folder as your compiled main process file

[Solution 1] Remove from webpack bundle

config.externals = [
  function(context, request, callback) {
    if (request.match(/devtron/)) {
      return callback(null, 'commonjs ' + request)
    }

    callback()
  }
]

[Solution 2] Copy devtron files

Make sure that webpack does not replace __dirname by setting:

// in your webpack config for main process
{
 target: 'electron-main',
 node: {
__dirname: false,
 }
}

Ensure that the copy target for devtron/manifest.json is the same folder as your compiled main process js file.

Ensure that the copy target for the devtron/out/browser-globals.js is out/browser-globals.js relative to your compiled main process js file.

You can copy files with copy-webpack-plugin.

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const copyFiles = [
  {
    from: path.resolve(__dirname, 'node_modules/devtron/manifest.json')
  }, 
  {
    from: path.resolve(__dirname, 'node_modules/devtron/out/browser-globals.js'),
    to: path.resolve(__dirname, 'out'),
  }
];

config.target = 'electron-main',
config.plugins = [
  new CopyWebpackPlugin(copyFiles),
]

Contributing

Have an idea for something this extension could do to make debugging Electron apps easier? Please open an issue.

Pull requests are also welcome and appreciated. Run npm test to run the existing tests. This project uses the standard JavaScript style.

🚨 WARNING: Devtron is currently unmaintained. If you're interested in becoming a maintainer, see Issue 200 for more information.

Author: Electron-userland
Source Code: https://github.com/electron-userland/devtron 
License: MIT license

#electron #devtool 

Devtron: An Electron Devtools Extension
Nat  Grady

Nat Grady

1657448220

Chrome Devtools: Chrome DevTools Packaged As an App Via Electron

Maintenance status: Chrome DevTools App. is not proactively maintained or extended.

Original readme

Icon

Chrome DevTools App

Discontinued

This project is Discontinued. See https://github.com/auchenberg/chrome-devtools-app/issues/48

Join the chat at https://gitter.im/auchenberg/chrome-devtools-app

Chrome DevTools packaged as an app using electron-prebuilt.

This project is an exploration of how much work it would take to separate Chrome DevTools from Chrome itself and to explore what separation from the browser would bring to the table in terms of new functionality, etc.

I've written an article about this project, where I go in detail, and provide a few perspectives on what this project could evolve into. https://kenneth.io/blog/2014/12/28/taking-chrome-devtools-outside-the-browser/.

Intro Tools

Installation

  1. Go to the releases page, and download the latest DMG installer (Mac only, for now)
  2. Drag Chrome DevTools App to your applications folder
  3. Start an instance of Chrome with remote debugging enabled
  4. Start Chrome DevTools App
  5. Wait a second or click the refresh button.
  6. Targets should show up. Click "Go" next to your target.
  7. Bam. There go you.

Development

How to get started from source?

  1. Run npm install
  2. Run npm start

How to start this app from source?

  1. Run npm install
  2. Run npm install bower-cli -g
  3. Run npm start

How to start a debug version of this app?

Run npm start

Releases

How to make a new build?

Run npm run release


Update on Chrome DevTools App.

Chrome DevTools App is now superseeded by https://inspect.dev/ – a new developer tool for macOS and Windows to inspect and debug your web apps and websites in Safari and WebViews on iOS devices 🤯🎉🔥


This project is highly experimental.


Author: Auchenberg
Source Code: https://github.com/auchenberg/chrome-devtools-app 
License: MIT license

#electron #devtool #chrome #javascript 

Chrome Devtools: Chrome DevTools Packaged As an App Via Electron
Adam Daniels

Adam Daniels

1654570481

Svelvet: A Svelte Component Library for Interactive Node-Based Diagrams

Simplify Diagramming with Svelvet!

Svelvet is a lightweight Svelte component library for building interactive node-based diagrams.

Version Updates

Shout out to our contributors! Here's what's new:

Changelog

v1.0.2

  • Fixed bug with importing types for TypeScript applications
  • Added a 'borderRadius' customization option for nodes
  • Fixed SVG zoom/pan bug (zoom/pan is now limited to Svelvet component only)

Key Features

  • Easy to use: To get started with Svelvet, all you need is data for nodes and edges. Visit our documentation website for streamlined, user-friendly tutorials and examples on how to get the most out of your Svelvet flowchart!
  • Interactive: Elegant and smooth interface when selecting a node to drag it across the graph.
  • Customizable: Ability to customize your nodes and edges (node size, color, border and edge type, label, anchor). More coming soon!
  • Fast rendering: Re-rendering is based on changes to initial values for nodes, edges and optional background.
  • Reliable: Svelvet is written in TypeScript and tested with Vitest, Playwright and Svelte Testing Library. Svelvet is maintained by motivated engineers seeking to contribute to the larger Svelte developer community and library ecosystem.
  • Room to Grow: There is so much we can do to improve, add features and make Svelvet the best version of itself - we welcome feedback and contributions! Scroll below for suggestions on what to contribute.
screenshot

Installation

Svelvet is available as both an npm and a yarn package. You can install it by running one of the two commands:

npm install svelvet
yarn add svelvet

Quick Start

Start by importing Svelvet into your application:

import Svelvet from 'svelvet';

A Svelvet component consists of nodes and edges (or just nodes). You can pass nodes and edges as props to the Svelvet component. You can add a dot-grid background like the example below. With the information that you provide for your nodes and edges, Svelvet will do all of the work behind-the-scenes to render your flowchart!

<Svelvet nodes={nodes} edges={edges} background />

Visit our website to learn more on how to customize your nodes and edges to your liking!

Testing

Testing is done with Vitest and the Svelte Testing Library. You can find tests in the /tests folder. In order to run the tests use the command:

npm run test

The Svelvet Team

How to Contribute

The following is a list of features and improvements by ourselves and the larger Svelte community for any open source developer to contribute. If you have any additional ideas, feel free to raise the issue or implement them as well!

  • Default values for nodes and edges
  • Constant node drag speed regardless of zoom in/out
  • Add left and right anchor locations
  • Contextual menus
  • Customize edges (source/target) with icons
  • Customize nodes via html templates/Svelte components
  • Multiple sockets and socket compatibility for links
  • Custom error handling
  • Increase test coverage for scalability
  • Integration with mobile (click and drag nodes on your phone/tablet)
  • More styling and customization of nodes and edges for complex Svelvet flow diagrams
  • Add a full stack feature to the documentation website with authentication and database that allows users to login, create and save their Svelvet diagrams

Download Details: 
Author: oslabs-beta
Source Code: https://github.com/oslabs-beta/Svelvet 
License: MIT
#npm #svelte #devtool #sveltekit

Svelvet: A Svelte Component Library for Interactive Node-Based Diagrams
Kole  Haag

Kole Haag

1600646400

Open Source Front-End DevTool | Bypeople

Responsively is a great Front-end development tool that helps develop responsive web applications 5 times faster with no additional learning curve. It lets you preview all target screens in a single window side-by-side, and much more. Find our more useful web development tools here.

#software / web apps #devtool

Open Source Front-End DevTool | Bypeople