概要

Chrome DevToolsの2016年4月と2016年8月から2016年10月までのアップデート内容の要約を確認したときのメモです。
確認は2016年10月31日から11月1日にかけて行いました。Chromeのバージョンは下記の環境に記載の通りです。

環境

Windows10 Professional
Chrome 54.0.2840.71 m (64-bit)
Chrome Canary 56.0.2905.0 canary (64-bit)

[DevTools Digest, October 2016] (https://developers.google.com/web/updates/2016/10/devtools-digest)

Consoleに新しい機能を追加

Chrome 56よりDevToolsのConsoleにCodeMirrorが使われるようになります。これにより下記の機能が追加されます。

CodeMirrorについて

[CodeMirror] (https://codemirror.net/)
[Qiita - CodeMirrorでブラウザ上で動作するコードエディタを作る] (http://qiita.com/qmotas/items/90dbe1f8f60136cf39bf)

Syntax highlight

入力中のコードでもSyntax highlightされます。
Chrome 54では評価後にSyntax highlightされます。

Canary 56

Chrome 54

入力中のコードはSyntax highlightされません。

コード評価後であればSyntax highlightされます。

Matching parenthesis() / bracket[] / brace{} highlighting

余分なパレンセシース(パーレン)、ブラケット、ブレースが入力されると赤い下線が表示されます。

Canary 56

Chrome 54

Smart return

コードブロックを入力するとenterを押す度にコードを実行するかどうか自動的に判断してくれます。
Chrome 54では複数行のコードブロックを入力したい場合shift+enterで改行する必要がありました。

Canary 56

下図ではわかりませんが、ブレースで改行していてカーソルは2行目にあります。
改行してもコードブロックの途中と判断されたのでコードは実行されません。

Chrome 54

改行するとコードが実行されてしまいますが、コードが完全ではないためSyntaxErrorになっています。

Multiple cursors

いままではElementsパネルやSourcesパネルでも使えていましたが、Consoleでも使用できるようになります。

Multiple cursorsについて

[Tip: Chrome DevTools supports multiple cursors & selections in the ...] (https://plus.google.com/+AddyOsmani/posts/dygXp9muRtn)
[Chrome DevTools: DevTools - Command click to add multiple cursors in the Sources Panel] (https://umaar.com/dev-tips/12-multiple-cursors/)

Canary now highlights non-top contexts red

Consoleパネルでcontext selectorにtop以外を選択すると赤色で強調表示します。

[Selecting execution context] (https://developers.google.com/web/tools/chrome-devtools/console/#execution-context)

指定できるユーザーエージェントにUC Browserが追加

Canary 56

drawerでNetwork conditionsを開きます。

選択できるユーザーエージェントにUC Browserがあります。

UC Browserについて

[Google Play - UCブラウザ－それを高速にサーフィン] (https://play.google.com/store/apps/details?id=com.UCMobile.intl&hl=ja)
[Qiita - インドネシアの特殊なブラウザ事情(Opera Mini,UC Browser Mini)] (http://qiita.com/takanamito/items/8c2b6bc24ea01381f1b5)
[Webプッシュ対応の中国発ブラウザ「UC Browser」について調べてみました] (https://pushnate.com/labs/webpush/ucbrowser-webpush)

[DevTools Digest, September 2016] (https://developers.google.com/web/updates/2016/09/devtools-digest)

CPU throttling for a mobile-first world

TimelineパネルにCPU throttlingが追加されました。
開発用PCにハンデを付けて実行環境をスマホの実機に近づけることができます。

Network view in timeline recordings

TimelineパネルにNetworkを計測するチェックボックスが追加されました。

Passive event listeners

ElementsパネルのEvent listenersペインで簡単にPassive listenerが確認できます。
下図は[Scroll jank due to touch/wheel handlers demo] (https://rbyers.github.io/scroll-latency.html)というデモページで確認したものです。

Ancestors All

Ancestors Passive

リストからPassiveを選ぶとPassive listenerでフィルタリングできます。

カーソルをあわせると"Toggle Passive"というボタンが表示されます。クリックするとpassiveの切り替えができます。

スクロールのパフォーマンスに影響を与えそうな箇所を確認

drawerでRenderingを開き"Scrolling Performance Issues"をチェックします。

{passive:true}ではないevent listenerが貼られている箇所が視覚化されます。

preventDefault

{passive:true}であるevent listenerのリスナー（コールバック関数）内ではpreventDefaultを実行しないことが期待されますが、もし実行した場合はコンソールに下記のエラーメッセージが表示されます。

var ele = document.getElementById('foo');
ele.addEventListener('touchstart',
  function(event) {
    event.preventDefault();  //←実行するとエラーメッセージが表示される
    alert('foo touchstart');
  },
  {passive: true}
);

エラーメッセージ

Unable to preventDefault inside passive event listener invocation.

Passive event listenersについて

[Improving Scroll Performance with Passive Event Listeners] (https://developers.google.com/web/updates/2016/06/passive-event-listeners)
[ウェブのスクロールパフォーマンスを改善する新しい API のご紹介] (https://googledevjp.blogspot.jp/2016/06/api.html)
[WICG/EventListenerOptions] (https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md)
[Passive Event Listeners によるスクロールの改善] (https://blog.jxck.io/entries/2016-06-09/passive-event-listeners.html)

addEventListener

構文

target.addEventListener(type, listener[, options]);

addEventListenerについて

[MDN > 開発者向けのWeb技術 > Web API インターフェイス > EventTarget > EventTarget.addEventListener] (https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)

Activityでグルーピングする

TimelineパネルのCall Treeペインで、Activityでグルーピングできるようになりました。

Group by Categoryの場合

javascriptの関数の実行時間を確認する

Canaryに実装されていた機能がChromeにも反映されました。

[DevTools Digest, August 2016] (https://developers.google.com/web/updates/2016/08/devtools-digest)

Applicationパネル

ResourcesパネルはApplicationパネルに名前が変わりました。

ChromeLens

ChromeLensというDevToolsの拡張機能があります。
Google Playよりインストールでき、インストールするとChromeLensというパネルが追加されます。

ChromeLensの設定画面

通常の見え方

ChromeLensを有効にしたときのページの見え方

下図は"Protanopia (red-blind)" (赤色覚異常)を設定した場合

ChromeLensについて

[ChromeLens - 視覚障害者向け開発のためのChrome DevToolsエクステンション] (http://chromelens.xyz/)
[Github - chromelens] (https://github.com/chromelens/chromelens)

New features now in Canary

Canary(Canary is currently Chrome 54)の新機能という見出しですが、現在のChromeのバージョンがこの時のCanaryのバージョンに追い付いているので、下記の機能はChromeでも使用できます。

Sourcesパネルでカラーピッカーが使える

Sourcesパネルでもカラーピッカーが使えます。

リソースファイルをcURLで取得する

NetworkパネルのResourcesペインを右クリックしてCopy → Copy All as cURLで、ダウンロードしたリソースファイルをcURLで取得するコマンドをクリップボードに出力します。

例(一部抜粋)

curl "http://cdn.qiita.com/assets/public-925aa84e5d9c4e0bb836b5c13f4d5360.min.css" -H "If-None-Match: ^\^"184e21d6efed5ffb39eee6f04e7e970e^\^"" -H "Accept-Encoding: gzip, deflate, sdch" -H "Accept-Language: ja,en-US;q=0.8,en;q=0.6,en-GB;q=0.4" -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1" -H "Accept: text/css,*/*;q=0.1" -H "Referer: http://qiita.com/rubytomato^@github/items/4eff1ae1bcb6af1c8732" -H "Cookie: optimizelyEndUserId=oeu1396137852251r0.08233228186145425; mp_93e2889f9f1b2dadad8a0c788c0fd02f_mixpanel=^%^7B^%^22distinct_id^%^22^%^3A^%^20^%^2215674d7dbb3f5-017aca0e175fb6-47b1937-1fa400-15674d7dbb440d^%^22^%^2C^%^22^%^24search_engine^%^22^%^3A^%^20^%^22google^%^22^%^2C^%^22^%^24initial_referrer^%^22^%^3A^%^20^%^22https^%^3A^%^2F^%^2Fwww.google.co.jp^%^2F^%^22^%^2C^%^22^%^24initial_referring_domain^%^22^%^3A^%^20^%^22www.google.co.jp^%^22^%^7D; user_session_key=VRT3diNTrIFFZPO1eZZcNe0-bp3w_rKopIoKV3wqENM; mp_be87616606b0e26a87689099aab2c4e5_mixpanel=^%^7B^%^22distinct_id^%^22^%^3A^%^20^%^2222772^%^22^%^2C^%^22^%^24initial_referrer^%^22^%^3A^%^20^%^22http^%^3A^%^2F^%^2Fqiita.com^%^2Fdrafts^%^2F3e5653f077f7daf764fb^%^2Fedit^%^22^%^2C^%^22^%^24initial_referring_domain^%^22^%^3A^%^20^%^22qiita.com^%^22^%^2C^%^22^%^24search_engine^%^22^%^3A^%^20^%^22google^%^22^%^7D; optimizelySegments=^%^7B^%^22297528811^%^22^%^3A^%^22search^%^22^%^2C^%^22297722770^%^22^%^3A^%^22safari^%^22^%^2C^%^22298433371^%^22^%^3A^%^22true^%^22^%^7D; optimizelyBuckets=^%^7B^%^226814271724^%^22^%^3A^%^226776632712^%^22^%^7D; __utmt=1; __utma=115427846.1658762209.1468082992.1477916304.1477923241.422; __utmb=115427846.35.10.1477923241; __utmc=115427846; __utmz=115427846.1477869787.420.23.utmcsr=google^|utmccn=(organic)^|utmcmd=organic^|utmctr=(not^%^20provided); _ga=GA1.2.22772; _gat_user=1; _qiita_login_session=a1lvSVhZY1pwM2VHSFlMcTMwcm5pWktsQnB5WEJVeVExZGJBU3RLMTFLOTUrdmhVaXc0QTU1VTRWZWFyY1k0WisrR3k1K1ZtcDJKQ2JSa3ZZN2pFcURYTjM4Rld1azR4MG92OUhCUDArcW4rYzBpTDVySWEzSUREYjdxeVRySVE3Z2ZOc1VhNnArcXFOWWxzUmpXSkZZbTRCWHlWSzZMNzJtMFlqR2ZERzB3cGNNNWZRQk4rbWo0Vk9QTWU3R2JLLS0yaUdBd2hSZ2t2eVZqM1JDTXBZOGF3PT0^%^3D--def1d1cd7be7480924121fa8166192fb9072186e" -H "Connection: keep-alive" -H "If-Modified-Since: Mon, 31 Oct 2016 02:50:32 GMT" -H "Cache-Control: max-age=0" --compressed

コマンドメニューからJavascriptの有効／無効を切り替える

Javascriptの有効／無効の切り替えは、いままではSettingsページでしかできませんでしたが、これからはコマンドメニューでも切り替えができます。

console.warnにスタックトレース

console.warnにスタックトレースが含まれます。

main.js

$(function() {
  sub2();
});

sub2.js

function sub2() {
  sub3();
}

sub3.js

function sub3() {
  console.warn("stack trace");
}

javascriptの関数の実行時間を確認する

TimelineパネルでJS Profileを有効にしてページを読み込むと、Sourcesパネルで関数の実行時間を確認することができます。

[DevTools Digest: More Power with the New Command Menu] (https://developers.google.com/web/updates/2016/04/devtools-digest-command-menu)

コマンドメニュー

Ctrl + Shift + pを押すとコマンドメニューが表示されます。
（Atom(Ctrl+Shift+p)やVisual Studio Code(F12)のコマンドパレットと同じような機能です。）

インクリメンタルサーチでメニューの絞り込みができます。
下図はconsoleでヒットするメニューを絞り込んだ状態です。

HTMLのPretty Print

SourcesパネルでhtmlもPretty Printできるようになりました。

↓ 整形後