ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫

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がどういう現状で積み重なっていてどんな角度で入っているかがわかるので便利。そのうちデフォルトで使えるようになるので、楽しみに待っていてほしい」と吉川さんは語る。

7番目に紹介したのは「Network Throttling」。モバイルでアクセスすると動きがもっさりするという話がよくある。そのようなとき、ネットワークの部分に関してはこのDev Toolsを使えばそれを再現できるという。

ネットワークパネルの右側に「No Throttling」というセレクターを開くとネットワーク状況の選択肢が表示される。モバイルでの表示が体感できる機能だ。

JavaScriptをバリバリ書いている人向けの機能として使えるのがSourcesである。その一つが8番目に紹介した「Display variable values inline」。

これを使えば変数の中味を簡単に見ることができるようになるので、「セッティングでオンにすることをお勧めする」と吉川さん。また「Store as Global Variable」も開発中にソースの中味をバリバリ見るのに使える機能だ。

またファンクションに対して右クリックして表示された「Show Function Definition」をクリックすると関数が定義されているところまで飛べるという。これもデバッグ中は非常に便利に使える機能だ。

10番目に紹介したのは「Manage framework blackboxing。これはblackboxingという設定にデバッグしたくないフレームワークを入れることができる機能。

例えばここから先はjQueryだからデバッグしたくないというときは、Blackbox content scriptsでjQueryを指定しておけばよい。このようにデバッグが簡単に行えるようになる。

最後に紹介したのが、「Debugging WebViews」これはWebViewsをデバッグするためのRemote Debugging機能。普通に端末で操作した内容がそのままDev Toolsでデバッキングできるだけではなく、Webビューに対してもデバッグすることができるという。

chrome://inspect/#devicesにアクセスして、デバイスを指定すればリモートでWeb Viewsがデバッグできるようになる。

11の開発者にとって役に立つ機能のデモを交えて紹介し、セッションは終了。

Firefoxは細かく見た目の修正・調整に優れている

続いて登壇したのは、Mozilla JapanでWebサイトの開発とローカライズ(日本語化)を担当している清水智公さん。

Firefoxにも開発者向けのDeveloper Editionがある。通常のFirefoxとの違いは、通常版の更新は6週間ごとに行われるが、開発者版は週1よりも速いペースで更新が入ること。またNightlyとも違い、「Nightlyは開発ツールの部分がオフになっているので、開発ツールを使っていただくのであれば、Developer Editionを使ってほしい」と清水さん。




Developer Edition

開発者ツールはDev Toolsというだけあって、デバッグがどれだけ支援できるかという点に注力して開発されているが、開発はデバッグするだけではない。

開発にはプロトタイピングや修正、パラメータの調整などの、ちょっとしたうまくいっていないところを修正、調整するところをFirefoxの開発ツールは得意としている。

例えば清水さんがWebサイトのローカライズでよく困るのが、英語のフレーズに合わせて幅が作られているので、日本語化すると正しく折り返されないこと。そこで画面できちんと収まるよう、Dev Toolsを開いて確認しているという。

「このように実際に目で見て細かく調整をするところが、Firefoxの特徴だ」と清水さんは言うのである。Chromeで紹介された機能はほとんどFirefoxにも入っている。

Chromeにない機能の一つとして清水さんが紹介したのは、Web Audio APIという機能。音声をフィルタリングして音域で切ったり、フーリエ変換してどのぐらいの周波数帯にどのぐらいの音量があるかを表示させたりするためのAPIだ。

AudioContextというスピーカーみたいなモノを作って、コンテキストの中にいろいろなフィルターを作っていくのだが、プログラムは図の通り。

実際にいろいろな音源で、どんな音になるかということをデモで実践。「Web Audioでもちゃんとブラウザの上でいじって、ダイレクトに目で確認できる(この場合は耳で確認)のがFirefoxの特徴だ」と清水さんは説明する。

というのも開発者の自分のやろうとしていること、やったことがブラウザにどういう風に反映しているかわからないことが、一番辛いからだ。

しかもWebアプリケーションはJavaScriptという手続き型、オブジェクト指向、関数型などのいろんな言語のエッセンスが入っている難解な言語に加え、CSSというルールベースの言語、さらにHTMLというデータという3つで構成される。

凄腕のプログラマだったら脳内でレンダリングしてイメージできるかも知れないが、それは難しい。

だからこそ「開発者を助けるのは自分の目で動くのを見られることだと思っているので、Firefoxの開発者ツールは非常に便利に使ってもらえると思う」と清水さんは言う。特に最初のプロトタイピングと最後の調整の部分で非常に有効に使えるのではと言う。

またFirefoxの開発者ツールにはアニメーションのデベロッパーツールも付いたという。アニメーションというタブをクリックすると、タイムラインが表示される。実際のタイムラインと数値がすべて把握できるようになる。

Devtools Challenger

またアニメーションの動きを激しくしたりするのも、直感的にカスタマイズできるようになる。そのほかにも「地味だけど便利な機能」として紹介したのがCSSのフィルター機能。どんどんフィルターをたしていけば、いろいろグラフィカルにいじることができるという。

さらに衝撃的な機能として紹介したのは、例えば再生停止ボタンの場所をより良くしたいという場合は、そのソース部分をつかんでドラッグドロップすると、試すことができる。

ボタンの色を変えるときは、シフトキーを押してクリックすると、同じ色を別の表現(例えば16進数だったものをHSLに)変えることも可能だ。

「他にもいろいろ楽しい機能がある。例えばメモリの消費量を測定するという機能もその一つ。これを使うと自分の書いたコードがどれぐらいメモリを消費するのかが容易にわかる。最新情報はHACKSブログのチェックをしてほしい」(清水さん)

Windows10搭載の最新ブラウザのF12開発ツールの使える機能

3番目に登壇したのは日本マイクロソフトの物江修さん。Windows10のWebブラウザ、F12開発ツールについて紹介した。

Windows10にはInternet ExplorerとEdgeという2つのブラウザが入っており、それぞれ別々にF12開発者ツールを持っている。

それらの2つは「機能的な違いがある」と物江さんは説明する。Edgeの開発者ツールは「新しい機能がどんどん追加されていく形となっている」と物江さんは説明。

例えばローカルストレージやセッションストレージ、Cookieテーブル、JavaScriptの編集などはその一例だ。一方のInternet Explorerの方は例えばイントラネット内などの旧バージョンのIE向けに作られたコンテンツの開発やデバッグする際に使えるドキュメントモードなど、固有の機能が提供されている。

またIE11からエンタープライズモードという後方互換機能が提供されている。

「イントラネットにある旧バージョン向のIE向けに作られたWebシステムは、無理にEdgeに移行せずにせず、IE11の後方互換機能で使ってほしい。」と物江さんは語る。

「F12開発者ツールは、先の2つに比べてかなり地味」と物江さんは言うとおり、紹介されたのはHTML/CSSの整形出力やSASSとLESSのソースマップ、統合されたパフォーマンスプロファイリング、ネットワークツールのUI変更など。

実は以前のF12開発者ツールはブラウザを起動しないと使えなかったが、今回から、system32のF12の中にあるF12Chooser.exeをダブルクリックすると起動できるようになる。

DOMの書き換えも簡単だ。画面で右クリックして「要素の検査」をクリックすると、そこのDOMに飛ぶことができる。

色の変更も容易だ。DOM Explorerで色の選択をクリックすると、色の一覧から使われている色をクリッピングして取得することができる。

物江さんは実際にデモを行い、使い方を紹介。最初はデバッグの方法。ここで物江さんはボタンを押すとRSSを取得するページでデバッガーを動かしてみることに。

新しいF12開発者ツールであれば、イベントハンドラーをデバッグ。ブレークポイントをクリックして、「イベントブレークポイントの追加」をクリック。マウスイベントからマウスのclickというところをクリックして、追加すると、ブラウザ上で行われたクリックイベントをすべて拾ってきてくれる。

イベントハンドラーを探す必要はない。フレームワークやjQueryをスキップしたいと言う場合は、「マイコードのみをデバッグ」をクリックすると自分のコードだけをデバッグできる。

またTypeScriptも直接デバッグできる。「マップファイルがあればLESSでもSASSでも使える」と物江さんは説明する。

次にネットワーク機能について。ネットワークで「タイミング」をクリックすると、停止中(リクエストを与えられるまでの時間)、DNNの解決時間、接続した時間、送信した時間、待機中などという時間がそれぞれわかる。

「例えばパフォーマンスが遅い場合、待機中という時間が長ければネットワークが遅いのではないかとか考えられるし、ダウンロードの時間が長ければサーバのパフォーマンスが悪いかデータが大きいかかということの想像がつくようになる」と物江さんは説明する。

第三はパフォーマンス機能。タイムラインを観ながら、負荷の高いところを調べていくことができる。問題となっている部分をクリックしてDOM Explorerで表示させて、調べることができる。

さらにCPU使用時間なども表示できるので、その時間が大きい場合は右クリックして「ソースの表示」を選択すると、その部分のソースに飛ぶことができるのでボトルネックを見つけることもできる。「ぜひ活用してほしい」と物江さん。

パフォーマンスについて見る場合は、例えばRSSフィードを取得ページであれば何もしていない段階でまずスナップショットを取り、RSSのフィードを取得してスナップショットを撮る。

そのスナップショットをクリックしてDOM Explorerを表示すると、追加した部分がわかる。同じようにソースコードを追うことができる。「このプログラムはメモリを食うなというときなどに、ぜひ活用してほしい」。

エミュレーション機能もある。IEのF12開発者ツールを起動した場合は、ドキュメントモードを使うと、古い旧バージョンのIEのレンダリングした状態が見える。

一方のEdgeの開発者ツールの方はユーザーエージェントの文字列を変えたり、ブラウザプロファイルデスクトップ用のバイナリとモバイル用が同じなのでスマートフォン用に変えたり、画面表示の大きさを変えられるような機能が提供されている。

またディスプレイの向きや解像度を変えられたりする。GPSのシミュレーションで緯度経度が使えるようになっている。

「機能のフィードバックもできるようになっているので、ぜひフィードバッグしてほしい」と物江さん。フィードバックはご意見とサポートの「機能のリクエスト」からできる。

このページでは今までポストされたリクエストおよび開発からの回答が載っている。「今後、デバッグツールとしてもどんどん機能が追加されていくので、見守ってほしい」と語り、物江さんのセッションは終了した。

【参考資料-1】f12-devtools-guide
【参考資料-2】monoe’s blog

Visual Studio対応でより開発しやすくなったPalmiの開発環境

今回の勉強会の司会を務めた富士ソフトが開発し、DMM.comが販売を行っている「Palmi」。html5jロボット部・部長のeegozillaさんはのアプリ開発環境がVisual Studioに対応したことを紹介。

これまで若干、これにより、面倒だったPalmiの開発が容易にできるようになった。ubuntuのコンパイルもPalmiの開発環境を手に入れるには、Palmiガーデンにアクセスし、Visual Studioで容易にできるようになる。

Palmiの開発言語はC++。「C++は自信がない」という人も、心配は無用だという。Palmi Application Developersサイトでは、サンプルソースが提供されているからだ。そのパラメータを変更するなど少し変えるだけで、アプリケーションが開発できるという。

「今後、PalmiもPepperのような開発環境をつくっていく」とeegozillaさんは言う。DMM.comでは29万8000円で売っていて手軽(?)に手に入る。関心のある人はまず、Palmi Gardenにアクセスし、デベロッパー登録をしてみよう。

パネルディスカッションで各開発ツールの特徴が明らかに

最後は最新ブラウザに搭載されている開発ツールを紹介した3人によるパネルディスカッションが行われた。司会を務めたのはWebプラットフォーム部の酒巻瑞穂さん。

Q1.ブラウザでメタ言語のデバッグや開発ができるか

第一の質問は「ブラウザでメタ言語のデバッグや開発ができるか」。回答は次の通り。

物江:TypeScriptでLESSとSassのメタ言語ではデバッグができるようになっている。F12開発者ツールはデバッグ専門ツールなので、書くときはVisual Studioでお願いします。

清水:SassとLessに関してはソースマップを入れておくと適切に表示できる。JavaScriptのメタ言語は、例えばSXに関しては開発が進んでおり、一部試せるはず。

吉川:どのブラウザでもそうだと思うが、ソースマップだけ出力すればデバッグ自体はできる。プラスアルファとしては、Nodeで動かす場合は、node-inspectorを使えばサーバーサイドでデバッグできるようになっている。

Q2.ブラウザの拡張機能を効率よく開発する方法はあるか?

次は「ブラウザの拡張機能を効率よく開発する方法はありますか?」という質問。

物江:Edgeでは今拡張機能は動かない。将来的にJavaScriptベースの拡張機能が入ってくると言われている。将来的にはChromeとFirefoxのプラグインが動くようになると言われているので、みなさんどんどんChromeとFirefoxのプラグインを作ってください。

清水:Firefoxの開発ツールにはブラウザの拡張機能をデバッグするモードがあるので、それを使ってください。詳しいことはドキュメントをチェックしてほしい。また今後、Firefoxはアドオンの仕組みが変わっていく。それらに対応するべく開発ツールも整備されていくはず。

吉川:Chromeには拡張機能があるが、簡単に開発するという意味ではYomanが入っているテンプレートを使ってもらうしか方法がない。

拡張機能の開発においてもDev Toolsを使ってデバッグに使うが、そもそも拡張機能のアーキテクチャまわりを知らないとなかなか効率よくデバッグできない。いずれにしても開発するにはアプリのアーキテクチャなどを勉強しないと簡単にはいかない。

Q3.デスクトップブラウ以外を効率よく開発する方法は?

3番目の質問は「デスクトップブラウ以外を効率よく開発する方法はありますか?」。

物江:モバイルに関しては、Edge自体はバイナリ自体がWindows10 Mobileと共通で、挙動も基本的に一緒なのでそのままデバッグできる。他のブラウザをインスペクタするツールとして、vorlon.jsがある。

これを使えばサービスがホストしているJavaScriptをモバイルブラウザで参照させると手元のブラウザでそのDOMの内容をすべて拾ってくる。詳しいことはこちらで動画を見てほしい。Cordovaの開発はVisual Studioで開発できる。

清水:ブラウザベンダーなのでCordovaと言われると厳しい。モバイル環境でいうと、リモートでバッグができる。

Android版のFirefoxであればWiFi越しにそれをデバッグできる。iOSの場合は、Safariであれば同じようにリモートでバッグができる。FirefoxOSも同じように動く。ブラウザ相手であれば普通に使える。

吉川:Chromeの場合は、Web Viewのリモートデバッキングが使える。Cordvaは問題なくできる。Electronも使えそうなので、ぜひ試してほしい。

Q4.他のブラウザと比較した開発ツールの強味は?

最後の質問は、「他のブラウザに対し開発ツールのこの機能だけは勝っているところを一つ挙げてください」。

物江:TypeSpriptですね。

清水:オーサリングツールが付いているところ。UIが全部日本語になっているところです。

吉川:一番に推したいのは開発スピードが高いところ。積極的な姿勢で新しい機能を入れているので、Chrome Devtoolsを一度使うと離れられないのでは。

今回紹介したセッションはすべて動画で公開されているので、デモなどに興味がある人はこちらどうぞ!

カテゴリー : デジタル・IT タグ :
CodeIQ MAGAZINEの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP