자바스크립트에서 윈도우 객체의 힘

대부분의 시간 동안 우리는 자바스크립트 프레임워크 또는 바닐라 js에서 작업하고 일부 타사 라이브러리를 사용합니다. 디버그하려면 해당 라이브러리 유틸리티에 대해 console.log를 사용하거나 디버거를 사용하여 값을 확인합니다. 이것의 문제는 실제로 이동 중에 테스트할 수 없다는 것입니다. 즉, 다른 입력을 더 빨리 시도할 수 없습니다. 코드에서 수동으로 수행해야 합니다. 예를 들어:

프로젝트에 using date-fns을 사용하고 있다고 가정합니다. 그리고 하나의 기능을 테스트하고 싶다면 다음과 같이 말할 수 있습니다.

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

이제 숫자가 23인 경우 표시되는 내용을 추적하고 싶습니다. 이 모든 것을 확인하려면 코드에서 수동으로 수행해야 합니다.

오늘은 이동 중에 이러한 함수 호출을 탐색하는 또 다른 방법을 알려 드리겠습니다. 즉 by accessing window object
해야 할 일:

창 개체에 기능을 할당합니다.
참고: 이 경우에는 거리 형식을 사용하고 있습니다. 어떤 이름과 다른 기능도 설정할 수 있습니다.

window.formatDistance = formatDistance

이제 창 개체를 사용하여 이 기능에 액세스할 수 있습니다

.

이제 브라우저 콘솔에서 로 재생할 수 있습니다. 코드 편집기를 사용하여 이동할 필요 없음

지금 어떻게 작동하는지 테스트하고 싶다면. 여기 링크가 있습니다. 브라우저 콘솔을 열고 가지고 놀아보세요: link

메모:

이것은 디버깅 목적입니다. 프로덕션 환경에 배포하지 마십시오. 보안 위협이 발생할 수 있습니다. 디버깅이 완료되면 이 제거 외에도 지속적으로 추가하면 메모리 오버플로 문제가 발생할 수 있습니다.

또한 이와 같은 식별자window.__identifierName__를 사용하여 이것이 자신의 창의성임을 항상 기억할 수 있도록 하십시오. 나중에 쉽게 제거할 수 있도록 😛 (이것을 언급해 준 @TiagoDias에게 감사드립니다)