目次一覧
状態:試行錯誤履歴
閲覧数:1,558
投稿日:2019-10-13
更新日:2019-10-14
やりたいこと / 2案 / 案A.Chrome 拡張「CSS Used」を使用
案B-X.JavaScriptで抽出を行い、console.logですぐに表示する
案B-Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する
案B-X.JavaScriptで抽出を行い、console.logですぐに表示する
案B-Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する
やりたいこと / 2案 / 案A.Chrome 拡張「CSS Used」を使用
やりたいこと
ページで使用されている「id名」「class名」をChromeで取得したい
下記の逆
・使用していないCSSをチェックする、標準的な方法を知りたい
2案
案A.Chrome 拡張「CSS Used」を使用
案B.JavaScriptで抽出を行い、console.logで表示する
・X.JavaScriptで抽出を行い、console.logですぐに表示する
・Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する
案A.Chrome 拡張「CSS Used」を使用
1. 抽出したいWEBサイトを開く
2. 抽出したい要素を右クリックして「検証」
3. 右のパネルで>> 「CSS Used」を選択する
Googleページで検証してみた結果
/*! CSS Used from: Embedded */
.gb_hd{display:inline-block;padding:0 0 0 15px;vertical-align:middle;}
.gb_hd:first-child{padding-left:0;}
.gb_Lf{position:relative;}
.gb_B{display:inline-block;outline:none;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;height:30px;width:30px;color:#000;cursor:pointer;text-decoration:none;}
#gb#gb a.gb_B{color:#000;cursor:pointer;text-decoration:none;}
.gb_Qa{border-color:transparent;border-bottom-color:#fff;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;top:37px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s;}
.gb_Ra{border-color:transparent;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s;border-bottom-color:#ccc;border-bottom-color:rgba(0,0,0,.2);top:36px;}
div.gb_Ra{border-bottom-color:#ccc;}
.gb_A .gb_B{background-position:-132px -38px;opacity:.55;}
.gb_va{display:none!important;}
#gb#gb a.gb_e{color:rgba(0,0,0,0.87);text-decoration:none;}
#gb#gb a.gb_e:hover,#gb#gb a.gb_e:focus{opacity:.85;text-decoration:underline;}
.gb_f.gb_g{display:none;padding-left:15px;vertical-align:middle;}
.gb_f.gb_g:first-child{padding-left:0;}
.gb_f .gb_e{display:inline-block;line-height:24px;outline:none;vertical-align:middle;}
.gb_1{display:inline-block;line-height:28px;padding:0 12px;-webkit-border-radius:2px;border-radius:2px;}
.gb_1{background:#f8f8f8;}
.gb_1{color:#666;cursor:default;text-decoration:none;}
#gb a.gb_1.gb_1{cursor:default;text-decoration:none;}
.gb_1{border:1px solid #4285f4;font-weight:bold;outline:none;background:#4285f4;background:-webkit-linear-gradient(top,#4387fd,#4683ea);background:linear-gradient(top,#4387fd,#4683ea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=0);}
#gb a.gb_1.gb_1{color:#fff;}
.gb_1:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15);}
.gb_1:active{-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 0 rgba(0,0,0,.15);background:#3c78dc;background:-webkit-linear-gradient(top,#3c7ae4,#3f76d3);background:linear-gradient(top,#3c7ae4,#3f76d3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c7ae4,endColorstr=#3f76d3,GradientType=0);}
.gb_g{display:inline-block;-webkit-flex:0 0 auto;flex:0 0 auto;-webkit-flex:0 0 main-size;flex:0 0 main-size;}
.gb_g.gb_Ag{float:right;-webkit-order:1;order:1;}
.gb_Bg{white-space:nowrap;}
.gb_Tf .gb_Bg{display:-webkit-flex;display:flex;}
.gb_Bg,.gb_g{margin-left:0!important;margin-right:0!important;}
.gb_sc{background-image:url(//ssl.gstatic.com/gb/images/i1_1967ca6a.png);-webkit-background-size:528px 68px;background-size:528px 68px;}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25){
.gb_sc{background-image:url(//ssl.gstatic.com/gb/images/i2_2ec824b0.png);}
}
.gb_Ka{min-width:165px;padding-left:30px;padding-right:30px;position:relative;text-align:right;z-index:986;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-user-select:none;}
.gb_Ka.gb_g{-webkit-flex:1 1 auto;flex:1 1 auto;-webkit-flex:1 1 main-size;flex:1 1 main-size;}
.gb_Zc{line-height:normal;position:relative;text-align:left;}
.gb_Zc.gb_g,.gb_ce.gb_g{-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex:0 1 main-size;flex:0 1 main-size;}
.gb_mg{display:inline-block;padding:0 0 0 15px;position:relative;vertical-align:middle;}
.gb_ce{line-height:normal;padding-right:15px;}
.gb_Ka .gb_ce{padding-right:0;}
.gb_Tf .gb_Ka{min-width:0;}
.gb_Eg.gb_Eg .gb_f{display:inline-block;}
.gb_Eg.gb_Ka .gb_ce{padding-right:15px;}
.gb_Eg.gb_Ka{z-index:987;}
/*! CSS Used from: Embedded */
.gsfi{font:16px arial,sans-serif;line-height:34px;height:34px!important;}
.jhp input[type="submit"]{background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f2f2f2;border:1px solid #f2f2f2;border-radius:4px;color:#5F6368;cursor:pointer;font-family:arial,sans-serif;font-size:14px;margin:11px 4px;min-width:54px;padding:0 16px;text-align:center;}
.jhp input[type="submit"]{height:36px;line-height:27px;}
.jhp input[type="submit"]:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);background-color:#f8f8f8;background-image:linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#222;}
.jhp input[type="submit"]:focus{border:1px solid #4d90fe;outline:none;}
.tsf{background:none;}
#searchform{width:100%;}
.hp #searchform{position:absolute;top:311px;}
.sfbg{height:69px;left:0;position:absolute;width:100%;}
.sfbgg{height:65px;}
/*! CSS Used from: Embedded */
body{height:100%;margin:0;}
#viewport{min-height:100%;position:relative;width:100%;}
.content{padding-bottom:35px;}
#footer{bottom:0;font-size:10pt;height:35px;position:absolute;width:100%;}
body,a{font-family:arial,sans-serif;}
.ctr-p{margin:0 auto;min-width:980px;}
.big .ctr-p{min-width:1139px;}
body{background:#fff;color:#222;}
a{color:#1a0dab;text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
a:visited{color:#609;}
#footer a{color:#5f6368;margin:2px 10px 0;}
#footer a:active{color:#dd4b39;}
body{font-size:small;}
ul,li{margin:0;padding:0;}
.nojsv{visibility:hidden;}
#body,#footer{display:block;}
.hp #tsf{margin:0 auto;width:833px;}
#tsf{width:833px;}
.big #tsf,.hp .big #tsf{width:1139px;}
#footer a{display:inline-block;}
/*! CSS Used from: Embedded */
.hp #tsf{margin:0 auto;width:833px;}
#tsf{width:833px;}
.big #tsf,.hp .big #tsf{width:1139px;}
/*! CSS Used from: Embedded */
.z1asCe{display:inline-block;fill:currentColor;height:24px;line-height:24px;position:relative;width:24px;}
.z1asCe svg{display:block;height:100%;width:100%;}
.spch-dlg{background:transparent;border:none;}
.spch{background:#fff;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:left;top:0;visibility:hidden;width:100%;z-index:10000;transition:visibility 0s linear 0.218s,background-color 0.218s;}
.close-button{background:none;border:none;color:#777;cursor:pointer;font-size:26px;right:0;height:11px;line-height:15px;margin:15px;opacity:.6;padding:0;position:absolute;top:0;width:15px;z-index:10;}
.close-button:hover{opacity:.8;}
.close-button:active{opacity:1;}
.spchc{display:block;height:42px;position:absolute;pointer-events:none;}
.inner-container{height:100%;opacity:.1;pointer-events:none;width:100%;transition:opacity .318s ease-in;}
.text-container{pointer-events:none;}
.s2fp-h .text-container{position:absolute;}
.spcht{font-weight:normal;line-height:1.2;opacity:0;pointer-events:none;position:absolute;text-align:left;-webkit-font-smoothing:antialiased;transition:opacity .1s ease-in,margin-left .5s ease-in,top 0s linear 0.218s;}
.s2fp-h .spcht{margin-left:44px;}
.s2fp-h .spcht{left:-44px;top:-.2em;}
.s2fp-h .spcht{font-size:32px;width:460px;}
.permission-bar{margin-top:-100px;opacity:0;pointer-events:none;position:absolute;width:500px;transition:opacity 0.218s ease-in,margin-top .4s ease-in;}
.permission-bar-gradient{box-shadow:0 1px 0px #4285F4;height:80px;left:0;margin:0;opacity:0;pointer-events:none;position:fixed;right:0;top:-80px;transition:opacity 0.218s,box-shadow 0.218s;}
.google-logo{background:url(data:image/png;base64,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) no-repeat center;background-size:94px 32px;height:32px;width:94px;top:8px;opacity:0;float:right;left:255px;pointer-events:none;position:relative;transition:opacity .5s ease-in,left .5s ease-in;}
.s2fp-h .spchc{margin:auto;margin-top:312px;max-width:572px;min-width:534px;padding:0 223px;position:relative;top:0;}
.button{background-color:#fff;border:1px solid #eee;border-radius:100%;bottom:0;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;display:inline-block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color 0.218s,border 0.218s,box-shadow 0.218s;}
.s2fp-h .button{opacity:0;pointer-events:none;position:absolute;transition-delay:0;}
.r8s4j{background-color:#dbdbdb;border-radius:100%;display:inline-block;height:301px;left:-69px;opacity:1;pointer-events:none;position:absolute;top:-69px;width:301px;transform:scale(.01);transition:opacity 0.218s;}
.button-container{pointer-events:none;position:relative;transition:transform 0.218s,opacity 0.218s ease-in;}
.s2fp-h .button-container{height:165px;right:-70px;top:-70px;width:165px;float:right;}
.s2fp-h .button-container{transform:scale(.1);}
.button:active{background-color:#eee;}
.microphone{height:87px;left:43px;pointer-events:none;position:absolute;top:47px;width:42px;transform:scale(1);}
.receiver{background-color:#999;border-radius:30px;height:46px;left:25px;pointer-events:none;position:absolute;width:24px;}
.wrapper{bottom:0;height:53px;left:11px;overflow:hidden;pointer-events:none;position:absolute;width:52px;}
.stem{background-color:#999;bottom:14px;height:14px;left:22px;pointer-events:none;position:absolute;width:9px;z-index:1;}
.shell{border:7px solid #999;border-radius:28px;bottom:27px;height:57px;pointer-events:none;position:absolute;width:38px;z-index:0;left:0px;}
/*! CSS Used from: Embedded */
@media only screen and (max-width:580px){
#gb div{display:none;}
}
#gb{font-size:13px;}
#gb{position:relative;top:8px;}
div#searchform{min-width:980px;z-index:103;}
div.sfbg,div.sfbgg{min-width:980px;height:64px;}
.big form#tsf,form#tsf{width:auto;max-width:784px;overflow:hidden;}
#searchform.big>#tsf{max-width:784px;}
#gb{top:16px;}
div#viewport{position:absolute;top:0;width:100%;}
div#searchform.jhp{margin-top:0;}
#searchform.big.jhp>#tsf{max-width:none;}
.jhp>#tsf{max-width:none;}
/*! CSS Used from: Embedded */
.A8SBwf{position:relative;margin:0 auto;padding-top:6px;width:484px;}
#searchform.big .A8SBwf{width:584px;}
.RNNXgb{background:#fff;display:flex;border-radius:8px;border:1px solid #dfe1e5;box-shadow:none;border-radius:24px;z-index:3;height:44px;margin:0 auto;width:482px;}
.RNNXgb:hover{box-shadow:0 1px 6px 0 rgba(32,33,36,0.28);border-color:rgba(223,225,229,0);}
#searchform.big .RNNXgb{width:582px;}
.SDkEP{flex:1;display:flex;padding:5px 8px 0 16px;padding-left:14px;}
.FPdoLc{padding-top:18px;position:absolute;top:53px;width:487px;z-index:0;}
#searchform.big .FPdoLc{width:571px;}
.iblpc{display:flex;align-items:center;padding-right:13px;margin-top:-5px;}
/*! CSS Used from: Embedded */
.uFMOof{margin:auto;}
.nS8rZ{color:#9AA0A6;height:20px;width:20px;margin-top:3px;}
/*! CSS Used from: Embedded */
.gLFyf{background-color:transparent;border:none;margin:0;padding:0;color:rgba(0,0,0,.87);word-wrap:break-word;outline:none;display:flex;flex:100%;-webkit-tap-highlight-color:transparent;margin-top:-37px;}
.a4bIc{display:flex;flex:1;flex-wrap:wrap;}
.vdLsw{color:transparent;flex:100%;white-space:pre;}
/*! CSS Used from: Embedded */
.dRYYxd{display:flex;flex:0 0 auto;margin-top:-5px;align-items:stretch;flex-direction:row;}
/*! CSS Used from: Embedded */
.JC0tCe{flex:1 0 auto;display:flex;cursor:pointer;align-items:center;border:0;background:transparent;outline:none;padding:0 8px;width:24px;line-height:44px;}
.hb2Smf{background:url(//www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png) 0 0 no-repeat;height:24px;width:24px;background-size:24px;vertical-align:middle;}
/*! CSS Used from: Embedded */
.UUbT9{position:relative;text-align:left;margin-top:-1px;z-index:3;cursor:default;-webkit-user-select:none;}
.aajZCb{background:#fff;display:flex;flex-direction:column;list-style-type:none;margin:0;padding:0;box-shadow:0 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08);border:0;border-radius:0 0 24px 24px;box-shadow:0 4px 6px 0 rgba(32,33,36,0.28);padding-bottom:4px;overflow:hidden;}
.erkvQe{flex:auto;padding-bottom:0px;}
.RjPuVb{height:1px;margin:0 26px 0 0;}
.xtSCL{border-top:1px solid #e8eaed;margin:0 20px 0 14px;padding-bottom:4px;}
/*! CSS Used from: Embedded */
#sbt{display:none;}
.sbct{display:flex;align-items:center;min-width:0;padding:0;}
.suggestions-inner-container{flex:auto;display:flex;margin:0 20px;align-items:center;margin:0 20px 0 14px;}
.sbtc{display:flex;flex:auto;flex-direction:column;min-width:0;padding:6px 0;}
.sbic{display:flex;flex:0 1 auto;align-items:center;margin-right:14px;}
.sbl1{display:flex;font-size:16px;color:#212121;flex:auto;align-items:center;word-break:break-word;padding-right:8px;}
.sbl1>span{flex:auto;}
.sbab{display:flex;flex:0 1 auto;align-self:stretch;}
/*! CSS Used from: Embedded */
.VlcLAe{height:70px;}
/*! CSS Used from: Embedded */
.JUypV{font-size:8pt;margin-top:-16px;position:absolute;right:16px;}
/*! CSS Used from: Embedded */
a.duf3{color:#70757a;float:right;font-style:italic;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);}
a.aciXEb{padding:0 5px;}
/*! CSS Used from: Embedded */
#lga{height:233px;margin-top:89px;}
/*! CSS Used from: Embedded */
.EvHmz{bottom:0;left:0;position:absolute;right:0;}
.hRvfYe #fsettl:hover{text-decoration:underline;}
.hRvfYe #fsett a:hover{text-decoration:underline;}
.hRvfYe a:hover{text-decoration:underline;}
.fbar a,#fsettl{text-decoration:none;white-space:nowrap;}
.fbar{margin-left:-27px;}
.Fx4vi{padding-left:27px;margin:0!important;}
#fbarcnt{display:block;}
#fsr{float:right;white-space:nowrap;}
#fsl{white-space:nowrap;}
#fsett{background:#fff;border:1px solid #999;bottom:30px;padding:10px 0;position:absolute;box-shadow:0 2px 4px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);text-align:left;z-index:104;}
#fsett a{display:block;line-height:44px;padding:0 20px;text-decoration:none;white-space:nowrap;}
#fbar{background:#f2f2f2;line-height:40px;min-width:980px;border-top:1px solid #e4e4e4;}
.fbar a,#fsettl,#fsett a{color:#5f6368;}
.fbar a:hover,#fsett a:hover{color:#333;}
.fbar{font-size:13px;}
/*! CSS Used from: Embedded */
#fsl{margin-left:30px;}
#fsr{margin-right:30px;}
/*! CSS Used from: Embedded */
.b0KoTc{color:rgba(0,0,0,.54);padding-left:27px;}
.Q8LRLc{font-size:15px;}
.b0KoTc{margin-left:30px;text-align:left;}
.b2hzT{border-bottom:1px solid #e4e4e4;}
/*! CSS Used from: Embedded */
.gb_va{display:none!important;}
.gb_A .gb_B:hover,.gb_A .gb_B:focus{opacity:.85;}
/*! CSS Used keyframes */
@-webkit-keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@-webkit-keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
@keyframes gb__a{0%{opacity:0;}50%{opacity:1;}}
案B-X.JavaScriptで抽出を行い、console.logですぐに表示する
class名
document.querySelectorAll('[class]').forEach(e=>console.log(e.className));
hp vasq big
ctr-p
gb_Tf
gb_Ka gb_Bg gb_g gb_Ag gb_Eg gb_Tf
gb_ce gb_g gb_Bg gb_sg
gb_f gb_g
gb_e
gb_f gb_g
gb_e
gb_Zc gb_Bg gb_g
gb_A gb_hd gb_g
gb_Lf
gb_B gb_sc
gb_Ra
gb_Qa
gb_mg gb_g
gb_Lf
gb_de gb_1 gb_pb
gb_Ra
gb_Qa
jhp big
sfbg nojsv
sfbgg
tsf nj
A8SBwf
RNNXgb
SDkEP
iblpc
uFMOof
nS8rZ z1asCe MZy1Rb
a4bIc
vdLsw gsfi
gLFyf gsfi
dRYYxd
JC0tCe
hb2Smf
UUbT9
RjPuVb
aajZCb
xtSCL
erkvQe
sbct
suggestions-inner-container
sbic
sbtc
sbl1
sbab
sbai
VlcLAe
gNO89b
RNmpXc
JUypV
y yp
duf3 aciXEb
FPdoLc VlcLAe
gNO89b
RNmpXc
spch-dlg
spch s2fp-h
close-button
spchc
inner-container
button-container
r8s4j
button
microphone
receiver
wrapper
stem
shell
text-container
2spcht
google-logo
permission-bar
permission-bar-gradient
content
2ctr-p
EvHmz hRvfYe
fbar
b2hzT
b0KoTc
Q8LRLc
7Fx4vi
gb_va
csi
id名
document.querySelectorAll('[id]').forEach(e=>console.log(e.id));
gsr
gstyle
viewport
doc-info
cst
gb
gbw
gbwa
gb_70
searchform
tsf
tophf
sbt
duf3-46
sbfblt
spch-dlg
spch
spchx
spchc
spchl
spchb
spchi
spchf
main
body
lga
hplogo
prm-pt
swml
footer
fbarcnt
footcnt
fbar
fsr
fsettl
fsett
dk2qOd
fsl
footc
xfoot
lb
案B-Y.JavaScriptで抽出を行い変数へ格納後、console.logで表示する
class名
const classList = Array.prototype.reduce.call(document.querySelectorAll('[class]'), (classList, element) => (Array.prototype.push.apply(classList, element.classList), classList), []);
//console.log(classList);
console.log(JSON.stringify(classList,null,'\t'));
//console.log(classList);
console.log(JSON.stringify(classList,null,'\t'));
[
"hp",
"vasq",
"big",
"ctr-p",
"gb_Tf",
"gb_Ka",
"gb_Bg",
"gb_g",
"gb_Ag",
"gb_Eg",
"gb_Tf",
"gb_ce",
"gb_g",
"gb_Bg",
"gb_sg",
"gb_f",
"gb_g",
"gb_e",
"gb_f",
"gb_g",
"gb_e",
"gb_Zc",
"gb_Bg",
"gb_g",
"gb_A",
"gb_hd",
"gb_g",
"gb_Lf",
"gb_B",
"gb_sc",
"gb_Ra",
"gb_Qa",
"gb_mg",
"gb_g",
"gb_Lf",
"gb_de",
"gb_1",
"gb_pb",
"gb_Ra",
"gb_Qa",
"jhp",
"big",
"sfbg",
"nojsv",
"sfbgg",
"tsf",
"nj",
"A8SBwf",
"RNNXgb",
"SDkEP",
"iblpc",
"uFMOof",
"nS8rZ",
"z1asCe",
"MZy1Rb",
"a4bIc",
"vdLsw",
"gsfi",
"gLFyf",
"gsfi",
"dRYYxd",
"JC0tCe",
"hb2Smf",
"UUbT9",
"RjPuVb",
"aajZCb",
"xtSCL",
"erkvQe",
"sbct",
"suggestions-inner-container",
"sbic",
"sbtc",
"sbl1",
"sbab",
"sbai",
"VlcLAe",
"gNO89b",
"RNmpXc",
"JUypV",
"y",
"yp",
"duf3",
"aciXEb",
"FPdoLc",
"VlcLAe",
"gNO89b",
"RNmpXc",
"spch-dlg",
"spch",
"s2fp-h",
"close-button",
"spchc",
"inner-container",
"button-container",
"r8s4j",
"button",
"microphone",
"receiver",
"wrapper",
"stem",
"shell",
"text-container",
"spcht",
"spcht",
"google-logo",
"permission-bar",
"permission-bar-gradient",
"content",
"ctr-p",
"ctr-p",
"EvHmz",
"hRvfYe",
"fbar",
"b2hzT",
"b0KoTc",
"Q8LRLc",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"Fx4vi",
"gb_va",
"csi"
]
id名
const idList = Array.prototype.map.call(document.querySelectorAll('[id]'), element => element.id);
console.log(idList);
console.log(idList);
(41) ["gsr", "gstyle", "viewport", "doc-info", "cst", "gb", "gbw", "gbwa", "gb_70", "searchform", "tsf", "tophf", "sbt", "duf3-46", "sbfblt", "spch-dlg", "spch", "spchx", "spchc", "spchl", "spchb", "spchi", "spchf", "main", "body", "lga", "hplogo", "prm-pt", "swml", "footer", "fbarcnt", "footcnt", "fbar", "fsr", "fsettl", "fsett", "dk2qOd", "fsl", "footc", "xfoot", "lb"]
・連想配列をコンソールで深い階層の中身も全部表示する