chrome developer tools의 내용들을 기록함 (너무 기초적인것은 제외)
Element Tab
debug in console
콘솔창에 debug(function_name)을 입력하면, 해당 function에서 debugging된다. (뭐라고 표현해야할지 모르겠는데, debugger추가한 것처럼 멈춘다.)
Add exist class
Element에 새로운 class를 추가할수도 있지만, 기존의 class도 추가할 수 있다.
Console Tab
Console filter
console.log에서 filter 창에 원하는 내용만 filtering할 수 있다. (당연한건데 있는지조차 몰랐다.)
Console object
console창에 console을 입력하면 사용할 수 있는 모든 console method를 확인 할 수 있다.
Console table , group, assert
console.log 외에 object를 사용한다면 console.table, function내에서 여러 log를 묶고싶다면 console.group, console의 true false값에 따라 값을 나타내고 싶다면 console.assert를 활용해보자.
Source Tab
Restart callstack
CallStack의 function 우클릭하여 restart 할 수 있다. 이미 지나쳤는데, 해당부분을 다시 run 하고싶을 때 유용하다.
Source tab variable is accessable in console
Source Tab에 있는 Local variable 같은 것들을 console 창에 입력하여 확인할 수 있다. Local variable이 name이라면, console 창에 name을 입력하면 된다.
panel에서 사용해볼만한 기능들
cmd + shift + P 로 검색
snippets
console보다 길게 multi lines으로 코드작성하여 테스트할 때 사용 (코드실행 cmd+Enter)
coverage
현재 보이는 페이지에서 사용하고 있는 css, js를 보여줌 (%로 보여주고, 클릭하면 상세하게 볼수 있음)
FPS meter
현재 웹페이지의 FPS가 얼마인지 보여줌 (모니터에 따라서 최대치가 다름, 60Hz모니터면 최대 60, 144Hz모니터면 최대 144 표시)
sensors
Gyroscope(자이로스코프), Accelerometer(가속도계), GravitySensor(중력센서) 등 테스트 가능
live Expression
console에서 눈깔모양을 누르면 바로 실행창에서 테스트 가능
