안녕하세요 npc 입니다.

오늘 사무실와서 크롬 개발자 도구 열었다가 신기한 걸 보아서 이렇게 게시글을 작성하네요.

(이번 업데이트 정보인지는 잘 모르겠지만)

보이시나요!?

업데이트 관련 뉴스가 이렇게 뜨네요!

우선 이왕 본김에 살펴보았습니다. 

요약하자면..

1. CSS and JS code coverage [새창링크]

개발자도구 [Sources] 탭 에서 현재 내가 열고 있는 페이지가 사용중인 css나 js의 코드라인을 하이라이팅 해줍니다. (이건 링크타고 보시면 감이 올꺼라서 스샷을 올리지 않습니다)

2. Full-page screenshots [새창링크]

개발자도구 왼쪽상단에 있는 Toggle device toolbar 라는 디바이스 에뮬레이터가 있는데요, 이 걸 누른 상태에서 화면을 보면 에뮬레이터 안쪽 스크린영역에 대화상자 ( ... )가 나타납니다. 그곳을 클릭하면 전체화면을 캡쳐할 수 있는 메뉴가 생겼어요!

3. Block requests [새창링크]

기존에는 css나 js나 이미지파일 등등, 모두 제거하고 보고싶으면 소스상에 수정하거나 element에서 하나씩 직접 코드를 편집해서 제거 하고 살펴봤는데요, [Network]탭을 열고 웹 페이지를 새로고침 후, 로드되어있는 항목에서 테스트를 위해 끄고싶은 항목을 우클릭해서 block 설정후, 새로고침하시면 아주 편하게 해당 부분이 로드되지 않은 상태로 화면을 불러옵니다.

4. Setp over async await [새창링크]

만약 C#을 다루셨던 분들이라면 좀더 익숙한 개념이고, 구글 크롬의 특성상 es7 와도 관계가 있는 부분인데요. 우리는 주로 비동기 콜백을 날리면 해당 응답이 순차적으로 반드시 돌아오는 법은 없습니다. 그래서 주로 콘솔테스트 할때 답답한 경향이 있었는데, async-await를 짝으로 지어주면서 테스트 할 수있게 만들었다 라는 의미라고 저는 받아들여집니다. (이 이상 그림설명이 힘드므로 생략)

어려운 개념이니 사실 크게 이런것에 민감하게 생각하지 않았거나 처음 듣는다면 그냥 넘어가도 되는 부분입니다 :)

5. Unified Command Menu [새창링크]

사실, 이 기능은 제가 잘 안써서 모르겠는데요. 기존의 크롬 개발자도구에서 Ctrl + O 를 누르면 커멘드창이 따로 떴었는데, 여기서 ' > ' 이 명령을 더 줄 수 있다는 것인가..^^;; 가 헷갈리네요. 회원 분들중 이 기능이 뭔지 설명해 주실 수 있는 분이 있으면 답변주세요! 여기에 추가해둘게요!!

켠김에 하나하나 확인해보고 적느라 결국엔 시간이 많이 걸렸네요.

혹시 저처럼 몰랐던 분들에게 도움이 되었길 바라며.

저는 이만!

PS.

점심시간이 1시여서 이제서야 인사를 ..ㅋㅋ 식사 맛잇게 하세요!