개발자 도구에서 IIFE 변수에 액세스하십시오.

Question

전역 범위에서 액세스 할 수 있도록 설정되지 않은 한 외부에서 IIFE의 내부 변수에 프로그래밍 방식으로 액세스하지 않는다는 것을 알고 있습니다.

예를 들어

:

(function() { 
    var a = "Hello"; // a isn't accessible from the outer scope 
)(); 

console.log(a); // a is undefined 

그러나 :

(function() { 
    var a = "Hello"; 
    global.a = a; 
)(); 

console.log(a); // Displays "Hello" 

경우에, 그것의 인생이, 또는 페이지 브라우징의 전체 기간 동안 몇 초 동안 실행을 유지할 가능성이있다 일반적으로 JavaScript로 작성된 게임의 경우 IIFE에 게임 루프가 포함됩니다.

따라서 IIFE 내에 선언 된 모든 변수와 함수는 브라우저 메모리에 있어야하지만 캡슐화로 인해 개발자 콘솔에서 표시 할 수 없습니다.

제 질문은 : 코드가 실행되는 동안 이전에 코드를 수정하지 않고 표시하거나 조작 할 수있는 방법이 있습니까? 그 변수들은 메모리에 존재하고 사용되고 있기 때문에? 아마도 어떤 종류의 디버깅을 통해?

내 질문은 대부분 파이어 폭스와 크롬 (파이어 버그 및 개발자 도구)에 대한 것이지만, 일반적인 방법으로 해결된다면 문제가 해결됩니다.

Answer 1

Put a breakpoint 미래에 실행될 코드 줄에.

중단 점에 도달하면 콘솔이 해당 범위에있게됩니다.

(function() { 
 
    document.querySelector("button").addEventListener("click", myFunction); 
 

 
    var a = 1; 
 
    
 
    function myFunction (ev) { 
 
    debugger; // You could also add this breakpoint using the Dev Tools UI 
 
    console.log("A is ", a); 
 
    } 
 
})();

<button>Button</button>