종종 팝업 위로 마우스를 가져간 다음 개발 도구를 연 다음 요소 탭에서 생성된 코드를 보려고 시도하여 팝업, 메뉴 또는 시간 지정 애니메이션을 디버깅하려고 합니다. 하지만 커서를 움직이면 코드가 사라집니다! 마우스를 올리면 두 요소가 나타나지만 마우스를 움직이면 사라집니다! Chrome 개발자 도구 열기(Cmd + Option + I) 콘솔 탭 열기 다음을 붙여넣고 히트 엔터: setTimeout(function(){debugger;}, 5000) 팝업으로 이동하고 5초 동안 기다리면 디버거가 페이지를 일시 중지하고 코드를 볼 수 있습니다! 디버깅을 즐기십시오! 출처 https://medium.com/@mitchwd/debugging-popups-modals-animations-e833856d80a9

크롬 확장프로그램, JSONView 크롤링을 하거나 기타 등의 작업을 하다보면 JSON 데이터를 마주하게될 때가 있는데 이 때 추천하는 크롬 확장프로그램 중 하나가 바로 JSONView이다. 프로그램 이름으로도 기능을 쉽게 유추할 수 있는데, 바로 JSON 데이터를 가독성있게 볼 수 있도록 해주는 확장프로그램이다. JSON이란? (출처: 위키백과) JSON(JavaScript Object Notation)은 "속성-값" 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷이다. 본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. JSONView 설치 크롬 확장프로그램이기 때문에 설치는 매우 쉽다. 크롬 웹스토어의 해당 ..

참조문서 : https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution 웹어플리케이션 분석할 때 쓰지만, V8_inspector을 이용하여 노드에서도 쓸 수 있다. 1. CPU Profile CPU 사용량을 기록한다. Self Time : 함수의 현재 호출을 완료하는 데 얼마나 걸린 시간 Total Time : 이 함수와 해당 함수가 호출한 모든 함수의 현재 호출을 완료하는 데 걸린 시간 2. Heap Snapshot 클릭시점에서 스냅샷 기록 Shallow Size : array string과 같이 직접적으로 메모리를 점유하고 있는 js 객체들의 크기, 실제 데이터가 있는 영역 Retained Size : GC ..

참조문서 https://www.html5rocks.com/ko/tutorials/speed/v8/ https://github.com/v8/v8/wiki 자바스크립트 엔진은 javascript로 작성된 코드를 해석하고 실행하는 인터프리터다. js엔진은 브라우저 벤더별로 다양하다. Mozilla의 Monkey시리즈, 자바의 바이트코드로 컴파일해주는 Rhino, 구글 크롬의 V8, Safari의 JavascriptCore, Explorer의 Chakra 등이 있다. 여기서 nodejs는 구글의 V8 JavaScript 엔진을 기반으로 동작한다. 우리가 자주쓰는 크롬브라우저도 V8엔진을 쓴다. 성능좋은 코드를 위해 V8을 알아보자 1. Hidden Class로 빠른 프로퍼티 접근과 정적 룩업 다른 JavaScr..

구글 크롬의 http URL 콘텐츠 다운로드 차단예정 구글은 인터넷 사용자들의 보안을 위하여 크롬의 https 사이트에서 일반 http URL 리소스들을 오는 6월부터 업데이트 되는 83버전을 시작으로 점진적으로 차단하겠다고 발표했습니다. 크롬 브라우저에서 https 웹 사이트에서의 “http 리소스”들은 다음의 순서로 차단될 예정입니다. 1. EXE, APK 등과 같은 실행 가능한 프로그램 파일.2. ZIP, ISO 등과 같은 아카이브 파일.3. PDF, DOCX 등과 같은 문서 파일4. PNG, MP3 등과 같은 미디어 콘텐츠 자세한 일정은 다음의 표를 참고하여 주시기 바랍니다. 구글 크롬의 http URL 콘텐츠 다운로드 차단 예정일정 다만, 이 일정은 안드로이드와 iOS버전 크롬에서는 한 단계씩 ..