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
- Timers
- History
- Inputs
- Accessibility
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
Copyright © 2021 Thibaud Courtoison.
This project is Apache 2.0 licensed.