깍돌이

오랜만에 브라우저 변화에 대해 글을 쓰게되는데요 !! 바로바로 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 버전 릴리즈였습니다.~

2018년 7월 25일 크롬 68 버전이 업데이트 되었습니다. (Stable)버전이죠

not Stable 버전인 Dev 버전은 지금 69.0.3497.12 for Windows, Mac and Linux라고 표기되어있네요

그래서! 오늘은 68버전에 뭐가 변경되어있나 확인해보려고 합니다.

우선

크롬 패치에 대한 로그 사이트입니다.

// 크롬 로그 사이트 69 버전이기 때문에 참고만 하시는게 좋을것 같습니다.

https://chromium.googlesource.com/chromium/src/+log/69.0.3493.3..69.0.3497.12?pretty=fuller&n=10000

우선 68버전의 공식 명칭은

Chrome 68.0.3440.75 이며 해당 에 대한 수정 사항은 위의 로그를 통해서 확인할수 있으며

Chrome 또는 Chromium 블로그 에서  68에 대한 기능 및 큰 변화들을 제공하기 떄문에 참고 하여도 좋을 것 같습니다.

1. HTTP Sites Marked as 'Not Secure'

대표적인 안건으로 되어있네요 SSL(Secure Socket Layer) 를 입히지 않은 사이트에 대해서는 Not Secure 마크를 붙이겠다 라는 거같습니다. 68버전 부터는 이제 안전하지 않은 사이트로 취급이 되겠네요 제 티스토리도 마찬가지...

크롬 블로그 내용 입니다.

'Chrome 68 에서는 모든 HTTP 페이지에 대한 Not Secure("안전하지않음") 이라는 마크를 붙일 겁니다. 그리고 이에 대한 해당 내용은 2월 8일 의 Google Chromium 및 ONline Security 블로그에 게시하여 이를 발표 하였습니다.'

'또한 Chrome에서 보안되지않음 (Not Secure) 경고 페이지를 보지 않기 위해서는 HTTPS로 마이그레이션 하는것이 좋습니다. HTTPS는 SEO,광고 수익 및 실적 영향등 문제를 해결해 줍니다.' 

라네요

이미 공표 된 패치였나보네요

** 업뎃 하니 나타납니다.

2. Security Fixed and Rewards

이외의 자잘한 보안 수정 관련 로그입니다. 약 42개의 보안 패치를 적용 하였으며 

// 해당 내용은 아래의 URL에서 보안 패치에 대한 내용을 읽을수 있습니다.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security

여기까지는 Google Chrome 블로그에 게시된 내용이였으며

New in Chrome 68  로 게시된 개발자 사이트에서 변경된 점을 포스팅하려 합니다.

대표적인 카테고리 부터 보고 들어가자면

Add to Home Screen behavior

Page Lifecycle API

Payment Handler API

3가지가 있겠네요  해당 내용은 크롬 개발 도구창에 들어가면 나타납니다.

1. Add to Home Screen changes

정해진 웹사이트가 Chrome에서 지정한 추가 기준을 충족시에는 홈 화면에서 추가 배너가 나타나지 않습니다.

또는 사용자에게 언제 어떻게 프롬프트 창을 표시할지도 정할수 있습니다.

* 사용자에게 프롬프트 창을 표시하기 위해서는 beforeinstallprompt 이벤트를 리스너로 추가한 후에

버튼 또는 UI요소를 추가하여 설치 가능 여부를 나타낼수 있습니다.

// 프롬프트 코드 

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

해당 에서 ADD버튼을 클릭하게되면 beforeinstall 이벤트에서 prompt를 호출시 Chrome 에 홈 화면 추가 대화상자가 표시됩니다.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

이에 대한 자세한 내용에 대해서는

사이트를 참조 바랍니다. 풀 코드가 있습니다.

// 홈 화면 배너 관련 

https://developers.google.com/web/updates/2018/06/a2hs-updates

2. Page Lifecycle API

페이지 라이프 사이클 관련 API 입니다. 이에 대한 해당 내용은 좀더 분석하고 따로 한번 더 포스팅 하도록 해야 될거 같아서 따로 하겠습니다.

러프하게 말씀드리자면

(이미지를 누르시면 원본으로..)

FROZEN -> HIDDEN 부분에 보시면 resume 과 freeze라는 개념이도입되었습니다. 

크롬 사이프 사이클 중 freeze -> resume -> freeze가 가능하게 되어있네요 무슨 의미인지는 모르겠지만 좀더 봐야겠네요

내용 전문입니다.

"사용자가 다수의 탭을 실행하게 되면 메모리,CPU,배터리 및 네트워크와 같은 중요한 리소스가 과도하게 발생할수 있기 때문에 사용자 환경은 매우 좋지 않습니다."

"만약에 사이트가 백그라운드에서 실행 중이면 시스템 리소스를 절약하기 위해서 사이트를 일시 중지 할수 있습니다.

새로운 Page LifeCycle API 를 사용하면 이러한 이벤트를 수신 및 응답이 가능합니다."

"예를 들면 잠시 동안 백그라운드에서 탭이있는 경우 브라우저를 해당 페이지에서 스크립트 실행을 일시 중단하여 리소스를 절약 할수 있습니다."

" 그전에 Freeze 이벤트를 실행하여 열려있는 IndexedDB 또는 네트워크 연결을 닫거나 저장하지 않은 보기 상태를 저장할 수 있습니다. 그 후 -> 사용자가 탭을 다시 초점 맞추면 다시 시작 이벤트가 발생하여 해체된 항목을 다시 초기화 할수 있습니다."

// 관련 freeze -> resume 코드 

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

이와관련 된 문서가 있습니다.

// Page Lifecycle API doc

https://developers.google.com/web/updates/2018/07/page-lifecycle-api

// Page Lifecycle 1 Spec

https://wicg.github.io/page-lifecycle/spec.html

// 해당 git hub

https://github.com/WICG/page-lifecycle

3. Payment Handler API

표준 방식의 결재를 받아들이는 결재 관련 요청 API 가 오픈되었습니다. 

결재 API 는 웹 기반 결재 응용 프로그램이 결재 환경에서 직접 결재 할수 있도록 용이하게 함으로 결재의 범위를 확장합니다.

크롬팀에서 이렇게 말하네요

"기존의 웹 에 결재 기능을 추가하는 것은 supportedMethod 등록 정보에 항목 추가하는 것 만큼 쉽습니다."

// 관련 결재 코드 

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

결재 를 처리할수 있는 서비스 워커(Service Worker) 가 설치되면 결재관련 UI가 나타나며 사용자는 결재를 할수 있습니다.

이와관련하여서 Eiji 는 훌륭한 내용을 담고 있습니다.

// Eiji URL 

https://developers.google.com/web/updates/2018/06/payment-handler-api

이번 내용은 너무 광범위해서 포스팅을 러프하게 가져오는 정도로는 애매한거 같네요 시간이 된다면 꼭 LifeCycle 관련은 한번 더 쓰려고 합니다.

감사합니다

안녕하세요 오늘은 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 버전에 대한 정보가 나타납니다. 

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

이와 같이 나타납니다. 

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;   참조