test-console-custom-formatters.html (3595B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Webconsole custom formatters test page</title> 6 </head> 7 <body> 8 <p>Custom formatters test page</p> 9 <script> 10 "use strict"; 11 12 const proxy = new Proxy({}, {foo: "bar"}); 13 14 const variables = [ 15 "string", 16 1337, 17 { noFormat: true }, 18 { customFormatHeader: "header" }, 19 { customFormatHeaderAndBody: "body" }, 20 { customFormatObjectAndConfig: true }, 21 proxy, 22 ]; 23 24 window.devtoolsFormatters = [ 25 { 26 header: (obj, config) => { 27 if (obj.hasOwnProperty("customFormatHeader")) { 28 return [ 29 "span", 30 {"style": "font-size: 3rem;"}, 31 config ? `~${JSON.stringify(config)}~` : "custom formatted header", 32 ]; 33 } 34 return null; 35 }, 36 hasBody: () => false 37 }, 38 { 39 header: obj => { 40 if (obj.hasOwnProperty("customFormatHeaderAndBody")) { 41 return ["span", {"style": "font-style: italic;"}, "custom formatted body"]; 42 } 43 return null; 44 }, 45 hasBody: () => true, 46 body: obj => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody] 47 }, 48 { 49 header: (obj, config) => { 50 if (obj.hasOwnProperty("customFormatObjectAndConfig")) { 51 return [ 52 "span", 53 {"style": "color: purple;"}, 54 `object tag`, 55 [ 56 "object", 57 { 58 // This will trigger the "customFormatHeader" custom formatter 59 object: {customFormatHeader: true}, 60 config: config || [1, "a"] 61 } 62 ], 63 // This should print the `config` object, not formatted 64 [ 65 "object", 66 { 67 object: config || null, 68 } 69 ], 70 [ 71 "span", 72 " | serialized: ", 73 42n, 74 " ", 75 undefined, 76 " ", 77 null, 78 " ", 79 Infinity, 80 " ", 81 {foo: "bar"} 82 ] 83 ]; 84 } 85 return null; 86 }, 87 hasBody: (obj, config) => obj.hasOwnProperty("customFormatObjectAndConfig") || !!config, 88 body: (obj, config) => { 89 if (!config) { 90 config = [1, "a"]; 91 } 92 return [ 93 "span", 94 {"style": "font-family: serif; font-size: 2rem;"}, 95 "body", 96 [ 97 "object", 98 { 99 object: { 100 customFormatObjectAndConfig: true, 101 }, 102 config: [ 103 config[0] + 1, 104 String.fromCharCode(config[1].charCodeAt(0) + 1) 105 ] 106 } 107 ] 108 ]} 109 }, 110 { 111 header: (obj) => { 112 if (obj === proxy) { 113 return [ 114 "span", 115 {"style": "font-weight: bold;"}, 116 "Formatted Proxy", 117 ]; 118 } 119 return null; 120 }, 121 hasBody: () => false 122 }, 123 ]; 124 125 variables.forEach(variable => console.log(variable)); 126 </script> 127 </body> 128 </html>