DevTools ダイジェスト、2016 年 9 月 - 2016 年以降の DevTools

Kayce Basques

Google I/O 2016 は終了しました。DevTools は I/O で大きな存在感を示しました。Paul Bakaus、Paul Irish、Seth Thompson による DevTools の将来に関する講演などが行われました。2016 年以降の DevTools の方向性について詳しくは、以下の動画をご覧ください。

作成

DevTools は、ウェブ開発ライフサイクルのすべての段階を容易にすることを目的としています。DevTools はウェブサイトのデバッグやプロファイリングに役立つことはご存じでしょうが、サイトの作成に役立つ方法をご存じないかもしれません。「作成」とは、サイトを作成する行為を指します。今後の目標の一つは、複数のデバイスでサイトの反復処理、テスト、エミュレーションを簡単に行えるようにすることです。

デバイスのモード

DevTools チームは、Chrome 49 で最初のメジャー アップグレードを行ったデバイスモードの改善に継続的に取り組んでいます。更新の概要については、3 月の投稿（モバイル ファーストの世界に対応した新しいデバイスモード）をご覧ください。包括的な目標は、すべてのフォーム ファクタでサイトを表示およびエミュレートするためのシームレスなワークフローを提供することです。

3 月に記事を投稿して以来、Canary にリリースされたデバイスモードの更新の概要は次のとおりです。

特定のデバイスとしてページを表示する場合は、ページの周囲にデバイスのハードウェアを表示することで、より没入感のあるエクスペリエンスを実現できます。

デバイスの向きメニューを使用すると、ナビゲーション バーやキーボードなど、さまざまなシステム UI 要素がアクティブなときにページを表示できます。

デスクトップのストーリーも改善されました。デバイスモードのズーム機能を使用すると、実際に作業している画面よりも大きなデスクトップ画面（4K（3, 840 ピクセル x 2, 160 ピクセル）画面など）をエミュレートできます。

ネットワーク パネルに切り替えることなく、デバイスモードの UI から直接ネットワークをスロットリングできます。

ソースの差分

サイトのスタイルを反復処理すると、変更内容が把握しづらくなります。この問題を解決するため、DevTools では、[ソース] パネルの行番号ガターに視覚的な手がかりを表示して、変更を追跡できるようにします。削除された行は赤い線で示され、変更された行は紫色でハイライト表示されます。新しい行は緑色でハイライト表示されます。

また、新しい [クイックソース] ドロワーのタブで変更内容を追跡することもできます。

[クイックソース] タブでは、CSS ルールと同時に HTML または JavaScript のソースコードに集中できるようになりました。また、[スタイル] ペインで CSS プロパティをクリックすると、[クイックソース] タブが自動的にジャンプし、ソース内の定義がハイライト表示されます。

Chrome Canary でソースの差分試験運用版を有効にして、今すぐお試しください。

ライブ Sass 編集

今後予定されている Sass 編集ワークフローの大幅な改善の一部をご紹介します。これらの機能は試験運用版の初期段階です。テストの準備が整いましたら、後日投稿でお知らせします。

基本的に、DevTools では、これまで希望されていたように Sass 変数を表示、編集できるようになります。Sass 変数からコンパイルされた値をクリックすると、新しい [クイックソース] タブが開き、変数の定義に移動します。

Sass 変数からコンパイルされた値を編集すると、選択した個々のプロパティだけでなく、Sass 変数も更新されます。

プログレッシブ ウェブアプリ

Google I/O 2016 のウェブと Chrome に関するセッションのリストを見れば、ウェブ開発の世界で大きなテーマとなっているプログレッシブ ウェブアプリが目立ちます。

プログレッシブ ウェブアプリ モデルが登場したことで、DevTools は迅速に反復処理され、デベロッパーが優れたプログレッシブ ウェブアプリを作成するために必要なツールが提供されています。こうしたモダン アプリケーションの構築とデバッグには独自の要件が伴うことが多く、DevTools ではプログレッシブ ウェブ アプリケーションの開発に専用のペインルが用意されています。Chrome Canary を開くと、[リソース] パネルが [アプリケーション] パネルに置き換えられています。リソースパネルの以前の機能はすべて引き続き利用できます。プログレッシブ ウェブアプリの開発専用に設計された新しいペインは次のとおりです。

[マニフェスト] ペインには、アプリ マニフェスト ファイルが視覚的に表示されます。このページから、[ホーム画面に追加] ワークフローを手動でトリガーできます。

[Service Workers] ペインでは、現在のページに登録されている Service Worker を検査して操作できます。

[ストレージを消去] ペインでは、さまざまなデータを消去して、ページをまっさらな状態にすることができます。

JavaScript

フロントエンドとバックエンドの境界を越えることは、フルスタック ウェブ開発の難しい部分です。ウェブアプリのデバッグ中にバックエンドが 500 ステータス コードを返していることが判明した場合、DevTools の有効範囲を超えているため、コンテキストを変更してバックエンド開発環境を起動して問題をデバッグする必要があります。

ただし、Node.js で記述されたバックエンドでは、フロントエンドとバックエンドの境界が曖昧になり始めています。Node.js は V8 JavaScript エンジン（Google Chrome と同じエンジン）で実行されるため、DevTools から Node.js をデバッグできるようにしました。V8、DevTools、Google Cloud Platform for Node.js の各チームの協力により、DevTools の強力なデバッグ機能のすべてを使用して Node.js アプリをイントロスペクトできるようになりました。この機能はすでに Node.js のナイトリー ビルドに導入されていますが、DevTools の統合はメジャー リリースに含まれる前にまだ調整中です。将来的には、任意の Chrome ウィンドウで node --inspect app.js を渡して DevTools から接続するだけで、DevTools から Node.js アプリをデバッグできるようになります。

Node Inspector などの既存のツールは GUI ベースのデバッグ機能を提供していますが、新しい Node.js DevTools 統合は、非同期スタック デバッグ、ブラックボックス化、ES6 サポートなど、DevTools の最新のデバッグ機能に対応しています。