DOM 스파이

이 모듈을 사용하면 브라우저 내에서 DOM 요소 위로 마우스를 가져가기만 하면 DOM 요소의 속성을 빠르게 볼 수 있습니다. 기본적으로 즉석 검사기입니다.


DOM 요소 위로 마우스를 가져가면 속성이 표시됩니다!

직접 사용해보십시오

아래의 전체 코드 블록을 복사하여 브라우저 웹 콘솔에 붙여넣으십시오. 이제 현재 있는 웹 페이지 주위에 마우스를 올려 놓으십시오. 당신은 무엇을 볼 수 있습니까?

(function SpyOn() {

  const _id = 'spyon-container',
        _posBuffer = 3;

  function init() {
    document.body.addEventListener('mousemove', glide);
    document.body.addEventListener('mouseover', show);
    document.body.addEventListener('mouseleave', hide);
  }

  function hide(e) {
    document.getElementById(_id).style.display = 'none';
  }

  function show(e) {
    const spyContainer = document.getElementById(_id);
    if (!spyContainer) {
      create();
      return;
    }
    if (spyContainer.style.display !== 'block') {
      spyContainer.style.display = 'block';
    }
  }

  function glide(e) {
    const spyContainer = document.getElementById(_id);
    if (!spyContainer) {
      create();
      return;
    }
    const left = e.clientX + getScrollPos().left + _posBuffer;
    const top = e.clientY + getScrollPos().top + _posBuffer;
    spyContainer.innerHTML = showAttributes(e.target);
    if (left + spyContainer.offsetWidth > window.innerWidth) {
      spyContainer.style.left = left - spyContainer.offsetWidth + 'px';
    } else {
      spyContainer.style.left = left + 'px';
    }
    spyContainer.style.top = top + 'px';
  }

  function getScrollPos() {
    const ieEdge = document.all ? false : true;
    if (!ieEdge) {
      return {
        left : document.body.scrollLeft,
        top : document.body.scrollTop
      };
    } else {
      return {
        left : document.documentElement.scrollLeft,
        top : document.documentElement.scrollTop
      };
    }
  }

  function showAttributes(el) {
    const nodeName = `<span style="font-weight:bold;">${el.nodeName.toLowerCase()}</span><br/>`;
    const attrArr = Array.from(el.attributes);
    const attributes = attrArr.reduce((attrs, attr) => {
      attrs += `<span style="color:#ffffcc;">${attr.nodeName}</span>="${attr.nodeValue}"<br/>`;
      return attrs;
    }, '');
    return nodeName + attributes;
  }

  function create() {
    const div = document.createElement('div');
    div.id = _id;
    div.setAttribute('style', `
      position: absolute;
      left: 0;
      top: 0;
      width: auto;
      height: auto;
      padding: 10px;
      box-sizing: border-box;
      color: #fff;
      background-color: #444;
      z-index: 100000;
      font-size: 12px;
      border-radius: 5px;
      line-height: 20px;
      max-width: 45%;
      `
    );
    document.body.appendChild(div);
  }

  init();

})();

작동 방식

이 모듈은 IIFE로 구현됩니다. 이렇게 하면 DOM 스파이 지원이 필요할 때마다 코드를 복사하여 웹 콘솔에 붙여넣을 수 있습니다. 문서의 본문에 div가 삽입되고 본문에서 마우스 이벤트 리스너가 활성화됩니다. 속성은 대상 요소에서 검색되어 단일 문자열로 축소된 다음 도구 설명 안에 표시됩니다.

사용 사례

UI 버그 문제 해결 지원

앱의 DOM 요소가 예상대로 작동하는지 확인합니다(클릭 시 올바른 클래스 가져오기 등)

.

다른 웹 앱이 어떻게 구성되어 있는지 알아보십시오

.

이 코드에서 배울 수 있는 것

바닐라 JS를 사용하여 툴팁 모듈을 구현하는 방법

DOM 객체의 속성을 구문 분석하는 방법

마우스의 X 및 Y 위치를 찾는 방법

문서의 스크롤 위치를 고려하는 방법

다양한 브라우저의 작동 방식 이해 - Edge, Chrome, Safari

오픈 소스

소스 코드here를 찾을 수 있으며 더 개선할 수 있도록 권장합니다! IIFE로 구현되는 것을 원하지 않거나, 다른 데이터를 보여주고 싶거나, 그냥 깨졌을 수도 있습니다!

행복한 스파이!