こんどのChrome Betaではモバイル開発のためのツールが充実…ビューポートエミュレーションの改良, スクリーンキャストありのリモートデバッグなど

今朝(米国時間12/3)ローンチされた最新のChrome Betaで、Googleはモバイルデベロッパのための新たなツールをいくつか導入し、デスクトップからモバイルのWebアプリケーションを比較的容易にテストできるようにした。このベータはデスクトップAndroid共に、ビューポートエミュレーションの改良により、モバイルのデバイスと画面とタッチイベントがうまく模倣され、またスクリーンキャストのできるリモートデバッグがサポートされた。

これまでデベロッパは、相当面倒な手順により、ブラウザのエクステンションを使うかまたはコマンドラインから、接続したデバイスの上でデバッグを開始していた。今度からは、MacのユーザはデバイスをUSBでつなぐだけでよく、Chrome Betaがリモートデバッグをネイティブでサポートする。デバイス上のChromeやChromeが動かすWebViewの、どんなインスタンスでもデスクトップからアクセスでき、キーボードやマウスのイベントは自動的にデバイスへ送られる。Windowsユーザはデバイスドライバをインストールして、この機能を有効にする。

Googleによると、ビューポートエミュレーションが改良されたことによって、デベロッパは各種のエミュレーションパラメータ…画面解像度、タッチエミュレーション、devicePixelRatio、ユーザエージェント、センサ、などなど…を完全にコントロールできる。ページは、本物のモバイル用Chromeと同じモバイルのビューポートコードで表示されるから、デスクトップ上で実際の結果を正確に見ることができる。

Chrome DevToolsのファンの方は、先月行われたChrome Dev Summitにおける Paul Irishの講演(25分)を聞いてみよう。これらの新しい機能を、詳しく説明している。

[原文へ]
(翻訳:iwatani(a.k.a. hiwa))


MozillaがFirefoxのデベロッパツールの充実に注力: ブラウザ内エディタ, Firebugの統合, ネットワークパネルなどなど

先週、MozillaのテクノロジエヴァンジェリストPaul RougetがWebデベロッパたちに、Firefoxの開発ツールとして何が欲しいか、という質問をTwitterやHackerNewsで投げかけた。そのフィードバックに基づいてFirefoxのDevToolsチームは、今後のFirefoxの安定版に盛り込むべき新作または改良版のデベロッパ機能の数々を構想し、それらのプロトタイプ作りに取り組んできた。

Rougetが書いた記事によると、リクエストでもっとも多かったのは、ブラウザ内でコードを書けて、そしてエディタやIDE(統合開発環境)からブラウザをコントロールできることだ。このリクエストに対してチームは今、二つのやり方を検討している。DevToolsのチームは人気の高いSublime TextエディタとFirefoxに本来あるリモート機能を利用するライブエディティングの概念実証を作った。しかしMozillaはそのほかに、Firefoxの中にエディタを置くことも検討している。

Mozillaがブラウザ上のエディタを考えたのは、これが初めてではない。2009年にMozillaは、Bespinというものに取り組んだ。それがのちにSkywriterになったが、このプロジェクトは今休眠している。しかしCSSとHTMLによるエディタThimbleは、Mozillaが再び取り組んでおり、RougetはDevToolsの作品がエディタのメインのような書き方をしているものの、ブラウザ上のテキストエディタに関してはMozilla本体にも相当な経験と知識があることは確かだ。

デベロッパたちのもう一つのリクエストは、Chrome的Firebug的なネットワークパネルとタイムラインだ。チームはすでに、Webアプリケーションがネットワークをどのように使っているかを容易に見るためのツールの、プロトタイプを開発した。

Firefoxのチームは、ブラウザの互換性の向上にも取り組んでいる。Rougetによると、現状は“FirebugのユーザにとってFirefoxのDevToolsは邪魔者”という状況なので、それを何とかするためにMozillaは、コンテキストメニューの”inspect”メニューをディスエーブルにできるようにする。またFirebugをDevToolsのボックスに統合する方法も検討中だ。

そのほかにチームが今取り組んでいるのは、ブラウザの右側にドックツールを置けること(Firefox Nightlyではすでに実装)、CoffeeScriptのサポート、最小化したCSSとJavaScriptファイルのデバッグ、ページ上のリペイントされた部分が分かること(これもFirefox Nightlyにはある)。

Rougetによれば、チームはそのほかの機能にも取り組んでいる(イベント結合の視覚化、オフラインのストレージツール、擬似要素の検査、など)。

以上はどれも、すぐに実現するというものではなく、プロトタイプを脱するのに数か月かかりそうなのもある。でもデベロッパにとっては、こうやってMozillaがデベロッパツールの改良に励み、競合に負けまいとしている姿は大歓迎だ。

[原文へ]
(翻訳:iwatani(a.k.a. hiwa))