Chaos Frontend Toolkit

A set of tools to break your web apps and, in doing so, find ways to improve them.

Chaos Frontend Toolkit is both a Web Extension and a JS library.

🧩 Web Extension

Check out https://chaos-frontend-toolkit.web.app

📘 Library

Using NPM

Installation

npm i chaos-frontend-toolkit

Usage

import chaosFrontendToolkit from 'chaos-frontend-toolkit'

// Start the experiment either with the main lib or directly using the experiment
chaosFrontendToolkit.start({ pseudoLocalization: true }) // or .stop()
chaosFrontendToolkit.pseudoLocalization.start() // or .stop()

// Or...

import pseudoLocalization from 'chaos-frontend-toolkit/pseudo-localization'

pseudolocalization.start() // or .stop()

See Experiments to learn more about the usage of each experiment

Using script tag

Installation

<script src="https://raw.githubusercontent.com/Errorname/chaos-frontend-toolkit/main/web-extension/chaos-frontend-toolkit.js"></script>

⚠️ You should host this file yourself when in production.

Usage

// Start the experiment either with the main lib or directly using the experiment
window.chaosFrontendToolkit.start({ pseudoLocalization: true }) // or.stop()
window.chaosFrontendToolkit.pseudoLocalization.start() // or .stop()

See Experiments to learn more about the usage of each experiment

🛠 Experiments

Network
Localization
- Pseudo-localization
Timers
- Timer throttling
History
- Random history navigation
Inputs
- Double every clicks
- Gremlins
Accessibility
- Black and white

Request delaying

Randomly delays your http requests for up to X milliseconds.

chaosFrontendToolkit.requestDelaying.start({
  maxDelay: 15000, // Max delay in milliseconds
  probabilityOfDelay: 0.5, // Probability of delay (between 0 and 1)
})

Request failing

Randomly fails your http requests.

chaosFrontendToolkit.requestFailing.start({
  probabilityOfFail: 0.05, // Probability of fail (between 0 and 1)
})

Denylist

Fails every http requests from a regex list.

chaosFrontendToolkit.requestDenylist.start({
  urls: ['cdn.my-app.com'], // You can use regex here
})

Pseudo-localization

Applies Pseudolocalization to every text of your app. (By Tryggvigy)

chaosFrontendToolkit.pseudoLocalization.start({
  strategy: 'accented', // Either "accented" or "bidi". (Bidi can be used to test RTL languages)
})

Timer throttling

Randomly adds or removes up to X milliseconds to your timeout and intervals.

chaosFrontendToolkit.timerThrottling.start({
  probabilityOfDelay: 0.5, // Max delay deviation in milliseconds
  maxDelayDeviation: 500, // Probability of delay (between 0 and 1)
})

Random history navigation

Randomly navigates backward or forward in the app history every 60 seconds.

chaosFrontendToolkit.historySwitch.start({
  interval: 60, // Interval in seconds between possible navigations
  probabilityOfSwitch: 0.1, // Probability of navigation (between 0 and 1)
})

Double every clicks

Every user's click on your app will be doubled with a second click on the same target.

chaosFrontendToolkit.doubleClicks.start({
  delay: 100, // Delay before second click
})

Gremlins

Simulates random user actions (mouse and keyboard) by unleashing a horde of X gremlins on your app (1 every ~50ms). (By Marmelab)

chaosFrontendToolkit.gremlins.start({
  numberOfWaves: 100, // Number of gremlins
})

Black and white

Removes all colors from your app.

chaosFrontendToolkit.blackAndWhite.start()

👤 Author

Thibaud Courtoison

Twitter: @Errorname_
Github: @Errorname

📝 License

This project is Apache 2.0 licensed.

Flask icon by Freepik UI Icons by Feather