'크롬'에 해당되는 글 8건

  1. 2015.12.15 크롬 개발자 도구 기능 사용하기 #2 : 이벤트 관련 기능 (1)
  2. 2015.12.13 크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정 (1)
  3. 2015.05.13 크롬에서 인터넷 뱅킹 플러그인 설치해도 인식이 안될때
  4. 2015.02.13 크롬 개발자 도구 창 분리하기 (2)
  5. 2011.11.18 크롬 최신버전 15.0.874.121 for Chrome Stable 다운로드 직링크(11.11.17)

크롬 개발자 도구 기능 사용하기 #2 : 이벤트 관련 기능


1. 엘리먼트에 걸려있는 이벤트 목록 보기


네이버 페지를 예로 들면 검색어 입력창은 query 라는 id를 가지고 있다.

검색어 입력창에 어떤 이벤트들이 걸려 있는지 알아볼려면


var txt = document.querySelector('#query')
getEventListeners(txt)

요렇게 해서 보면 검색어 입력창에는 blur, click, focus, keydown, keyup 이벤트가 걸려 있는것을 알 수 있다.








2. 엘리먼트에서 발생하는 이벤트 모니터링


네이버 검색어 입력창에서 발생하는 이벤트를 모니터링 하기 위해서는 요렇게 하면 된다.


click, keyup 이벤트를 모니터링 하려면

monitorEvents(txt, ['click', 'keyup'])


발생하는 모든 이벤트를 모니터링 하려면 요렇게

monitorEvents(txt)








3. 이벤트 모니터링 끄기

모니터링 하던것을 끄려면 요렇게~


unmonitorEvents(txt)


Trackback 0 Comment 1
  1. IT세레스 2015.12.15 17:37 신고 address edit & del reply

    저도 구글 개발 도구를 많이 이용합니다.
    이벤트 관련 기능이 있어서 보다 더 편리하게 모니터링이 되니 저도 참고해서 알려주신대로 사용해 보겠습니다.^^

크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정


별로 쓰잘데기 있는 기능은 아니지만 그냥 왠지 재밋어 보여서~~


F12 를 눌러 크롬 개발자 도구를 연다음 console 탭으로 이동해 



document.body.contentEditable=true


요걸 입력한다.






그러면 사이트에 있는 텍스트를 마음데로 편집할 수 있다. -.- 끝~~~



Trackback 0 Comment 1
  1. IT세레스 2015.12.13 18:13 신고 address edit & del reply

    저도 크롬 개발자 도구 기능을 많이 이용하는데 이런식으로 마음껏 편집할 수 있군요.!
    정말 신기하네요. 알려주셔서 감사합니다.^^

크롬에서 인터넷 뱅킹 플러그인 설치해도 인식이 안될때



크롬에서 잘되던 뱅킹이 플러그인을 설치했는데도 계속 설치하라면서 되지 않을때 요렇게 하면 된다.


크롬 주소창에 chrome://flags/ 를 입력해서 실험실 기능 설정으로 들어간다.


쭉 떠 있는 목록 중에서 


NPAPI 사용 Mac, Windows


요 항목에 있는 사용 을 클릭해서 활성화 시킨 후 크롬 재시작후 다시 은행 사이트에 가보면 잘될 것이다.





요렇게 되 있는 것을





요렇게 바꾸고 크롬을 껏다 키면 된다.~


끝!

Trackback 0 Comment 0

크롬 개발자 도구 창 분리하기


업데이트가 되서 그런지 몰라도 언젠가 부터 크롬 개발자 도구가 다른 윈도우로 분리가 되질 않았다 -.-


그동안은 그냥 저냥 쓰고 있다가 너무 불편한 느낌이 문득 들어서 구글링을 해 보았다.


역시 구글은 모르는게 없는것 같다.


개발자 도구를 다른 창으로 분리 시킬려면 개발자 도구 상단에 있는 윈도우 모양 아이콘을 살짝 오래 꾹 누르고 있으면 바로 아래에


다른 창으로 분리 시킬수 있는 버튼이 뽁 뜬다.


고거 클릭하면 끝~




Trackback 0 Comment 2
  1. 개발푸딩 2015.07.01 10:43 address edit & del reply

    좋은정보 감사합니다. ㅎ 저도 갑자기 안보여서 찾고 있었는데 감사합니다.

  2. 케헤헤 2015.09.14 10:19 address edit & del reply

    꿀팁감사합니다

크롬 최신버전 15.0.874.121 for Chrome Stable 다운로드 직링크(11.11.17)


왠지 도움이 될것 같다면 추천을 *(-_-)*



크롬 최신버전 다운로드 직링크에요~~

http://dl.google.com/chrome/install/874.121/chrome_installer.exe

Trackback 0 Comment 0
prev 1 2 next