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

Kayce Basques

Google I/O 2016 は終了しました。I/O では DevTools の存在感が強くなりました。その中には、Paul Bakaus、Paul Irish、Seth Thompson による、DevTools の今後の展望についての講演があります。以下の動画をご覧になるか、2016 年以降の DevTools の今後の展望をご確認ください。

作成

DevTools の目的は、ウェブ開発ライフサイクルのあらゆる段階を簡単にすることです。DevTools がウェブサイトのデバッグやプロファイリングに役立つことはご存じかもしれませんが、サイトの作成に DevTools の使用方法を知らないかもしれません。ここでいう「オーサリング」とは、サイトを作成することです。近い将来の目標の一つは、複数のデバイスでサイトのイテレーション、テスト、エミュレーションを容易にすることです。

デバイスのモード

DevTools チームは、Chrome 49 で最初のメジャー アップグレードが行われた Device Mode のイテレーションを続けています。更新の概要については、3 月の投稿（モバイル ファーストの世界に対応した新しいデバイスモード）をご覧ください。その包括的な目標は、あらゆるフォーム ファクタでサイトを表示してエミュレートするためのシームレスなワークフローを提供することです。

3 月に記事を投稿してから、Canary でリリースされた Device Mode のアップデートの概要を以下に示します。

ページを特定のデバイスとして表示する際に、デバイスのハードウェアを臨場感あふれるものにすることができます。

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

パソコンでのストーリーも改善されています。デバイスモードのズーム機能を使用すると、4K（3840px x 2160px）画面など、実際に作業している画面よりも大きなデスクトップ画面をエミュレートできます。

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

ソースの差分

サイトのスタイルをイテレーションすると、変更内容を見失いがちです。これを修正するため、DevTools では [Sources] パネルの行番号ガターにある視覚的な手がかりを使用して、変更を追跡できるようにします。削除された行は赤色の線で示され、変更された行は紫色でハイライト表示され、新しい行は緑色でハイライト表示されます。

新しいクイックソース ドロワーのタブでも変更を追跡できます。

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

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

Live Sass の編集

Sass の編集ワークフローに今後予定されている主な改善点をいち早くご紹介します。これらの機能は試験運用段階のごく初期のものです。準備ができ次第、別の投稿でお知らせします。

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

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

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

Google I/O 2016 でのウェブと Chrome の講演のリストをご覧ください。ウェブ開発の世界に、プログレッシブ ウェブアプリという大きなテーマが登場しています。

プログレッシブ ウェブアプリ モデルの登場に合わせて、DevTools では開発者が優れたプログレッシブ ウェブアプリを作成するために必要なツールを提供するために、迅速なイテレーションを行っています。多くの場合、こうした最新のアプリケーションの構築とデバッグには独自の要件が伴うことがわかったため、DevTools ではパネル全体をプログレッシブ ウェブ アプリケーション開発に特化させました。Chrome Canary を開くと、[リソース] パネルが [アプリケーション] パネルに置き換わっていることがわかります。[リソース] パネルの以前の機能はすべて、引き続きご利用いただけます。プログレッシブ ウェブアプリ開発用に特別に設計された新しいペインがいくつかあります。

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

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

[ストレージを消去] ペインでは、あらゆる種類のデータをワイプして、白紙の状態のページを表示できます。

JavaScript

フロントエンドとバックエンドの境界を越えることは、フルスタックのウェブ開発の困難な部分です。ウェブアプリのデバッグ中にバックエンドが 500 ステータス コードを返していることに気づいた場合、実質的に DevTools の有用性の限界に達しています。問題をデバッグするには、コンテキストを変更し、バックエンド開発環境を起動する必要があります。

しかし、Node.js で記述されたバックエンドでは、フロントエンドとバックエンドの境界があいまいになりつつあります。Node.js は V8 JavaScript エンジン（Google Chrome と同じエンジン）で実行されるため、DevTools から Node.js をデバッグできるようにしたいと考えました。Node.js チーム向けの V8、DevTools、Google Cloud Platform のおかげで、DevTools の強力なデバッグ機能をすべて使用して Node.js アプリのイントロスペクションを行えるようになりました。この機能はすでに Node.js のナイトリー ビルドに達していますが、DevTools との統合はメジャー リリースに含まれるまでまだ改良中です。DevTools からの Node.js アプリのデバッグは、任意の Chrome ウィンドウで node --inspect app.js を渡して DevTools から接続するだけのように簡単に行えるようになります。

Node Inspector などの既存のツールでも GUI ベースのデバッグが可能ですが、新しい Node.js DevTools との統合は、非同期スタックのデバッグ、ブラックボックス化、ES6 のサポートなど、DevTools の最新のデバッグ機能によって維持されます。