chrome devtools 작은 재료 일부

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에서 코드 실행