ดูรายการตัวแปร JavaScript ทั้งหมดใน Google Chrome Console

ใน Firebug แท็บ DOM จะแสดงรายการตัวแปรสาธารณะและวัตถุทั้งหมดของคุณ ในคอนโซลของ Chrome คุณต้องพิมพ์ชื่อของตัวแปรสาธารณะหรือวัตถุที่คุณต้องการสำรวจ

มีวิธี - หรืออย่างน้อยคำสั่ง - เพื่อให้คอนโซลของ Chrome แสดงรายการตัวแปรสาธารณะและวัตถุทั้งหมดหรือไม่ มันจะประหยัดการพิมพ์จำนวนมาก

นี่คือผลลัพธ์ที่คุณต้องการหรือไม่

for(var b in window) { 
  if(window.hasOwnProperty(b)) console.log(b); 
}

สิ่งนี้จะแสดงรายการทุกอย่างที่มีในwindowวัตถุ (ฟังก์ชั่นและตัวแปรทั้งหมดเช่น$และjQueryในหน้านี้เป็นต้น) แม้ว่านี่จะเป็นรายการ ไม่แน่ใจว่ามันมีประโยชน์อย่างไร ...

มิฉะนั้นเพียงทำwindowและเริ่มลงต้นไม้:

window

สิ่งนี้จะทำให้คุณDOMWindowเป็นวัตถุที่ขยาย / อธิบายได้

เมื่อหยุดการทำงานของสคริปต์ (เช่นบนเบรกพอยต์) คุณสามารถดูกลมทั้งหมดในบานหน้าต่างด้านขวาของหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์:

เปิดคอนโซลแล้วป้อน:

• keys(window) เพื่อดูตัวแปร
• dir(window) เพื่อดูวัตถุ

windowวัตถุที่มีทุกตัวแปรสาธารณะเพื่อให้คุณสามารถพิมพ์ในคอนโซลแล้วขยายเพื่อดูตัวแปรทั้งหมด / คุณลักษณะ / ฟังก์ชั่น

หากคุณต้องการยกเว้นคุณสมบัติมาตรฐานทั้งหมดของวัตถุหน้าต่างและดูรูปกลมเฉพาะแอปพลิเคชันสิ่งนี้จะพิมพ์ลงในคอนโซล Chrome:

(function(){var standardGlobals=["top","window","location","external","chrome","document","inlineCSS","target","width","height","canvas","data","DOMURL","img","svg","ctx","url","w","a","speechSynthesis","webkitNotifications","localStorage","sessionStorage","applicationCache","webkitStorageInfo","indexedDB","webkitIndexedDB","crypto","CSS","performance","console","devicePixelRatio","styleMedia","parent","opener","frames","self","defaultstatus","defaultStatus","status","name","length","closed","pageYOffset","pageXOffset","scrollY","scrollX","screenTop","screenLeft","screenY","screenX","innerWidth","innerHeight","outerWidth","outerHeight","offscreenBuffering","frameElement","clientInformation","navigator","toolbar","statusbar","scrollbars","personalbar","menubar","locationbar","history","screen","postMessage","close","blur","focus","ondeviceorientation","ondevicemotion","onunload","onstorage","onresize","onpopstate","onpageshow","onpagehide","ononline","onoffline","onmessage","onhashchange","onbeforeunload","onwaiting","onvolumechange","ontimeupdate","onsuspend","onsubmit","onstalled","onshow","onselect","onseeking","onseeked","onscroll","onreset","onratechange","onprogress","onplaying","onplay","onpause","onmousewheel","onmouseup","onmouseover","onmouseout","onmousemove","onmouseleave","onmouseenter","onmousedown","onloadstart","onloadedmetadata","onloadeddata","onload","onkeyup","onkeypress","onkeydown","oninvalid","oninput","onfocus","onerror","onended","onemptied","ondurationchange","ondrop","ondragstart","ondragover","ondragleave","ondragenter","ondragend","ondrag","ondblclick","oncuechange","oncontextmenu","onclose","onclick","onchange","oncanplaythrough","oncanplay","oncancel","onblur","onabort","onwheel","onwebkittransitionend","onwebkitanimationstart","onwebkitanimationiteration","onwebkitanimationend","ontransitionend","onsearch","getSelection","print","stop","open","showModalDialog","alert","confirm","prompt","find","scrollBy","scrollTo","scroll","moveBy","moveTo","resizeBy","resizeTo","matchMedia","requestAnimationFrame","cancelAnimationFrame","webkitRequestAnimationFrame","webkitCancelAnimationFrame","webkitCancelRequestAnimationFrame","captureEvents","releaseEvents","atob","btoa","setTimeout","clearTimeout","setInterval","clearInterval","TEMPORARY","PERSISTENT","getComputedStyle","getMatchedCSSRules","webkitConvertPointFromPageToNode","webkitConvertPointFromNodeToPage","webkitRequestFileSystem","webkitResolveLocalFileSystemURL","openDatabase","addEventListener","removeEventListener","dispatchEvent"];
    var appSpecificGlobals={};
    for (var w in window){
        if (standardGlobals.indexOf(w)==-1) appSpecificGlobals[w]=window[w];
    }
    console.log(appSpecificGlobals);})()

สคริปต์ทำงานได้ดีเช่นเดียวกับ bookmarklet หากต้องการใช้สคริปต์เป็น bookmarklet ให้สร้างบุ๊กมาร์กใหม่และแทนที่ URL ด้วยรายการต่อไปนี้:

javascript:(function(){var standardGlobals=["top","window","location","external","chrome","document","inlineCSS","target","width","height","canvas","data","DOMURL","img","svg","ctx","url","w","a","speechSynthesis","webkitNotifications","localStorage","sessionStorage","applicationCache","webkitStorageInfo","indexedDB","webkitIndexedDB","crypto","CSS","performance","console","devicePixelRatio","styleMedia","parent","opener","frames","self","defaultstatus","defaultStatus","status","name","length","closed","pageYOffset","pageXOffset","scrollY","scrollX","screenTop","screenLeft","screenY","screenX","innerWidth","innerHeight","outerWidth","outerHeight","offscreenBuffering","frameElement","clientInformation","navigator","toolbar","statusbar","scrollbars","personalbar","menubar","locationbar","history","screen","postMessage","close","blur","focus","ondeviceorientation","ondevicemotion","onunload","onstorage","onresize","onpopstate","onpageshow","onpagehide","ononline","onoffline","onmessage","onhashchange","onbeforeunload","onwaiting","onvolumechange","ontimeupdate","onsuspend","onsubmit","onstalled","onshow","onselect","onseeking","onseeked","onscroll","onreset","onratechange","onprogress","onplaying","onplay","onpause","onmousewheel","onmouseup","onmouseover","onmouseout","onmousemove","onmouseleave","onmouseenter","onmousedown","onloadstart","onloadedmetadata","onloadeddata","onload","onkeyup","onkeypress","onkeydown","oninvalid","oninput","onfocus","onerror","onended","onemptied","ondurationchange","ondrop","ondragstart","ondragover","ondragleave","ondragenter","ondragend","ondrag","ondblclick","oncuechange","oncontextmenu","onclose","onclick","onchange","oncanplaythrough","oncanplay","oncancel","onblur","onabort","onwheel","onwebkittransitionend","onwebkitanimationstart","onwebkitanimationiteration","onwebkitanimationend","ontransitionend","onsearch","getSelection","print","stop","open","showModalDialog","alert","confirm","prompt","find","scrollBy","scrollTo","scroll","moveBy","moveTo","resizeBy","resizeTo","matchMedia","requestAnimationFrame","cancelAnimationFrame","webkitRequestAnimationFrame","webkitCancelAnimationFrame","webkitCancelRequestAnimationFrame","captureEvents","releaseEvents","atob","btoa","setTimeout","clearTimeout","setInterval","clearInterval","TEMPORARY","PERSISTENT","getComputedStyle","getMatchedCSSRules","webkitConvertPointFromPageToNode","webkitConvertPointFromNodeToPage","webkitRequestFileSystem","webkitResolveLocalFileSystemURL","openDatabase","addEventListener","removeEventListener","dispatchEvent"]; var $appSpecificGlobals={};for (var w in window){if (standardGlobals.indexOf(w)==-1) $appSpecificGlobals[w]=window[w];} window.$appSpecificGlobals=$appSpecificGlobals;console.log(window.$appSpecificGlobals);})()

David Walsh มีทางออกที่ดีสำหรับเรื่องนี้ นี่คือสิ่งที่ฉันใช้ในการรวมโซลูชั่นของเขากับสิ่งที่ถูกค้นพบในหัวข้อนี้เช่นกัน

https://davidwalsh.name/global-variables-javascript

x = {};
var iframe = document.createElement('iframe');
iframe.onload = function() {
    var standardGlobals = Object.keys(iframe.contentWindow);
    for(var b in window) { 
      const prop = window[b];
      if(window.hasOwnProperty(b) && prop && !prop.toString().includes('native code') && !standardGlobals.includes(b)) {
        x[b] = prop;
      }
    }
    console.log(x)
};
iframe.src = 'about:blank';
document.body.appendChild(iframe);

x ตอนนี้มีรูปดาวเท่านั้น

พิมพ์คำสั่งต่อไปนี้ในคอนโซล javascript:

debugger

ตอนนี้คุณสามารถตรวจสอบขอบเขตโกลบอลโดยใช้เครื่องมือดีบักปกติ

เพื่อความเป็นธรรมคุณจะได้รับทุกสิ่งในwindowขอบเขตรวมถึงเบราว์เซอร์ในตัวดังนั้นจึงอาจเป็นประสบการณ์แบบเข็มในกองหญ้าแห้ง : /

คุณอาจต้องการลองใช้Firebug lite extension สำหรับ Chrome

หากต้องการดูตัวแปรใด ๆ ในโครเมี่ยมให้ไปที่ "แหล่งที่มา" จากนั้น "ดู" และเพิ่มเข้าไป หากคุณเพิ่มตัวแปร "window" ที่นี่คุณสามารถขยายและสำรวจได้

วิธีการอัปเดตจากบทความเดียวกันที่กล่าวถึง Avindra - ฉีด iframe และเปรียบเทียบcontentWindowคุณสมบัติกับคุณสมบัติหน้าต่างสากล

(function() {
  var iframe = document.createElement('iframe');
  iframe.onload = function() {
    var iframeKeys = Object.keys(iframe.contentWindow);
    Object.keys(window).forEach(function(key) {
      if(!(iframeKeys.indexOf(key) > -1)) {
        console.log(key);
      }
    });
  };
  iframe.src = 'about:blank';
  document.body.appendChild(iframe);
})();

ประเภท: thisในคอนโซล

เพื่อให้ได้window objectฉันคิดว่า (?) ฉันคิดว่ามันเหมือนกับการพิมพ์windowในคอนโซล

มันทำงานได้อย่างน้อยใน Firefox & chrome

เนื่องจากตัวแปรสาธารณะทั้งหมดเป็นคุณสมบัติของวัตถุหน้าต่าง (ของหน้าต่าง / แท็บที่คุณกำลังดู) คุณสามารถตรวจสอบวัตถุ "หน้าต่าง" แทน หากคุณมีหลายเฟรมคุณจะต้องเลือกวัตถุหน้าต่างที่ถูกต้อง (เช่นใน Firebug) ต่อไป

ลองใช้คำสั่งง่ายๆนี้:

console.log (หน้าต่าง)

รายการตัวแปรและค่าของพวกเขา

for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }

แสดงค่าของวัตถุตัวแปรเฉพาะ

console.log(JSON.stringify(content_of_some_variable_object))

แหล่งที่มา: ความคิดเห็นจาก @ north-bradley และคำตอบจาก @ nick-craver