발생일: 2013.09.13 문제: 얼마 전에 데일이 크롬 개발자 도구의 콘솔에 움직이는 GIF 같은 걸 넣은 사이트를 보여줬다.오. 콘솔에서 애니메이션이 돌아가는데, 정말 완전 덕스럽다. ㅎㅎ 그나저나, 크롬 개발자 도구 콘솔에 스타일을 지정할 수 있었던건가? 해결책: 아래처럼 `%c` 값으로 콘솔에 CSS 스타일을 적용할 수 있다. console.log('%cHello, color log!', 'color:red'); 이참에 나도 재밌는 걸 만들어봤다.콘솔에 이미지를 출력하는 모듈이다~http://ohgyun.github.io/console-text-image/example/example.html 나중에 이스터 에그로 쓰면 좋을 듯^^ # 참고카나리 버전에서 스타일 적용이 가능하다는 애디 오사미의 포..
console.table : 콘솔에 테이블 형태로 출력하기
발생일: 2013.09.26 문제: 깃헙에서 팔로잉하는 사람들이 Semantic UI(http://semantic-ui.com/)를 즐겨찾기 해두는 걸 보고,해당 페이지를 둘러보다 콘솔 로그를 보게 됐다. 어랏. 콘솔에 로그가 테이블 형태로 출력되네~이런 기능이 있었던가? 해결책: 아직 API 페이지에는 명시되어 있지 않는데, `console.table()`이란 있더라. `console.table(tableData);` 로 호출하면 되고,`tableData`는 key/value 형태의 값을 포함한 배열이어야 한다. 자세한 예제는 아래 이미지를 참고! Semantic UI에서는 `console.group`이랑 같이 섞어서 출력했는데,이렇게 하니 로그도 깔끔하게 보이고 자세한 내용을 디버깅하기도 좋더라. 잘..
발생일: 2011.10.26 문제: 그 동안 개발할 때엔 대부분 파이어폭스를 사용했었는데, 최근엔 크롬 개발자 도구도 파이어버그 못지 않게 훌륭한 것 같다. 파이어폭스보다 가볍고 빠른 데다, 개발자용 확장(extension)도 많아 더욱 끌린다. 마음에 든 참에 크롬 개발자 도구(Chrome Developer Tools)를 좀 자세히 보다가, 유용한 활용 팁들을 정리해봤다. 해결책: 1. 단축키 크롬 개발자 도구에서 유용한 간단한 단축키 몇 가지~ - 개발자 도구 열기(엘리먼트 패널) : Ctrl + Shift + C (맥일 경우 Command) - 개발자 도구 내 탭 전환 : Ctrl + [ or ] - 개발자 도구에서 콘솔 열고 닫기 : esc 도구를 여는 단축키가 3가지 있는데, 맥의 경우엔 기본 ..