What's new in Chrome DevTools? by Addy Osmani 간단 정리

2015.10.06 01:31

지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다.


DevTools 공통

- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능

- Console에서 다양한 syntax highlighting 지원


Network Panel

> Filmstrip 지원

 - 시간별로 스크린샷을 기록.

 - 실제 화면에 렌더링되는 내용을 알 수 있음.

> Throttling

 - 브라우저에서 네트워크 속도를 조절할 수 있음.

 - 이미 정해져 있는 속도 중에서 선택하거나 임의로 조건을 지정할 수 있음.

> Block Request

 - 특정 요청을 보내지 않도록 막을 수 있음.

 - 특정한 요청으로 인해 속도가 느려지는 것으로 의심된다면 해당 요청만 막은 후 테스트 가능.


Timeline

> long frame times

 - 붉은 삼각형은 jank가 존재하는 것을 나타냄

 - Jank: 16ms(실제로는 10ms)내에 화면이 갱신되지 못해 프레임 속도가 떨어지는 현상

> Filmstrip

 - 메뉴의 Screenshots를 선택

 - 애니메이션과 같이 화면에 그려지는 내용을 확인할 수 있음

 - 타임라인의 특정 위치를 선택하면 해당 시간에서 화면에 그려지는 내용을 알 수 있음

> Aggregated Details

 - 실행 비용이 가장 높은 코드를 쉽게 볼 수 있음

 - URL을 기준으로 모아볼 수 있음

> Paint Profiler

 - 메뉴의 Paint 선택

 - 페인트된 내용, 그리는데 걸리는 시간, 페인트에 대한 상세한 내용을 알 수 있음.


Elements Panel

> Animation Inspection

 - about:flags에서 기능을 활성화해야 사용 가능

 - Elements > Styles > Toggle Animation controls

 - playback 속도, 실행 시간등을 간단히 변경하면서 테스트 가능

> Cubic Bezier Editor

 - transition이 적용된 엘리먼트에서 직접 값을 변경해가며 테스트 가능

> DOM Animation Changes

 - Class 변경으로 애니메이션이 이루어질 때 변경이 발생하는 dom에 대한 하이라이트 지원

> Colors & Pallettes

 - Eye Dropper로 페이지상의 색을 바로 선택 가능

 - 페이지에서 사용중인 Color pallettes 지원

 - Matirial Design palette 지원

 - Custom palette 지원

> Search selectors

 - ctrl+f 후 셀렉터를 입력해서 element를 찾을 수 있음

> Event Listeners

 - 임의의 Dom에 등록된 이벤트 리스너를 확인할 수 있음

 - Framework를 사용하여 등록된 이벤트 리스너도 확인 가능

> HTML in Console

 - console에서 html element를 바로 수정할 수 있으며 화면에도 반영됨


Console

> tips

 - $0: 마지막으로 선택한 dom node

 - $$('header'): query selector의 alias

 - copy(): clipboard로 복사

 - inspect(): 코드로 특정한 코드를 선택하여 inspect할 수 있음

 - console.timeStamp: timeline에 라벨을 붙일 수 있음


Sources

> inline variables

 - 디버깅 중에 변수의 값을 인라인으로 표시

> Proactive Compilation

 - 컴파일러처럼 오류가 있을 경우 바로 표시

> Blackboxing JS libraries

 - 특정한 파일을 블랙박스 처리하여 해당 파일은 디버깅 과정에서 건너뛸 수 있음

> ES2015 Promises Inspector

 - about:flags에서 기능을 활성화해야 사용 가능

 - promise의 다양한 정보를 제공하여 디버깅을 편리하게 만듬

 - Async모드: 비동기적으로 실행되는 경우에도 call stack을 정상적으로 보여줌


이 외에도 계속 기능을 추가하고 있음



여기에서는 요약하지 않았지만 발표자료 초반에 RAIL에 대한 언급이 있다. 크롬팀에서는 Performance에 대해 지속적으로 RAIL 모델을 사용하고 있으므로 성능 개선에 대한 이해를 높이기 위해서는 RAIL 모델에 대해 이해를 하고 있는 것이 큰 도움이 될 것이다.

Devtools에 대한 세션 말고도 IE6 sucks!를 외치던 더글러스 크록포드 아저씨가 발표한 Upgrading the Web을 비롯하여 다양한 세션의 동영상이 유튜브에 업로드되어 있으니 다른 주제들도 살펴보기 바란다.


nundefined HTML5_JS_CSS Chrome, devtools, Rail, 개발자도구, 크롬

  1. Blog Icon

    비밀댓글입니다

  2. 크롬팀에서 설명하는 내용들은 대체로 개발 버전인 크롬 카나리에서 실행되는 경우가 많습니다. 카나리 버전을 한 번 사용해보시면 어떨까요? https://www.google.co.kr/chrome/browser/canary.html 이 페이지에서 다운로드 하실 수 있습니다.

Performance Guide RAIL 요약

2015.07.15 00:48

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




nundefined HTML5_JS_CSS Animation, Chrome, Google, IDLE, load, Performance, Rail, response, 구글, 성능, 크롬

DOM에서 특정 element를 제거하는 크롬 확장 프로그램

2015.02.28 12:48

아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 dom element를 문서에서 제거하는 것이다. 설정 페이지 등 일반적인 형태로 사용할 수 있는 기능들을 빼고 dom element를 제거하는 기능 구현에 집중했더니 개발 시간은 길지 않았다. 소스 코드는 다음과 같다.


// manifest.json

{

  "manifest_version": 2,


  "name": "Dom Element Remover",

  "description": "This extension removes pre-specific elements from HTML document.",

  "version": "1.0",


  "content_scripts": [

    {

      "matches": ["http://*.daum.net/*"],

      "js": ["jquery.js", "bg.js"],

      "run_at": "document_end"

    }

  ],

  "permissions": ["http://*.daum.net/"]

}


// bg.js

var $target = $('#banner');


if ($target.length) {

$target.remove();

}


두 개의 파일이면 충분하다. manifest.json에서 선언한 것과 같이 사용자가 다음 사이트에 접근하면(matches) dom의 구성이 끝난 시점에(run_at) 파일(js)을 삽입한다. 그러면 bg.js 파일이 실행되고 문서에서 id가 banner인 엘리먼트를 찾아 해당 엘리먼트가 존재할 때 엘리먼트를 제거한다.


다음 사이트 이외의 곳에서는 확장 프로그램의 기능이 실행되지 않기를 원하므로 permissions에도 도메인을 추가했다.


이 프로그램을 더 개선한다면 사용자에게 지울 엘리먼트를 선택하는 방법을 제공할 수 있을 것이다. 지금은 bg.js 파일에 직접 선택자를 지정했지만 사용자가 변경할 수 있게 한다면 더 편리한 프로그램이 될 것이다. 그리고 다음 사이트에만 적용되는 기능을 다른 사이트 혹은 임의의 사이트에서도 동작하도록 변경할 수 있을 것이다.

nundefined ETC Chrome, extensions, 크롬, 확장프로그램

Google Hangouts manifest.json 정리

2013.08.06 01:30

개인적으로 크롬 확장 프로그램(또는 크롬 익스텐션)에 관심이 있는 편이다. 그래서 이전에 간단한 확장 프로그램을 만들어보기도 했고. 크롬 확장 프로그램을 실행시키기 위해 필요한 파일 중에 하나가 manifest.json인데 Google Hangouts의 manifest.json을 예제로 삼아 간단히 정리해봤다. Hangouts가 manifest.json의  모든 항목을 사용하는 것은 아니므로 manifest.json의 전체 내용을 파악하긴 어렵지만 시작점으로는 충분히 의미있으리라 생각한다.


{

   // background 페이지는 익스텐션의 프로세스를 실행한다.

   // extensions의 기본 lifecycle에 대한 이해가 필요함

   // html이 필요 없는 경우 'scripts'를 name으로 하고 javascript 파일의 배열을 value로 설정 가능

   // 브라우저가 빨리 시작되어야 하는 경우에는 permission에 background를 설정한다.

   "background": {

      "page": "background.html"

      // 여기에 persistent를 설정할 수 있는데 특별한 설정이 없다면 true로 설정된 것

   },


   // 브라우저 액션을 위한 설정. 툴바 우측에 아이콘이 생긴다.

   "browser_action": {

      "default_icon": {

         "19": "images_2/presence/offline_19.png",

         "38": "images_2/presence/offline_38.png"

      },

      // 아이콘에 마우스를 올렸을 때 나타나는 툴팁

      "default_title": "__MSG_CHROME_EXT_SHORT_NAME__"

   },


   // 웹페이지의 컨텍스트에서 실행되는 자바스크립트 파일

   // DOM을 사용하여 브라우저의 내용에 접근, 변경이 가능

   "content_scripts": [ {

      // 아래 matches로 선택한 페이지에서 모든 프레임에 삽입할지, top 프레임에만 삽입할지 여부

      "all_frames": true,

      // 대상 페이지에 삽입할 javascript. 배열에 표시된 순서대로 삽입됨

      "js": [ "scripts/ace-contentscript.js" ],

      // 필수. js를 삽입할 대상 페이지를 결정하는 규칙

      "matches": [ "*://*.google.com/mail/*" ],

      // js가 삽입될 때를 지정.

      // document_start: css 다음에 삽입

      // document_end: DOM이 완료되면 삽입. (DomContentLoaded)

      // document_idle: 기본값. document_end와 window.onload 이벤트 사이에서 브라우저가 적절히 삽입

      "run_at": "document_start"

   }, {

      "all_frames": true,

      // 조건에 맞는 URL은 대상에서 제외.

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/notifierclient*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/_/chat*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/u/*/talkgadget/_/chat*" ],

      "run_at": "document_end"

   } ],


   // 기본 보안 제약

   // 1. eval 및 동일한 기능을 사용하여 문자열로 된 스크립트 실행 불가

   // 2. inline 스크립트 실행 불가

   // 3. local script와 객체 리소스만 로드 가능

   //

   // inline script 보안 해제: unsafe-inline

   // remote script/object 보안 해제: 필요한 origin 등록

   // eval 보안 해제: unsafe-eval

   "content_security_policy": "script-src 'self' https://*.google.com https://feedback.googleusercontent.com ; object-src 'self'",


   // _locales의 서브디렉토리를 지정한다. _locales 디렉토리가 있는 경우에는 필수

   // _locales 디렉토리가 없다면 빠져야 한다.

   "default_locale": "en",


   // 132자 이내의 설명. management ui와 스토어에 모두 노출됨

   "description": "__MSG_CHROME_EXT_DESCRIPTION__",


   // 아이콘

   // extensions의 경우 128x128과 48x48이 필수

   // 16x16의 경우 favicon용

   "icons": {

      "128": "images_2/icon-128x128.png",

      "48": "images_2/icon-48x48.png"

   },


   // 개발 과정에서 extension의 유일한 Id를 만들기 위해 사용.

   // crx로 패키징한 후 manifest.json 파일을 보면 확인 가능

   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDsDApubb73tPfYlNIFxDu3K3/EHgV6/YOJXJkld1OZ20jW/cOht1j0NggnXhQYuu1mXFUufud4I2N7b5ydyg09gcM9Va3Zk17RhNV9smbPHOd4XlzJeXifX/9MgHPu4FzCen3CiSXsOeAELJIXEuT28xICriuUko/rNPwGeIB9VwIDAQAB",


   // 항상 2

   "manifest_version": 2,


   // 최소 실행 가능한 크롬 버전

   "minimum_chrome_version": "26.0.0.0",


   // extension 이름. 45자 이하. install dialog, management ui, store에 노출

   // i18n을 사용하기 위해 아래와 같이 설정하고 프로그램에서 변경 가능

   "name": "__MSG_CHROME_EXT_SHORT_NAME__",


   // extension의 동작을 결정하는 옵션을 수정할 수 있는 페이지

   "options_page": "settingsdialog.html",


   // extensions에서 사용할 권한, API, 접근할 도메인 등등

   // 패턴: 접근 가능한 호스트. cross-origin XHR, cookie, 프로그램적으로 삽입되는 컨텐트 스크립트 등

   // background: 크롬이 빨리 뜨고 늦게 종료되도록하여 extension이 더 오래 살아있도록 함 (크롬 실행되지 않아도 extension 실행)

   // cookies: chrome.cookie 모듈 사용시

   // idle: chrome.idle 모듈 사용시

   // notifications: 권한 확인(checkPermission()) 없이 notification API 사용

   // tabs: chrome.tabs 또는 chrome.windows 모듈 사용시

   "permissions": [ "*://*.google.com/*", "*://*.orkut.com/*", "background", "cookies", "idle", "notifications", "tabs" ],


   // NPAPI plugins 설정

   "plugins": [ {

      // plugin 위치. manifest 파일로부터의 상대적 경로

      "path": "plugin/ace.dll",

      // 웹 페이지에서 접근 가능 여부

      // true: 일반 웹 페이지에서 로드 가능

      // false: extensions에서만 로드 가능

      "public": false

   }, {

      "path": "plugin/ace.bundle",

      "public": false

   }, {

      "path": "plugin/libace.so",

      "public": false

   } ],

   "requirements": {

      "plugins": {

         "npapi": false

      }

   },


   // 자동 업데이트를 위한 경로 설정

   "update_url": "https://clients2.google.com/service/update2/crx",


   // .으로 구분하는 4개의 숫자. 0 ~ 65535에서 사용. 0으로 시작할 수 없음.

   // 자동 업데이트시 이 숫자를 기준으로 삼는다.

   // 앞 자리의 숫자가 크면 뒷 자리의 숫자와 관계 없이 새로운 버전 (ex. 1.2.0 > 1.1.9.999)

   "version": "2013.717.433.1",


   // 웹에서 직접 접근 가능한 extensions의 리소스

   "web_accessible_resources": [ "*" ]

}


manifest.json 파일의 전체 내용을 알고 싶다면 크롬 개발자 사이트의 manifest 파일에 대한 페이지를 방문해보기 바란다.




nundefined ETC Chrome, chrome extensions, extensions, Google, google hangouts, hangouts, manifest, manifest.json, 구글, 크롬, 크롬 익스텐션, 크롬 확장 프로그램

  1. Blog Icon

    비밀댓글입니다

Mac에서 프로그램에 옵션 지정해서 실행시키기

2013.07.23 01:04

크롬 브라우저를 띄우면서 특정한 옵션을 지정하여 실행시켜야 하는 상황이 생겼다. 처음에는 'Mac도 unix의 일종이니까'라는 생각으로 shell script를 만들었다. 그런데 의도한대로 실행되지 않는다. 프로그램을 정상적으로 못찾았던가.. 지금은 기억이 좀 가물가물.


언젠가 애플스크립트를 본 기억이 있어 애플스크립트 편집기를 실행시켰다. 이리저리 명령어를 입력해봤지만 제대로 실행되지 않고 계속해서 오류를 일으키기에 결국 구글에서 검색. 역시나 검색해서 결과를 보니 너무 간단하다.


do shell script "open -a '/Applications/Google Chrome.app/' -options"


이렇게 스크립트를 만들고 컴파일하면 계속 애플스크립트 편집기를 띄우지 않고도 옵션을 지정하여 크롬 브라우저를 띄울 수 있다. 만약 이렇게 만들지 않았다면 매번 터미널을 열어 위의 명령어를 계속 입력하는 노가다를 하고 있었을 듯.

nundefined ETC Apple Script, Chrome