chrome devtools 작은 재료 일부

1844 단어 ChromeChromeDevTool

jQuery가 포함되어 있지 않아도 $$에서 동일 할 수 있습니다.


$$('.foo') , $$('#bar') , $$('tagName') 에서 동등한 수
($가 2개인 것에 주의)

단,
* $('selector') 는 document.querySelector()* $$('selector') 는 document.querySelectorAll()를 부르는 것과 각각 비슷한 모습. 게다가 $$('selector') 그렇다면 배열을 반환합니다.

이벤트 발생을 모니터링하고 로그 출력


  • monitorEvents($('selector')) 에서 모든 이벤트를 모니터링
  • monitorEvents($('selector'),'eventName') 에서 지정된 이벤트를 모니터링
  • monitorEvents($('selector'),['eventName1','eventName3',….]) 에서 여러 이벤트 지정
  • unmonitorEvents($('selector')) 에서 감시 해제

    • 객체 배열의 경우 console.log보다 console.table이 좋습니다.


    const myArray=[
  {a:1,b:2,c:3},
  {a:1,b:2,c:3,d:4},
  {k:11,f:22},
  {a:1,b:2,c:3}
]

    console.table (myArray)



    이런 느낌이 들기 때문에 알기 쉬워진다.

    Sources 탭에 표시하고 있는 JS 코드 중, 임의의 코드를 Console로 실행할 수 있다


  • Sources 탭에서 JavaScript 코드 표시
  • 실행하고 싶은 부분의 코드를 선택한다
  • 마우스 오른쪽 버튼을 클릭하여 메뉴를 표시하고 Evaluate in console를 선택합니다.
  • Console에서 코드 실행
    • keydown과 keyup의 차이를 조심하십시오! IME 입력시 순서가 다르다!
    Chrome에 Tor를 통해 액세스하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage