<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Console could be made useful for very simple await expressions"
href="https://bugs.webkit.org/show_bug.cgi?id=165681">165681</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector: Console could be made useful for very simple await expressions
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>joepeck@webkit.org
</td>
</tr>
<tr>
<th>CC</th>
<td>bburg@apple.com, caitp@igalia.com, joepeck@webkit.org, mattbaker@apple.com, nvasilyev@apple.com, sbarati@apple.com, timothy@apple.com, utatane.tea@gmail.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Summary:
Console could be made useful for very simple await expressions
In the console it would be really useful to just type:
json = await fetch("data.json")
However `await` won't work unless it is inside of an async function. So to do something like this you would need to end up with something like:
var json; (async function() { json = await fetch("data.json") })();
Or, if await was unavailable, then users would have to:
var json; fetch("data.json").then((x) => { json = x });
I could see a useful convenience for the Inspector Console to allow you to run await expressions to populate a variable. Typing `x = await fetch("foo.json")` will eventually populate `x`. In practice the populate is almost immediate (JavaScript executes very quickly, and a human types relatively slowly). But it can be a long running operation in which case we could inform the user the value has populated.
Example input:
(a) await 10
(b) json = await fetch("data.json")
Sample Detection:
1. Input fail to parse normally.
2. Input succeed parsing if wrapped in "(async function() {" + input + "})"
3. If there are multiple `await` expressions, bail.
- Convenience is meant for something very simple, if you are doing complex code just write the full syntax.
4. If there was an assignment use the variable name, otherwise use $result.
- We could even make $result a Console ONLY value like $exception, $0, $1..$99 etc
Transformation for (a) and (b):
var $result;
(async function() {
$result = await 10;
console.info("`$result` populated");
})();
var json;
(async function() {
let start = Date.now();
json = await fetch("data.json");
let end = Date.now();
// If this took more than one second to populate, tell the user it populated.
if ((end - start) > 1000)
console.info("`json` populated");
})();
What do people think?
Advantages: Let users make use of await expressions in the console to simplify poking around in the console
Disadvantages: Obfuscates the fact that await can only be used in async functions. Can be misleading.
Precedent: We already do a convenience conversion for: `{a:1,b:2}` to `({a:1,b:2})` to produce objects instead of producing a Syntax Error for labelled statements</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>