体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

【Chrome・Firefox・Edge】3大メジャーブラウザが搭載する開発ツールの使える機能紹介

Chrome DevToolsの使える11の新機能

html5j Webプラットフォーム部・第9回勉強会「東京ウェブストーリー~スクリプトエラーは突然に~」のテーマは、「ブラウザの開発者ツール」。紹介されたのはChrome、Firefox、Edgeという3大メジャーブラウザに搭載されている開発者ツールである。

最初に登壇したのはhmtl5j代表でありGoogle Developer Expertの吉川徹さん。

まず吉川さんが紹介したのは「Elements Color picker from screen」。これはソースの「collar」部分をクリックするとカラーピッカーがデフォルトでオンになっており、Webブラウザを保持しながら簡単にカラーを変えられるという機能。

またこれを使えばマテリアルデザインのカラーも、Webサイトで使っているカラーを探してこなくても、簡単に選べるようになる。

次は「Elements Animation speed adjust」。これはアニメーションのスピードを制御する機能を提供する。エレメンツパネルの上方にある菱形のマークをクリックすると、アニメーションのスピードの制御が可能になる。

例えばアニメーションのキャプチャーを撮りたいという場合は一時停止ボタンを使えば簡単にできるようになる。

3番目に紹介したのは「Defning animation Timing」。これもアニメーションに関する機能で、定義が簡単にできるようになる。

4番目は「Search by selector」。これまでエレメンツを探すのに苦労したことがある人も多いと思うが、この機能を使えば簡単にエレメンツを探せるようになる。Dev Toolsの左下にある「Find by」でセレクターを追加すれば使えるようになる。

「Timelineに関しては、いろいろな機能が追加されている」と吉川さんは説明する。その一つが「Timeline screenshot」。

これはタイムラインに合わせてどういう風に表示されているのかが見えるようになるという機能。見た目良くデバッキングできるようになる。

6番目に紹介したのはレイアウト関連の機能で「Show Layers」。「これはまだデフォルトでは使えない」という前置きどおり、Layers Panelのフラグをオンにして使う。

「この機能を使えば今現状のDOMがどういう現状で積み重なっていてどんな角度で入っているかがわかるので便利。そのうちデフォルトで使えるようになるので、楽しみに待っていてほしい」と吉川さんは語る。

1 2 3 4 5 6 7次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。