128 lines
3.5 KiB
HTML
128 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Webconsole custom formatters test page</title>
|
|
</head>
|
|
<body>
|
|
<p>Custom formatters test page</p>
|
|
<script>
|
|
"use strict";
|
|
|
|
const proxy = new Proxy({}, {foo: "bar"});
|
|
|
|
const variables = [
|
|
"string",
|
|
1337,
|
|
{ noFormat: true },
|
|
{ customFormatHeader: "header" },
|
|
{ customFormatHeaderAndBody: "body" },
|
|
{ customFormatObjectAndConfig: true },
|
|
proxy,
|
|
];
|
|
|
|
window.devtoolsFormatters = [
|
|
{
|
|
header: (obj, config) => {
|
|
if (obj.hasOwnProperty("customFormatHeader")) {
|
|
return [
|
|
"span",
|
|
{"style": "font-size: 3rem;"},
|
|
config ? `~${JSON.stringify(config)}~` : "custom formatted header",
|
|
];
|
|
}
|
|
return null;
|
|
},
|
|
hasBody: () => false
|
|
},
|
|
{
|
|
header: obj => {
|
|
if (obj.hasOwnProperty("customFormatHeaderAndBody")) {
|
|
return ["span", {"style": "font-style: italic;"}, "custom formatted body"];
|
|
}
|
|
return null;
|
|
},
|
|
hasBody: () => true,
|
|
body: obj => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody]
|
|
},
|
|
{
|
|
header: (obj, config) => {
|
|
if (obj.hasOwnProperty("customFormatObjectAndConfig")) {
|
|
return [
|
|
"span",
|
|
{"style": "color: purple;"},
|
|
`object tag`,
|
|
[
|
|
"object",
|
|
{
|
|
// This will trigger the "customFormatHeader" custom formatter
|
|
object: {customFormatHeader: true},
|
|
config: config || [1, "a"]
|
|
}
|
|
],
|
|
// This should print the `config` object, not formatted
|
|
[
|
|
"object",
|
|
{
|
|
object: config || null,
|
|
}
|
|
],
|
|
[
|
|
"span",
|
|
" | serialized: ",
|
|
42n,
|
|
" ",
|
|
undefined,
|
|
" ",
|
|
null,
|
|
" ",
|
|
Infinity,
|
|
" ",
|
|
{foo: "bar"}
|
|
]
|
|
];
|
|
}
|
|
return null;
|
|
},
|
|
hasBody: (obj, config) => obj.hasOwnProperty("customFormatObjectAndConfig") || !!config,
|
|
body: (obj, config) => {
|
|
if (!config) {
|
|
config = [1, "a"];
|
|
}
|
|
return [
|
|
"span",
|
|
{"style": "font-family: serif; font-size: 2rem;"},
|
|
"body",
|
|
[
|
|
"object",
|
|
{
|
|
object: {
|
|
customFormatObjectAndConfig: true,
|
|
},
|
|
config: [
|
|
config[0] + 1,
|
|
String.fromCharCode(config[1].charCodeAt(0) + 1)
|
|
]
|
|
}
|
|
]
|
|
]}
|
|
},
|
|
{
|
|
header: (obj) => {
|
|
if (obj === proxy) {
|
|
return [
|
|
"span",
|
|
{"style": "font-weight: bold;"},
|
|
"Formatted Proxy",
|
|
];
|
|
}
|
|
return null;
|
|
},
|
|
hasBody: () => false
|
|
},
|
|
];
|
|
|
|
variables.forEach(variable => console.log(variable));
|
|
</script>
|
|
</body>
|
|
</html>
|