Skip to content

Commit 83c1f18

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 6e271f3 commit 83c1f18

File tree

1 file changed

+77
-25
lines changed

1 file changed

+77
-25
lines changed

‎utils/misc/global-state-diff/global-state-diff.html‎

Lines changed: 77 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,9 @@
132132

133133

134134
#item #values
135-
{display:grid;grid-template-columns:max-content max-content 1fr;gap:1rem 2rem}
135+
{display:grid;grid-template-columns:max-content max-content minmax(0, 1fr);gap:1rem 2rem}
136+
#item #values > *:nth-child(3)
137+
{min-width:0;overflow-wrap:break-word;word-break:break-word;}
136138

137139
#item #name
138140
{font-weight:bold}
@@ -148,16 +150,18 @@
148150
{display:flex}
149151

150152
#info
151-
{margin-bottom:20px}
153+
{display:grid;grid-template-columns:max-content 1fr;gap:20px}
152154

153155
#url
154-
{font-weight:bold;margin-bottom:10px}
156+
{font-weight:bold;margin-top:0px;color:blue}
155157

156158
#values
157-
{white-space:pre;margin-top:10px}
159+
{white-space:pre-wrap;margin-top:10px}
158160
#values.error
159161
{color:red}
160162

163+
hr
164+
{margin:20px}
161165

162166
.spc
163167
{flex:1}
@@ -188,13 +192,15 @@
188192

189193
<h3>
190194
global state diff
195+
<div style='font-weight:normal;font-size:16px'>
196+
&lt;script src=''&gt;&lt;/script&gt;
197+
</div>
191198
</h3>
192199

193200
<div>
194-
Global State Diff is a browser-based utility that analyzes the impact of loading external JavaScript resources.
195-
When a tag is injected, the tool compares the object before and after execution to identify newly added globals
196-
— including functions, variables, and namespaces. This helps developers understand what a script exposes to the
197-
global scope.
201+
Analyze the impact of loading external JavaScript resources. The tool compares the global object
202+
before and after execution to identify newly added globals to help developers understand what
203+
a script exposes to the global scope.
198204
</div>
199205

200206
<div class=input>
@@ -208,13 +214,24 @@ <h3>
208214
<div id=output>
209215
<div id=item style='display:none'>
210216
<div id=hdr>
211-
<div id=url>
212-
</div>
217+
<h3 id=url>
218+
</h3>
213219
<div class=spc></div>
214220
<img class=close>
215221
</div>
216222
<div id=info>
223+
<div>
224+
headers
225+
</div>
226+
<div id=hdrs>
227+
</div>
228+
<div>
229+
detect
230+
</div>
231+
<div id=detect>
232+
</div>
217233
</div>
234+
<hr>
218235
<div id=values>
219236
<div id=name>
220237
</div>
@@ -480,11 +497,12 @@ <h3>
480497

481498
display.info = async function(nitem,src){
482499

483-
var {txt,error} = await get(src);
500+
var {txt,hdrs,error} = await get(src);
484501
if(error)return;
485502

486503
var str = await detect(txt);
487-
$(nitem,'#info').textContent = str;
504+
$(nitem,'#info #detect').textContent = str;
505+
$(nitem,'#info #hdrs').textContent = hdrs;
488506
console.log(str);
489507

490508
}//info
@@ -497,30 +515,53 @@ <h3>
497515

498516
}//mod
499517

518+
500519
display.value = function(root,name,value){
501520

502-
var nname = ui.name.cloneNode(true);
521+
var nname = ui.name.cloneNode(true);
503522
nname.textContent = name;
504523
root.append(nname);
505524

506-
var dtype = datatype(value);
507-
var type = typeof value;
508-
var str = dtype+(dtype!=type ? ` ( ${type} )` : '');
509-
var ntype = ui.type.cloneNode(true);
510-
ntype.textContent = str;
525+
var dtype = datatype(value);
526+
var ntype = ui.type.cloneNode(true);
527+
ntype.textContent = dtype;
511528
root.append(ntype);
512529

513530
var desc;
514531
if(value===null){
515532
desc = 'NULL';
516533
}else{
517-
desc = tostring(value);
534+
switch(dtype){
535+
536+
case 'object' : desc=display.value.object(value); break;
537+
case 'promise' : desc=''; break;
538+
default : desc=tostring(value);
539+
540+
}//switch
518541
}
519-
var ndesc = ui.desc.cloneNode(true);
542+
var ndesc = ui.desc.cloneNode(true);
520543
ndesc.textContent = desc;
521544
root.append(ndesc);
522545

523-
}//display
546+
}//value
547+
548+
549+
display.value.object = function(value){console.log(value);
550+
551+
var desc = '';
552+
for(var key in value){
553+
554+
var dtype = datatype(value[key]);
555+
desc += `${key}:${dtype}, `;
556+
557+
}//for
558+
if(desc){
559+
desc = desc.slice(0,-2);
560+
}
561+
desc = tostring(desc);
562+
return desc
563+
564+
}//object
524565

525566

526567
display.error = function(values,err){
@@ -596,8 +637,9 @@ <h3>
596637

597638
function tostring(v){
598639

640+
var max = 240;
599641
var s = v.toString();
600-
var s1 = s.slice(0,80);
642+
var s1 = s.slice(0,max);
601643
if(s.length>s1.length){
602644
s1 += ` ... ( ${s.length} )`;
603645
}
@@ -641,14 +683,24 @@ <h3>
641683
return {error};
642684
}
643685

686+
var hdrs = '';
687+
for(var [key,value] of res.headers){
688+
console.log(key,value);
689+
hdrs += `${key}=${value}, `;
690+
691+
}//for
692+
if(hdrs){
693+
hdrs = hdrs.slice(0,-2);
694+
}
695+
644696
var txt = await res.text();
645697
if(!res.ok){
646698
var error = `[ ( ${res.status} ) ${res.statusText} ] ${txt}`;
647699
console.log(error);
648-
return {error};
700+
return {error,hdrs};
649701
}
650702

651-
return {txt};
703+
return {txt,hdrs};
652704

653705
}//get
654706

@@ -665,7 +717,7 @@ <h3>
665717
await init;
666718

667719
var [imports,exports] = parse(code);
668-
720+
console.log(imports,exports);
669721
var isESM = imports.length>0 || exports.length>0;
670722
var isCommonJS = /require\(|module\.exports|exports\./.test(code);
671723

0 commit comments

Comments
 (0)