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

$3

#### Installation

``sh
npm i chaos-frontend-toolkit
`

#### Usage

`js
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

$3

#### Installation

`html

`

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

#### Usage

`js
// 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
- Request delaying
- Request failing
- Denylist
- Localization
- Pseudo-localization
- Timers
- Timer throttling
- History
- Random history navigation
- Inputs
- Double every clicks
- Gremlins
- Accessibility
- Black and white

$3

Randomly delays your http requests for up to X milliseconds.

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

$3

Randomly fails your http requests.

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

$3

Fails every http requests from a regex list.

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

$3

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

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

$3

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

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

$3

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

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

$3

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

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

$3

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

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

$3

Removes all colors from your app.

`js
chaosFrontendToolkit.blackAndWhite.start()
``

👤 Author

Thibaud Courtoison

- Twitter: @Errorname\_
- Github: @Errorname

📝 License

Copyright © 2021 Thibaud Courtoison.

This project is Apache 2.0 licensed.

Flask icon by Freepik
UI Icons by Feather