CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mckee

第37回HTML5とか勉強会に参加して参りました。
今回のテーマは「ビギナー向けデバッグツール特集」です。
ビギナー向けという事で、ブラウザでのデバッグ入門者には、
開発効率がアップする情報があるかと思います。
基本的な使い方は様々なページで紹介されていると思うので、
今回のレポートでは目についたところや、それぞれの違いや特徴を主にまとめています。

以下、レポートです。

内容

  • 「Chrome Devtoolsでデバッグ」 (20 min)吉川さん ( html5j.org )
  • 「Safariでデバッグ」 (20 min)中島さん ( html5j.org )
  • 「Firefoxでデバッグ」 (20 min)浅井さん ( Mozilla Japan )
  • 「IEでデバッグ」 (20 min)物江さん ( Microsoft )
  • 「Adobe Edge Inspectを利用してデバッグ」 (20 min)轟さん ( Adobe Systems inc. )

Chromeでデバッグ( html5j 吉川さん )

Chrome Canary Build

いきなりですが、最新機能をモリモリ搭載したChromeです。
devtoolsを右側表示にする時、Chrome Canary Buildだと、Virtical View という通常のChromeとは違う配置の devtool が使えます。
他にも通常のChromeにはない新機能をガンガン試したいという方は、Chrome Canary Buildがおすすめです!

ショートカットキー

下記など恥ずかしながら、ショートカットを全然知らなかったです。

hキー visibility:hidden;が適応される
alt+上下キー 0.1ずつ値を変更

他にもショートカットがたくさんありました。Chrome Devtools Cheatsheet

リモートデバッグ


解説はありませんでしたが、Chromeを使ったデバッグ手法としては、Chrome for Androidを使ったリモートデバッグも便利そうです。
Remote Debugging – Chrome Developer Tools — Google Developers
https://developers.google.com/chrome-developer-tools/docs/remote-debugging

さらなる解説

今回は、本当に触りの部分しか紹介されませんでしたが、さらなる開発者ツールの使い方を
3/28 に Google developers live にて、Hangouts 配信予定だそうです!
Google Developers Live

吉川さんのスライド
http://www.slideshare.net/yoshikawa_t/chrome-devtools-for-beginners

Safariでデバッグ ( html5j 中島さん )


Safari6が対象(Windowsの方は使えない機能がたくさん…)です!

Chrome devtoolsとの違い

  • UIが結構違う
  • User Agentの項目(Androidがないなど)
  • JS/CSSファイルがChrome devtoolsのLive Editのように編集できない。
  • CSS編集時にカラーピッカーが出ない。
  • minifyされたJSファイルの展開ができない。
  • 日本語があると行番号がずれるというバグ*1が有る。JSのデバッグには致命的。

※1 そんなバグにも解決方法があるようです。
Webインスペクタの行番号がズレてたら直しましょう – 定食屋おろポン

Safariのいいところ

  • スニペットエディタ
    リアルタイムでHTMLの編集とプレビューができる。
  • リモートデバッグ(iOSのデバッグが便利)
    Safari6 + iOS6 環境が必要。
  • iOSシミュレータ
    iOSのSafariを再現(バグも再現)する。
    OSバージョン、画面解像度がある程度選べる。
    スクリーンショットとれるし確認しやすい。
  • Debugメニュー追加
    ターミナルから下記を実行します。

    defaults write com.apple.Safari IncludeInternalDebugMenu -boolean true
    
    Cache Window ページ内のキャッシュ状況表示する。
    Miscellanesous Flags chrome://falgs的な設定変更が可能になる。
    Drawing/Compositing Flags GPU関連の設定が可能になる。
    Compositing Borders GPUによる描画の境界線の表示(これはChromeにもある)する。
    描画の更新回数が表示される(ここがSafariならでは)。

やはりJS/CSSのデバッグには他のブラウザがオススメです。
ただ、iOS端末のデバッグには強力で、iOSシミュレータとの併用でさらに快適なデバッグが可能になります。

中島さんのスライド
http://www.slideshare.net/html5j/debug-in-safari-17451632

Firefoxでデバッグ ( Mozilla 浅井さん )

UIもエラーメッセージも日本語で表示されるし、CSSプロパティ横の(?)ボタンを押すと、MDNの解説ページが見れる、真面目な日本人にも優しいブラウザFirefoxの紹介です。

3Dビュー


Firefox の開発者ツールといえばこれ!「3Dビュー」!!
浅井さんからも「テクノロジーの無駄遣い」なんて言葉がありましたが、そんな機能を使ってさらにテクノロジーの無駄遣いをしているページの紹介がありました。
Firefox の開発者ツールで3Dビューにしてご覧下さい。
3D DOM Inspector

コマンドライン

Firefox はコマンドラインで各種操作ができる機能も持っています。CUI使いはぜひ一度触ってみてください。
参考:「Firefox 16」のコマンドラインを使ってみた。これは色々と捗る、のか?! | REFLECTDESIGN

http://re-dzine.net/2012/10/firefox-16-command-line/

Sublime Text から Firefox 上で Live Edit

最近チヤホヤされているSublime Textから、
Firefoxのデバッガにつないで、Firefoxで閲覧中のファイルを Live Edit するという試みがされているようです。
普段の開発環境から、Live Edit ができるようになると、非常に捗りそうで憧れます。

Firefox CSS live edit in Sublimetext (work in progress) – YouTube

Firefox OS 関連

Firefox OS Simulator

第3のモバイルOSとして登場して話題となったFirefox OSですが、
Firefoxのプラグインとしてシミュレータを出しています。iOS + Safari のように Firefox OS + Firefox という開発になりそうです。
Firefox OS Simulator :: Add-ons for Firefox
参考:「Firefox OS」触ってみた。というか誰でもPCで起動できます 【増田 @maskin】 : TechWave

Firefox MarketPlace

Firefox OS 向けのアプリストアとして 「Firefox Marketplace」が用意されています。

Building Firefox OS

Firefox OSに関するUIのドキュメント
Building Firefox OS

Scratchpad

Chrome の devtools など主な開発者ツールは、JavaScript を1行ごとに実行して検証することはできますが、この Scratchpad は範囲選択した部分だけなど、コードの一部を実行して検証できます。
Ajaxリクエストを用いるようなサイトで、スクリプトの部品ごとの検証などに非常に役立ちそうです。
Scratchpad – Tools | MDN

「GPU更新箇所が色分け表示」「CSSアニメーションのデバッグツール」など開発中の機能も盛りだくさんのFirefoxは、テクノロジーが無駄なく使われていると思います!!

浅井さんのスライド
http://www.slideshare.net/dynamis/firefox-and-firebug-with-foxkeh

IEでデバッグ ( Microsoft 物江さん )


IEでデバッグしたことがあまりないので、知らないことがたくさんありました。
意外に minify されたスクリプトも展開できるし、スクリプトのオブジェクトの状態監視や、プロファイラなど開発者ツール的なものは実装されていました。知らなくてごめんなさい…。
Firefox や Chrome の拡張にある「Web Developer」のような、
ルーラやイメージレポートを表示する機能なども搭載されているので、標準機能は充実しているのかなと思いました。

物江さんの解説ページ
http://blogs.msdn.com/b/osamum/archive/2011/10/05/hehehe.aspx

Adobe Edge Inspectを利用してデバッグ ( Adobe 轟さん )


Adobe Edge」という製品群の中のひとつで、クロスブラウザテスト、モバイルシミュレータ機能をもつ「Adobe Edge Inspect」の紹介です。

モバイルサイトのリモート検証ツール

  • 無線状態でWeb Inspection できる(複数デバイス一斉連動)
  • 無線状態でデバッグ
  • スクリーンショット

入手先

Edgeツール&サービスは、Creative Cloudのメンバー登録が必要です。使える機能に制限があるものもありますが、無償メンバーも利用可です。
Webデザインツール&サービス | HTML, CSS, JavaScriptなど | Adobe Edge

ブラウジング機能

  • 現状Chromeのみのサポート
  • 複数デバイスに一斉連動
  • localhostもブラウズ可能
  • バーチャルホストも対応
  • ベーシック認証サイトもOK http://ID:パスワード
  • ローカルファイルはアクセス出来ないfile://

Edge Reflow

レスポンシブWebデザインをコーディングせずに実現できます。
画面の操作だけで、ウィンドウサイズによってCSSの生成(Media Queriesを使ったり)を行なってくれるので、見たままを即コードにしてくれます。
Edge Inspectとの連携によって、さらに開発効率がアップします。

まとめ

私は普段 Chrome を主に使っていますが、他のブラウザの開発者ツールも特徴があって面白いです。Firefox の開発者ツールは見た目もカッコイイなんて思ったりします。
スマートフォンの開発をするときには、それぞれの OS に最適なブラウザでの開発が求められそうで、ブラウザと OS が抱き合わせのようなイメージです。
Adobe Edge などは開発場面ごとの連携が非常に強力なので、使いこなせば開発効率は非常に高まる予感です。
さらなる開発効率アップを目指して、ブラウザの情報を追いかけて行きたいと思います!!

Subscribe:
pagetop