[Chrome] 64 Update (업데이트 노트)

안녕하세요 오늘은 Chrome 64 업데이트 노트 에 대해서 확인해보려고합니다.

** 해당 내용은 아래의 URL에 전부 다 나와있는 내용입니다.

Update Release Note URL

https://developers.google.com/web/updates/2017/11/devtools-release-notes

2018년 1월 19일 에 업데이트 되었으며 크게 바뀐점은

1. Performance Monitor : 페이지 성능을 실시간으로 확인

2. Console Sidebar : 콘솔에 필요없는 것들은 줄이고 중요 한 메시지들에 집중

3. Group Similar Console message : 유사한 콘솔 메시지들에 대한 그룹화 

** chrome://version/ 을 url에 입력하면 Chrome 버전에 대한 정보가 나타납니다. 

확인 후 진행시 가장 최 상단에

Chrome

64.0.3282.119 (공식 빌드) (64비트) (cohort: 64_119_win)

이와 같이 나타납니다. 

1. Performance Monitor 

성능 테스트를 하고 싶은 페이지를 Chrome으로 접속 후 F12(개발자 도구창)

을 연 후에

Ctrl + Shift + P 를 누릅니다.

해당과 같은 창이 나타나게 되는데 이부분에서 Performance Monitor를 검색하게 되면 

해당메뉴가 나타나며 엔터를 치게 되면 개발자 도구창 하위에

해당과 같은 성능 모니터링이 나타나게 됩니다.

현재는 무난하지만 특정 이벤트를 마구 지정해보겠습니다. ( 해당 사이트에 )

특정 데이터를 실시간으로 받아서 차트 2개를 그리는 작업을 하였습니다.

CPU Usage 가 순간적으로 올라가는 것이 확인됩니다. 아직 무리가 되는 작업은 아닌것으로 보입니다.

앞으로 Chrome 브라우저에서의 성능은 이것으로 확인하면 될것 같네요 

**

Ctrl + Shift + P 를 누른 후에 

FPS를 입력하게 되면 해당 페이지 창에서 해당과 같은 화면도 같이 확인이 가능합니다. 

2. Console SideBar

개발하다보면 Console.log Console.warn Console.error 등을 많이 사용하게 되는데

해당사용에 대한 편리함을 제공 해줍니다.

해당 빨간줄을 클릭하게되면

해당과 같이 콘솔 사이드 바를 통해서 원하는 콘솔 오류만 골라서볼수 있게 됩니다.

3. Group Similar Console messages

많은 유사 메시지들이 나타나는 것들에 대해서 묶어서 보여주게 되는 기능이며 아래 와 같은 체크 메뉴로 enabled disabled 가 가능합니다.

enabled 시에 묶여있는 메시지들을 클릭시에 Expand 도 가능하니 참고 바랍니다.

**   CSS3 Hover Effects

transition :box-shadow  0.2s;   참조