LoginSignup
3
3

More than 5 years have passed since last update.

@rubytomato@github(渡邉 真)

Chrome DevTools Digest 2016/04と2016/08～2016/10の確認メモ

Last updated at Posted at 2016-10-31

概要

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

Consoleに新しい機能を追加

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

CodeMirrorについて

Syntax highlight

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

Canary 56

syntax_hl_56.png

Chrome 54

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

syntax_hl_54.png

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

syntax_hl_54_2.png

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

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

Canary 56

syntax_red_56.png

syntax_red_56_2.png

Chrome 54

syntax_red_54.png

Smart return

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

Canary 56

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

syntax_mb_56.png

Chrome 54

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

syntax_mb_54.png

Multiple cursors

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

Multiple cursorsについて

Canary now highlights non-top contexts red

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

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

Canary 56

drawerでNetwork conditionsを開きます。

uc_browser_1.png

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

uc_browser_2.png

UC Browserについて

DevTools Digest, September 2016

CPU throttling for a mobile-first world

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

cpu_throttling.png

Network view in timeline recordings

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

timeline_network.png

Passive event listeners

ElementsパネルのEvent listenersペインで簡単にPassive listenerが確認できます。
下図はScroll jank due to touch/wheel handlers demoというデモページで確認したものです。

Ancestors All

passive_all.png

Ancestors Passive

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

passive_passive.png

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

passive_passive_toggle.png

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

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

passive_rendering.png

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

passive_scroll_performance_issue.png

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について

addEventListener

構文

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

addEventListenerについて

Activityでグルーピングする

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

call_tree_activity.png

Group by Categoryの場合

call_tree_category.png

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

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

DevTools Digest, August 2016

Applicationパネル

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

ChromeLens

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

ChromeLensの設定画面

ChromeLens_1.png

通常の見え方

ChromeLens_2.png

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

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

ChromeLens_3.png

ChromeLensについて

New features now in Canary

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

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

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

color_picker.png

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

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

curl.png

例(一部抜粋)
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ページでしかできませんでしたが、これからはコマンドメニューでも切り替えができます。

javascript_command_menu.png

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

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

main.js
$(function() {
  sub2();
});
sub2.js
function sub2() {
  sub3();
}
sub3.js
function sub3() {
  console.warn("stack trace");
}

stack_trace.png

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

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

js_profile_1.png

js_profile_2.png

DevTools Digest: More Power with the New Command Menu

コマンドメニュー

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

command_menu_1.png

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

command_menu_2.png

HTMLのPretty Print

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

pretty_print_1.png

↓ 整形後

pretty_print_2.png

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3