제목은 내가 좋아하는 미드 왕좌의 게임에서 나오는 유명한 대사를 패러디 해봤다.
you know nothing jon snow
Chrome을 사용하면서 경험한 것들에 대한 이야기를 해보고자 한다.
Chrome Canary
자바스크립트로 자료구조 알고리즘 스터디를 진행하면서 부터 우리의 두번째 서브미션인
ES6 문법을 활용해볼것을 위해서 스터디 어느분에 소개로 Canary 버전을 처음 접하게
되었다.
설치를 완료하고 flags 에서 2가지 옵션을 활성화 시켜줘야 하는데 이는 es2015 에 표준이
되는 레퍼런스를 모두 지원할수 있게 해준다.
beginning Developer Tools
크롬에서 개발자 모드를 호출하는 방법
window :
F12mac :
command+option+i
-
console
자바스크립트로 간단한 코드를 테스트할때 사용하는 주된 나의 놀이터 이다.
지금은 너무나 당연하지만 당시엔 몰랐던 사실들 몇가지가 있다.
-
줄바꿈은
shift+enter이다.한줄에 끝나는 간단한 코드라면 상관없겠지만 함수를 테스트 해보려면 줄바꿈이 필요 하다. 개발도구에 뭔가를 테스트하기 시작하면 가장먼저 찾아보게 되는게 바로 이거다.줄바꿈을 어떻게하지..?
-
console.log('a')콘솔에서 console.log 라니..뭔가 변수에 담겨져 있는 값을 보고 싶거나 문자열 출력, 함수의 리턴값 출력등을 하고자 할때 그냥 해당변수를 입력하거나 리턴값이 있는 함수면 함수 실행시 리턴값이 출력된다. 여긴 콘솔이기때문에
dir,table,log모두 console 명령 없이 호출할수 있다. -
해당 콘솔 메세지는 어디서 부터 왔는지..?
클릭하면 Sources 로 이동한다. 에러 메세지도 동일하다.
-
콘솔창 초기화는 왼쪽 상단
🚫 또는ctrl+l이다.물론
F5새로고침을 해도 되지만 나처럼 페이지 깜박임을 싫어하는 분들은 이기능을 사용하면 된다. 그리고 중단부분에 위치한 체크박스Preserve log는 새로고침 을 했을때 현재 로그 기록들을 고정시키는 역할을 한다.
-
-
element select , device tool bar
최상단 elements 탭 왼쪽에 아이콘 모양으로 위치해 있는 이 2가지는 웹개발을 하면서 매우 자주 쓰고 유용한 기능이다.
-
element select
태그를 선택할수 있고 태그를 선택하게되면 elements 탭으로 이동하게 되는데 돔의 구조나 여기에 적용되있는 스타일을 확인하고 간단하게 수정해서 변경되는 스타일 효과를 확인해 보는 용도로 사용한다.
-
device tool bar
여긴 다양한 장비들 (아이폰,아이패드,안드로이드 기타 장비들) 해상도에 맞춰서 반응형 페이지를 테스트하는 용도로 사용한다. 미디어 쿼리나 스마트 그리드를 이용하여서 반응형 웹에 신경 써야 한다면 많이 활용 될 영역인것 같다.
-
Useful features
사실 이내용을 포스팅 하고자 다 아시는 내용에 대한 밑밥을 깔았던것이다.
개인적으로 앞으로 많이 사용하게 될 기능들이고 컨퍼런스에 다녀와서 공유해주신
"익명"님에게 다시한번 감사를 표한다.
-
Rendering
이 옵션이 개발자 도구에 보이지 않는다면 다음과 같이 클릭해서 호출한다.
-
Paint Flashing
페이지가 로드되면서 , 로드가 완료되고 일어나는 동작들 사용자의 움직임 클릭등 을 모두 페인팅으로 표시해준다.
-
Layer Borders
그동안 이 기능이 있는지 모르고 포토샵으로 직접 레이어를 따고 있었다.
-
FPS Meter
GPU 사용량 , FPS 를 보여준다.
-
-
NetWork
왼쪽 상단에 카메라 모양 아이콘을 누르고 새로 고침을 하게 되면
페이지가 로드 되면서 ms 단위로 페이지를 캡쳐링 한다.
React와 Redux 를 사용하고 jQuery를 지양하면서 크롬에 설치하게된 다양한
개발 도구들이 있는데 해당 도구 들에 대해선 다음 시간에 포스팅 하도록 하겠다.