오랜만에 브라우저 변화에 대해 글을 쓰게되는데요 !! 바로바로 Chrome Browser 72 버전 릴리즈입니다.
(글은 19년에 적고 있으니 많이 늦었네요 ㅜㅜ 실제 패치내역은 2018년 11월에 나온 패치내역 입니다.)
그래도.. Stable은 현재 72 버전이니까 지금이라도 적어야 겠습니다.
해당 큰 변경사항에 대해서 목차로 먼저 말씀드리자면 아래와 같습니다.
Visualize performance metrics
Highlight text nodes
Copy the JS path
Audits panel updates
1. Visualize performance metrics
자 뭔가 거창해 보입니다. 성능에 대한 시각화 라고 되어있는 데 내용을 보자면 Page Load에 대한 기록 후에
DevTools는 Timings 섹션에 DOMContentLoaded 및 First Meaningful Paint 와 같은 성능 측정을 표시해준다고 하네요
네이버를 통해 확인 해 보았습니다.
F12(개발자 도구창) -> Performance -> Ctrl E(시작) -> 네이버 접속 -> Ctrl E (종료) ->
결과 화면 중앙에 Timings 에 보시면 FCP FMP DCL L 이렇게 4가지가 보이실 겁니다.
순서대로 말씀드리자면
FCP - First Contentful Paint
FMP - First Meaningful Paint
DCL - DOMContentLoaded Event
L - Onload Event
에 대해서 측정을 해서 보여준다고 하네요 ! performance Monitoring 때부터 점점 개발자 들이 쓸수 있는 기능들을 만들어 줘서 너무 좋은 것 같습니다.
2. Highlight text nodes
텍스트 노드의 강조 표시?? 내용 을 보자면 DOM 트리의 텍스트 노드 위로 마우스를 올려다 놓게 되면
DevTools 에서 뷰포트의 텍스트 노드를 강조 표시한다고 하네요
지금 저의 마우스는 Dev Tools의 Element 탭에 " Highlighting a text node ~ 에 있습니다.
자동으로 해당 부분만 #text로 잡아서 하이라이트를 해주는 기능이네요!
3. Copy the JS path
JS 경로로 복사! 라는 기능인데요 간단합니다. DevTools에는 수많은 Element 들이 나타나게 되는데요
이 Element 들에 대한 CSS Selector를 자동으로 만들어서 복사 해놓는 작업 입니다.
예시를 보시죠
저기 보시면 figcaption 이라는 태그를 통해 작성해보겠습니다.
자 이제 복사를 했으니 붙여넣기를 하면?
자동으로 querySelector와 CSS Selector를 넣어 줍니다.
보기 불편하니 두줄로 바꾸겠습니다.
자동화 할때 매우 유용 할것으로 기대됩니다. -> 빠르게 복사해서 케이스 단위로 Element -> Element-> Element 로 바로바로 셀렉터를 만들수 있을 것 으로 보여집니다. (이거때문에라도 Chrome72는 포스팅을 해야만 했죠..!!)
4. Audits panel updates
패널 업데이트 검사에 대한 이야기인데요
우선 F12(DevTools) 를 연후에 Ctrl + Shift + P
이렇게 입력 또는 Audits을 찾아서 들어오신다음에 Run audit
을 하시면 됩니다.
그리고 결과를 보면 이와같은 현재 페이지에 대한 내역이 나오게 되는데요
이중 Best Pratice 에 보시면
자바스크립트 라이브러리를 탐지 하는 기능이 추가 되었습니다.
사이트 몇개를 추가적으로 탐지 해보겠습니다.
우선 Vue.js 사이트(공식홈)에 대해서 확인해본 결과
zepto.js 와 Vue가 보이긴하네요
마지막으로 reactjs.org를 확인해보겠습니다. 어느정도 잘 탐지가 되는것 같긴하네요
Chrome 72 버전 릴리즈였습니다.~
'QA > Browser 변화' 카테고리의 다른 글
| [Chrome] 68 Update ( Release ) (업데이트 노트 ) (0) | 2018.07.26 |
|---|---|
| [Chrome] 64 Update (업데이트 노트) (0) | 2018.06.22 |