await.-variables make interactively debugging
Promise
s a breeze. - https://github.com/rafaelgieschke/await.-variables
JavaScript’s Promise
s (in ECMAScript 2015) and async function
s (in ECMAScript 2017) are great but can be hard to debug interactively in Consoles.
This library helps by letting you declare await.
variables. They are like var
variables but automatically resolve Promise
s, print the fulfillment value (using console.log
) and assign the fulfillment value to themselves. Additionally, they automatically execute parameter-less async
(arrow) functions:
// Load library:
fetch("https://rafaelgieschke.github.io/await.-variables/await.js").then(v=>v.text()).then(eval);
// Instead of:
var promise = fetch("/");
// Execute this in Console:
await. a = fetch("/");
// (Be sure to include the dot after await!)
// Wait some time until result of `Promise` gets printed in Console.
a = a.text();
// Wait some more time.
a.match(/<a href/g);
// Or, everything in a single step:
await. b = async()=> (await (await fetch("/")).text()).match(/<a href/g);
If you forgot to declare an await.
variable, you can convert a normal global var
variable into an await.
retroactively:
c = fetch("/");
await. c;
If you want an await.
variable to lose its special powers, you can “undeclare” it via the delete
operator:
delete c;
c = fetch("/");
// No longer tries to automatically resolve c.
If the Promise
gets rejected, its rejection value will be printed using console.error
and also get assigned to the variable:
await. d = fetch("invalid://");
Execute:
fetch("https://rafaelgieschke.github.io/await.-variables/await.js").then(v=>v.text()).then(eval);
in the console.
Depending on the CSP of the target web page (if any), you might have more luck using:
document.documentElement.appendChild(document.createElement("script")).src="https://rafaelgieschke.github.io/await.-variables/await.js";
To automate the process, you can bookmark this await.-variables bookmarklet (if you cannot see a link, you might have to look at this documentation at github.io) and click it on the target page. It will try both ways of execution.
You can also load it by adding a <script>
element to your web page:
<script src="https://rafaelgieschke.github.io/await.-variables/await.js"></script>
Lastly, you can also import await.-variables as a module:
import "https://rafaelgieschke.github.io/await.-variables/await.js";
npm install await.-variables
require("await.-variables");
Promise
s in the Console (like Chrome’s DevTools Console, Firefox’s Web Console)Be structurally correct JavaScript, allow usage of normal auto-completion of variables (eg., do not embed executed code into a string like async `result = await fetch("/")`
)
async.
variables?Maybe. Maybe not.